﻿.box-info .story__summary {    display: block;}
.box-info .story__summary > a {overflow: initial;display: inline-block;        color: var(--primary);        text-decoration: underline;    }
.box-info .story__thumb {    width: 562.5px;}
.box-info .story__thumb img {        object-fit: contain;    }
.timeline {    padding-top: 30px;}
a.view-more:not([href]) {    color: #fff;}
.story .story__thumb i {    position: absolute;    height: 50px;    width: 50px;    color: var(--Gray-White);    background: var(--primary);    border-radius: 0 6px 0 0;    bottom: 0;}
.box-related-news .story .story__thumb {    box-shadow: 0px 1px 2px var(--Gray-300), 0px 0px 2px var(--Gray-500);}
.abf-dhd .story .story__thumb, .timeline .story .story__thumb, .box-related-news .story .story__thumb {    box-shadow: 0px 1px 2px var(--Gray-300), 0px 0px 2px var(--Gray-500);}
.abf-dhd .left .story__heading a, .timeline .box-content .story__heading a {    padding-top: 7px;    font-weight: 500;}
.abf-dhd .center .story__heading a {    padding-top: 7px;    font-weight: 500;}
.abf-dhd .right .story__heading a {    padding-top: 7px;    font-weight: 500;}
.timeline .box-content .story .location, .abf-dhd .center .story .location, .abf-dhd .left .story .location ,.multimedia .box-content .story .location  {   padding-top: 7px;}
.abf-dhd .right .story__heading a {    padding-top: 7px;    font-weight: 500;}
.timeline .box-content .story .location, .abf-dhd .center .story .location, .abf-dhd .left .story .location ,.multimedia .box-content .story .location  {   padding-top: 7px;}
.story__summary > * {    display: inline;}
.story__summary > span {    display: inline;    color: var(--primary);    font-weight: 500;}
.multimedia {    background-size: cover;}
.multimedia .box-content .story .location {    margin-top: 8px;    display: flex;    align-items: center;    color: var(--Gray-White);    font-size: 14px;    font-weight: var(--font-weight-medium);    gap: 4px;}
.search .region-text {    display: flex;    justify-content: space-between;    align-items: center;    margin-bottom: 32px;    padding-top: 20px;    position: relative;}
.search .keywords {    padding-left: 24px;    text-transform: uppercase;    font-weight: 500;}
.search .keywords .search-keyword {        color: var(--primary)    }
.search .region-text .keywords ::before {    content: '';    width: 11px;    height: 32px;    position: absolute; /* top: 5px; */    left: 0;    background-color: var(--primary);    webkit-transform: skew(-20deg);    -moz-transform: skew(-20deg);    -o-transform: skew(-20deg);    transform: skew(-20deg);}
.timeline.content-list .box-content {    display: flex;    justify-content: space-between;    flex-flow: row wrap;}
.timeline.content-list .story {    margin-bottom: var(--gutter);    padding-bottom: var(--gutter);    border-bottom: 1px solid var(--border-color);}
.timeline.content-list .story__thumb {    width: 340px;    margin-bottom: 0;    float: left;    margin-right: 20px;}
.timeline.content-list.search .story {    width: 100%;}
/*Bieu do */
.box-bieudo {   display: flex;    flex-direction: row; /* horizontal layout */    gap: 20px;    width: 100%; /* Takes full width of its parent */    max-width: 100vw; /* Optional: prevents overflow */}
.box-bieudo .column {        flex: 1; /* equal width columns */        padding: 20px;    }
/* #btv-chart {    width: 100%;    margin: 0 auto;    border-right: 1px solid var(--Gray-200);} */
/* max-width: 800px; */
#bch-chart .bar caption, #btv-chart .bar caption {    font-size: 2rem;    font-weight: bold;    line-height: 2.5rem;    text-transform: uppercase;    text-align: center;}
#bch-chart .bar, #btv-chart .bar {    --color: var(--color-3);    --labels-size: 160px;    --aspect-ratio: auto; /* Controls bar thickness vs length */}
#bch-chart .bar td, #btv-chart .bar td {        border-radius: 5px;        padding-right: 7px;    }
#btv-chart .bar td .data, #bch-chart .bar td .data {            padding-left: 14px;        }
#bch-chart .bar tr, #btv-chart .bar tr {transition-duration: 0.3s;    }
#bch-chart .bar tr:hover, #btv-chart .bar tr:hover {background-color: rgba(75, 75, 75, 0.2);border-radius: 5px;        }
#bch-chart .bar tr:hover th, #btv-chart .bar tr:hover th {background-color: rgba(245, 166, 35, 0.6);color: var(--color-1);justify-content: center;border-radius: 5px;}
    /* #btv-chart .bar tbody {  overflow-x: hidden;} remove this to see how it works */
#btv-chart .bar tbody th, #bch-chart .bar tbody th {        background-color: #fff;        z-index: 1;    }
#btv-chart .bar tbody td, #bch-chart .bar tbody td {        transform-origin: left;        animation: moving-bars 2s ease-out forwards;    }
@keyframes moving-bars {
    from {
        width: 0;
    }

    to {
        width: var(--value); /* Adjust to desired final width */
    }
}

@media only screen and (max-width: 600px) {
    .box-bieudo {
        flex-direction: column;
    }
}
@media only screen and (max-width:1024px) { 
    .site-header .navigation .main a {        width: 110px;  color:#D20D25;  }
    .site-header .navigation .main a span {font-size: 1.75rem;    }
}
.load-more {    justify-content: center;    display: flex;    font-weight: 500;    font-size: 1.5rem;}
.ic-arrow-down:before {    content: "\e900";    transform: rotate(90deg);    font-size: 16px;    margin-left: 5px;}
.ic-arrow-up:before {    content: "\e900";    transform: rotate(-90deg);    font-size: 16px;    margin-left: 5px;}

/* Bổ sung ngày 1.8.2025 thêm xử lý giao diện trên ipad*/
.site-header .navigation.sc-820 {    display: none;}
.site-header .navigation.sc-820 .container {display: none;align-items: center;position: absolute;top: 100%;left: 0;flex-direction: column;        background-color: #f5a623;        padding: 10px 16px;        height: 100vh;        transform: translateX(100%);        opacity: 0;        transition: all .3s linear;        z-index: 9;        width: 100%;        min-width: 100%;        justify-content: revert;    }
.site-header .navigation.sc-820 .main {        position: relative;        width: 100%;    }
@media only screen and (max-width:850px) {
    body.no-scroll {        overflow-y: hidden;    }
    .site-header .navigation.sc-820 {       display: flex;      max-width: 820px;        position: relative;        height: 70px;        align-items: center;        justify-content: flex-end;        padding: 0 16px;    }
    .site-header .navigation.sc-820 .main a span {            font-size: 22px;        }
    .site-header .navigation.sc-820 .icon-menu {            display: inline-block;            cursor: pointer;        }
    .site-header .navigation {        display: none;    }
	.site-header .navigation.sc-820 .container.show {  display:flex;          opacity: 1;            transform: translateX(0);        }
	/* .site-header .navigation .main a span{font-size: 22px;} */
	.site-header .navigation.sc-820 .main a {display: flex;align-items: center;justify-content: flex-start;padding: 10px 0;width: 100%;border-top: 1px solid #fff;            font-size: 22px;height: auto;        }
    .site-header .navigation.sc-820 .main:not(:first-child):before {            content: unset;        }
	.site-header .navigation.sc-820 .main .submenu {padding-left: 16px;            display: revert;            left: unset;            position: inherit;        }
	.site-header .navigation.sc-820 .main .submenu a {color: var(--Gray-White);                font-size: 15px;border-top: 1px solid #fff !important;                text-transform: none;background: unset;}
	.site-header .navigation.sc-820 .search {position: relative;height: 36px;background: var(--Gray-White);display: flex;align-items: center;order: -1;            width: 100%;        }
    .site-header__body .banner-header {        background: #d20d25 url(../img/banner-header-vi.png) center center/820px no-repeat;        height: 70px;    }
    .site-header .navigation.sc-820 .home-logo {        margin-right: auto;    }
	.site-header .navigation.sc-820 .home-logo .main a {padding: 4px 0; border-top:unset;}
    .abf-dhd {        display: grid;        gap: var(--gutter);        grid-template-columns: 1fr;    }
	.abf-dhd .left {            display: grid;            grid-template-columns: repeat(2,1fr);            gap: var(--gutter);        }
	.abf-dhd .center {            grid-row: 1;        }
    .multimedia {        background-size: cover;    }
	.multimedia .box-content .active {            grid-template-columns: 1fr;        }
	.box-filter{overflow-x:auto;}
	.box-filter::-webkit-scrollbar {    display: none;}
	.box-info .story__thumb {width: 360px;}
}
.site-header .navigation .icon-menu .bar1, .site-header .navigation .icon-menu .bar2, .site-header .navigation .icon-menu .bar3 {    width: 30px;    height: 3px;    background-color: #fff;    margin: 6px 0;    transition: .4s;
    border-radius: 360px;}
.site-header .navigation .icon-menu.change .bar1 {    transform: translate(0,11px) rotate(-45deg);}
.site-header .navigation .icon-menu.change .bar2 {    opacity: 0;}
.site-header .navigation .icon-menu.change .bar3 {    transform: translate(0,-7px) rotate(45deg);}
.box-info .story__heading {    display: block;}
.executive-list .box-heading.two-rows { flex-wrap:wrap;   flex-direction:column;    align-items:center;}
.story__summary > b{font-weight:600;font-size:15px;color:var(--body-color);}