/* Minification failed. Returning unminified contents.
(3856,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3857,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3858,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3859,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3860,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3861,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3862,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3863,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3864,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3865,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3866,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3888,22): run-time error CSS1039: Token not allowed after unary operator: '-transition'
(3907,26): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(3912,26): run-time error CSS1039: Token not allowed after unary operator: '-transition'
(3916,20): run-time error CSS1039: Token not allowed after unary operator: '-danger-color'
(3920,22): run-time error CSS1039: Token not allowed after unary operator: '-danger-color'
(3928,20): run-time error CSS1039: Token not allowed after unary operator: '-danger-color'
(3930,42): run-time error CSS1039: Token not allowed after unary operator: '-danger-color'
(3953,30): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(3958,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-medium'
(3962,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(3963,22): run-time error CSS1039: Token not allowed after unary operator: '-transition'
(3999,22): run-time error CSS1039: Token not allowed after unary operator: '-transition'
(4035,26): run-time error CSS1039: Token not allowed after unary operator: '-transition'
(4053,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4062,21): run-time error CSS1039: Token not allowed after unary operator: '-danger-color'
(4079,21): run-time error CSS1039: Token not allowed after unary operator: '-text-medium'
(4088,46): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4096,22): run-time error CSS1039: Token not allowed after unary operator: '-transition'
(4126,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4140,31): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4225,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4258,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4313,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4374,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4424,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4433,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4436,35): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4463,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4476,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4495,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4505,32): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4527,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4551,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4668,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4675,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4723,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4784,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4863,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4905,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4939,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(4950,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5185,29): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(5190,29): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(5204,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5213,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5218,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5315,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5547,30): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5552,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5564,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5621,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5652,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5662,30): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5677,34): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5688,35): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5717,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5731,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5736,35): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5753,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5754,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5855,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5869,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(5880,33): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
 */
@font-face {
    font-family: 'SanFranciscoText-Regular';
    src: url("../fonts/San Francisco/SanFranciscoText-Regular.otf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'SanFranciscoText-Medium';
    src: url("../fonts/San Francisco/SanFranciscoText-Medium.otf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'SanFranciscoDisplay-Regular';
    src: url("../fonts/San Francisco/SanFranciscoDisplay-Regular.otf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'SanFranciscoDisplay-Bold';
    src: url("../fonts/San Francisco/SanFranciscoDisplay-Bold.otf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'SanFranciscoDisplay-Medium';
    src: url("../fonts/San Francisco/SanFranciscoDisplay-Medium.otf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url("../fonts/Roboto/Roboto-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'Roboto-Medium_0';
    src: url("../fonts/Roboto/Roboto-Medium_0.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

#header {
    background-color: white;
    width: 100% !important;
    z-index: 1040;
}

/* Toast / bootstrap-notify — luôn nổi trên header sticky */
[data-notify="container"].alert {
    z-index: 10050 !important;
    position: fixed !important;
    pointer-events: auto;
}

    #header .nav-overlay {
        background-color: #f6f6f6
    }

@media (min-width:1600px) {
    #header + .uk-sticky-placeholder {
        max-height: 100px
    }
}

@media (max-width:1600px) {
    #header + .uk-sticky-placeholder {
        max-height: 75px
    }
}

#header.uk-active {
    -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 4px 5px 0 rgba(0, 0, 0, 0.06), 0 1px 10px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 4px 5px 0 rgba(0, 0, 0, 0.06), 0 1px 10px 0 rgba(0, 0, 0, 0.08)
}

#header .uk-search .uk-search-input {
    padding-left: 0;
    padding-right: 40px
}

#header .uk-search .select_lang, #header .uk-search .uk-search-icon {
    left: inherit !important;
    right: 0
}

#header .uk-navbar-nav.uk-visible\@m > li {
    position: relative
}

    #header .uk-navbar-nav.uk-visible\@m > li:last-child:hover > a:before {
        right: 0
    }

    #header .uk-navbar-nav.uk-visible\@m > li:last-child > a {
        padding-right: 0
    }

        #header .uk-navbar-nav.uk-visible\@m > li:last-child > a.uk-open:before {
            right: 0
        }

    #header .uk-navbar-nav.uk-visible\@m > li:hover > a:before {
        right: 15px
    }

    #header .uk-navbar-nav.uk-visible\@m > li > a.uk-open:before {
        right: 15px
    }

#header .uk-navbar-nav > li > a {
    color: #333333;
    font-size: 15px;
    font-family: 'SanFranciscoText-Regular';
    font-size: 0.9375rem;
    position: relative
}

@media (max-width:1366px) {
    #header .uk-navbar-nav > li > a {
        padding: 0 10px
    }
}

@media (min-width:960px) {
    #header .uk-navbar-nav > li > a {
        font-size: 0.625rem
    }
}

@media (min-width:987px) {
    #header .uk-navbar-nav > li > a {
        font-size: 0.6875rem
    }
}

@media (min-width:1035px) {
    #header .uk-navbar-nav > li > a {
        font-size: 0.75rem
    }
}

@media (min-width:1198px) {
    #header .uk-navbar-nav > li > a {
        font-size: 0.8125rem
    }
}

@media (min-width:1144px) {
    #header .uk-navbar-nav > li > a {
        font-size: 0.9375rem
    }
}

@media (min-width:1600px) {
    #header .uk-navbar-nav > li > a {
        font-size: 1.0625rem
    }
}

@media (min-width:1800px) {
    #header .uk-navbar-nav > li > a {
        font-size: 1.125rem
    }
}

@media (min-width:1920px) {
    #header .uk-navbar-nav > li > a {
        font-size: 1.125rem
    }
}

#header .uk-navbar-nav > li > a:before {
    content: '';
    display: block;
    position: absolute;
    left: 15px;
    right: calc(102% - 15px);
    bottom: 20px;
    height: 2px;
    background-color: #17479b;
    -webkit-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    -webkit-transition-property: right;
    -o-transition-property: right;
    transition-property: right
}

#header .uk-navbar-nav > li > a, .uk-navbar-item {
    min-height: 75px
}

@media (min-width:1600px) {
    #header .uk-navbar-nav > li > a, .uk-navbar-item {
        min-height: 100px
    }
}

#header .nav-overlay .uk-navbar-nav > li > a, .nav-overlay #header .uk-navbar-nav > li > a, .nav-overlay .uk-navbar-item {
    min-height: 150px
}

.top_header {
    background: rgba(111, 111, 111, 0.1)
}

    .top_header .uk-navbar-nav > li > a {
        color: #AFAFAF;
        min-height: 34px;
        text-transform: inherit;
        font-family: 'SanFranciscoDisplay-Regular'
    }

    .top_header .uk-navbar-nav > li:last-child > a {
        padding-right: 0
    }

.icon-scroll {
    width: 20px;
    height: 35px;
    -webkit-box-shadow: inset 0 0 0 1px #fff;
    box-shadow: inset 0 0 0 1px #fff;
    border-radius: 25px;
    cursor: pointer;
    z-index: 2;
    bottom: 15px;
    overflow: hidden
}

    .icon-scroll:before {
        content: '';
        width: 2px;
        height: 8px;
        background: #fff;
        top: 8px;
        left: calc((100% - 2px)/2);
        position: absolute;
        border-radius: 4px;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-name: scroll;
        animation-name: scroll
    }

#menu_link_slide {
    bottom: 41px
}

    #menu_link_slide .uk-navbar-nav > li {
        margin-right: 20px
    }

        #menu_link_slide .uk-navbar-nav > li.uk-active > a:before {
            height: 2px
        }

        #menu_link_slide .uk-navbar-nav > li > a {
            color: #FFFFFF;
            font-family: 'SanFranciscoText-Regular';
            font-size: 15px;
            position: relative;
            padding-left: 0;
            font-size: 0.9375rem
        }

@media (min-width:1600px) {
    #menu_link_slide .uk-navbar-nav > li > a {
        font-size: 1.0625rem
    }
}

@media (min-width:1800px) {
    #menu_link_slide .uk-navbar-nav > li > a {
        font-size: 1.125rem
    }
}

@media (min-width:1920px) {
    #menu_link_slide .uk-navbar-nav > li > a {
        font-size: 1.125rem
    }
}

#menu_link_slide .uk-navbar-nav > li > a:hover:before {
    height: 2px
}

#menu_link_slide .uk-navbar-nav > li > a:before {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0;
    bottom: 25px;
    height: 1px;
    background-color: #FFFFFF;
    -webkit-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    -webkit-transition-property: right;
    -o-transition-property: right;
    transition-property: right
}

.uk-dotnav {
    opacity: 0
}

#slider_home .uk-dotnav {
    margin-left: 0;
    margin-bottom: 67px
}

@media (min-width:960px) {
    #slider_home .uk-dotnav {
        margin-bottom: 67px
    }
}

#slider_home .uk-dotnav li {
    padding: 0;
    background-color: rgba(255, 255, 255, 0.4) !important
}

    #slider_home .uk-dotnav li.uk-active {
        background-color: white !important
    }

        #slider_home .uk-dotnav li.uk-active a {
            background-color: white !important
        }

    #slider_home .uk-dotnav li a {
        width: 40px;
        height: 2px;
        background-color: rgba(255, 255, 255, 0.4) !important;
        border: none !important
    }

.title_slide_h {
    font-family: 'SanFranciscoDisplay-Medium';
    font-weight: 500
}

@media (min-width:1200px) {
    .title_slide_h {
        font-size: 2.8rem
    }
}

@media (min-width:1440px) {
    .title_slide_h {
        font-size: 3rem
    }
}

@media (min-width:1600px) {
    .title_slide_h {
        font-size: 3.2rem
    }
}

@media (min-width:1800px) {
    .title_slide_h {
        font-size: 3.4rem
    }
}

@media (min-width:1920px) {
    .title_slide_h {
        font-size: 4.5rem
    }
}

.uk-blue .title_slide_h {
    color: #17479b
}

.btn_slide_h {
    color: #17479b !important;
    font-weight: 300;
    font-family: 'SanFranciscoDisplay-Regular';
    font-size: 0.9375rem
}

@media (min-width:1600px) {
    .btn_slide_h {
        font-size: 1.0625rem;
        line-height: 58px;
        width: 180px
    }
}

@media (min-width:1800px) {
    .btn_slide_h {
        font-size: 1.125rem
    }
}

@media (min-width:1920px) {
    .btn_slide_h {
        font-size: 1.125rem
    }
}

.uk-blue .btn_slide_h {
    background-color: #17479b;
    border-color: #17479b;
    color: #FFFFFF !important
}

.title_partner {
    font-family: 'SanFranciscoText-Regular';
    color: #333333;
    font-size: 22px
}

@media (min-width:1920px) {
    .title_partner {
        font-size: 24px
    }
}

#slider_brand img {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9)
}

@media (min-width:1600px) {
    #slider_brand img {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@media (min-width:1900px) {
    #slider_brand img {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }
}

.box_register .uk-input {
    color: #6f6f6f;
    border-color: #333333;
    font-size: 0.9375rem
}

@media (max-width:560px) {
    .box_register .uk-input {
        font-size: 10px
    }
}

@media (min-width:1600px) {
    .box_register .uk-input {
        font-size: 1.0625rem
    }
}

@media (min-width:1800px) {
    .box_register .uk-input {
        font-size: 1.125rem
    }
}

@media (min-width:1920px) {
    .box_register .uk-input {
        font-size: 1.125rem
    }
}

.box_register .uk-input::-webkit-input-placeholder {
    color: #6f6f6f
}

.box_register .uk-input:-ms-input-placeholder {
    color: #6f6f6f
}

.box_register .uk-input::-ms-input-placeholder {
    color: #6f6f6f
}

.box_register .uk-input::placeholder {
    color: #6f6f6f
}

.box_register .uk-button-primary {
    background-color: #17479b;
    border-color: #17479b
}

body {
    font-size: 14px;
    font-family: 'SanFranciscoText-Regular';
    color: #333333;
    background-color: #fafafa
}

.uk-container-large {
    max-width: 9999px
}

@media (min-width:1600px) {
    .uk-container-large {
        padding-left: 100px;
        padding-right: 100px
    }
}

.title_common {
    font-size: 24px;
    margin-top: 0;
    color: #17479b;
    font-family: 'SanFranciscoText-Medium'
}

.desc_c {
    font-family: 'SanFranciscoText-Regular';
    color: #000
}

.common.uk-grid-divider > div:not(.uk-first-column):before {
    border-color: #6f6f6f !important
}

.title_aside {
    color: #17479b;
    font-size: 16px;
    font-family: 'SanFranciscoText-Medium';
    position: relative;
    padding-bottom: 6px
}

    .title_aside:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        border-bottom: 1px solid #6f6f6f;
        width: calc(100% + 40px)
    }

.title_c1 {
    font-size: 16px;
    color: #17479b;
    font-family: 'SanFranciscoText-Medium'
}

.card1 {
    background-color: #17479b
}

@media (max-width:640px) {
    .card1 {
        margin-left: -15px;
        margin-right: -15px;
        background-color: transparent
    }

        .card1 .uk-card-body {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            background: rgba(23, 71, 155, 0.5)
        }
}

#footer {
    background-color: #f9f9f9;
    border-top: 1px solid #6F6F6F
}

.logo_f img {
    height: 46px
}

@media (min-width:1600px) {
    .logo_f img {
        height: 60px
    }
}

.title_f {
    color: #17479b;
    font-size: 18px;
    line-height: 24px;
    font-family: 'SanFranciscoDisplay-Bold';
    font-weight: bold
}

.hotline .title_f {
    color: #333333
}

    .hotline .title_f span {
        color: #f20022
    }

@media (min-width:1920px) {
    .social_f svg {
        width: 30px
    }
}

.social_f a {
    color: #333333
}

.author {
    font-size: 0.9375rem
}

@media (min-width:1600px) {
    .author {
        font-size: 1.0625rem
    }
}

@media (min-width:1800px) {
    .author {
        font-size: 1.125rem
    }
}

@media (min-width:1920px) {
    .author {
        font-size: 1.125rem
    }
}

.hotline .author a {
    color: #333333
}

.title_fix {
    color: #17479b;
    font-size: 18px;
    line-height: 24px;
    font-family: 'SanFranciscoDisplay-Bold';
    font-weight: bold
}

    .title_fix span {
        color: #f20022
    }

.info_cty {
    font-size: 0.875rem
}

@media (min-width:1600px) {
    .info_cty {
        font-size: 1.0625rem
    }
}

@media (min-width:1800px) {
    .info_cty {
        font-size: 1.125rem
    }
}

@media (min-width:1920px) {
    .info_cty {
        font-size: 1.125rem
    }
}

@-webkit-keyframes scroll {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        opacity: 0
    }
}

@keyframes scroll {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        opacity: 0
    }
}

@-webkit-keyframes suntory-alo-circle-fill-anim {
    0% {
        opacity: .2;
        -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
        transform: rotate(0deg) scale(0.7) skew(1deg)
    }

    50% {
        opacity: .2;
        -webkit-transform: rotate(0deg) scale(1) skew(1deg);
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    to {
        opacity: .2;
        -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
        transform: rotate(0deg) scale(0.7) skew(1deg)
    }
}

@keyframes suntory-alo-circle-fill-anim {
    0% {
        opacity: .2;
        -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
        transform: rotate(0deg) scale(0.7) skew(1deg)
    }

    50% {
        opacity: .2;
        -webkit-transform: rotate(0deg) scale(1) skew(1deg);
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    to {
        opacity: .2;
        -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
        transform: rotate(0deg) scale(0.7) skew(1deg)
    }
}

@-webkit-keyframes suntory-alo-circle-img-anim {
    0% {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg);
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg);
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    to {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg);
        transform: rotate(0deg) scale(1) skew(1deg)
    }
}

@keyframes suntory-alo-circle-img-anim {
    0% {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg);
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg);
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    to {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg);
        transform: rotate(0deg) scale(1) skew(1deg)
    }
}

.m_nav_ham {
    width: 25px;
    height: 3px;
    background: #ed2622;
    margin: 4px auto;
    margin-left: 0;
    margin-right: 0;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -ms-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s
}

.active_mobile_menu .m_nav_ham {
    width: 25px !important
}

.m_nav_ham_2_open {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin-top: -7px
}

.m_nav_ham_1_open {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-top: 13px
}

.m_nav_ham_3_open {
    opacity: 0
}

#m_ham_1 {
    width: 22px
}

#m_ham_2 {
    width: 18px
}

#m_ham_3 {
    width: 25px
}

#mobile_menu {
    background-color: #f5f7fa;
    padding: 0;
    z-index: 100000;
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 59px);
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    height: 100vh;
    border-top: 1px solid #d8d8d8
}

    #mobile_menu a {
        text-decoration: none
    }

    #mobile_menu > ul > li > a {
        background: #FFFFFF;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid #e5e7eb;
        text-decoration: none
    }

    #mobile_menu > ul > li ul li a {
        background: #FFFFFF;
        border-bottom: 1px solid #e5e7eb
    }

        #mobile_menu > ul > li ul li a:before {
            font-family: FontAwesome;
            content: "\f068";
            display: inline-block;
            margin-right: 10px;
            font-size: 12px
        }

    #mobile_menu ul {
        margin: 0;
        list-style: none;
        padding: 0
    }

        #mobile_menu ul ul ul li a {
            padding: 10px 70px
        }

        #mobile_menu ul ul li a {
            padding: 10px 50px
        }

        #mobile_menu ul li {
            margin: 0;
            text-align: left;
            width: 100%
        }

            #mobile_menu ul li ul {
                display: none
            }

            #mobile_menu ul li i {
                width: 32px;
                height: 32px;
                text-align: center;
                font-size: 10px;
                line-height: 30px;
                margin-right: 10px;
                color: #4a4a4a;
                z-index: 9;
                position: absolute;
                right: 0;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%
            }

            #mobile_menu ul li a {
                color: #4a4a4a;
                font-size: 13px;
                line-height: 1.7em;
                text-transform: uppercase;
                display: block;
                position: relative;
                padding: 12px 15px;
                -webkit-transition: all .2s ease-out;
                -moz-transition: all .2s ease-out;
                -ms-transition: all .2s ease-out;
                -o-transition: all .2s ease-out;
                transition: all .2s ease-out
            }

.social_h a {
    color: #FFFFFF
}

    .social_h a i.fa {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #172d61;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-size: 21px
    }

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: -90px;
    z-index: 980;
    -webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease
}

    .back-to-top a {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        z-index: 999;
        font-size: 13px;
        padding: 18px 0 6px;
        padding: 0;
        text-align: center;
        text-transform: uppercase;
        position: relative;
        font-weight: bold;
        -webkit-transition: all .5s ease-out;
        -o-transition: all .5s ease-out;
        transition: all .5s ease-out;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        text-decoration: none;
        color: #333333
    }

        .back-to-top a svg {
            width: 25px !important
        }

    .back-to-top.display {
        right: 18px
    }

#header .uk-navbar-dropdown {
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

    #header .uk-navbar-dropdown:not(.uk-dropdown-bottom-right) {
        left: 15px !important
    }

#header .uk-dropdown {
    min-width: 250px;
    width: auto
}

#header .uk-navbar-dropdown-nav {
    background-color: rgba(255, 255, 255, 0.9)
}

    #header .uk-navbar-dropdown-nav > li {
        position: relative
    }

        #header .uk-navbar-dropdown-nav > li:nth-child(n+2) > a:after {
            content: '';
            display: block;
            width: calc(100% - 30px);
            height: 1px;
            background-color: #d2d2d2;
            opacity: .5;
            right: 15px;
            left: 15px;
            position: absolute;
            top: 0
        }

        #header .uk-navbar-dropdown-nav > li:hover > a {
            color: #17479b;
            opacity: 1;
            background-color: rgba(255, 255, 255, 0.91)
        }

        #header .uk-navbar-dropdown-nav > li > a {
            padding: 10px 15px;
            color: #333333;
            opacity: .5;
            position: relative;
            font-family: 'SanFranciscoText-Regular';
            font-size: 14.5px
        }

@media (min-width:1600px) {
    #header .uk-navbar-dropdown-nav > li > a {
        font-size: 1.0625rem
    }
}

@media (min-width:1800px) {
    #header .uk-navbar-dropdown-nav > li > a {
        font-size: 1.125rem
    }
}

@media (min-width:1920px) {
    #header .uk-navbar-dropdown-nav > li > a {
        font-size: 1.125rem
    }
}

#header .uk-navbar-dropdown-nav > li > a[aria-expanded]:before {
    content: "\f105";
    font-family: FontAwesome;
    position: absolute;
    right: 15px;
    top: calc((100% - 17px)/2)
}

.fixed1, .fixed2, .width_fix {
    width: 52px
}

.fixed1 {
    z-index: 1;
    right: 15px;
    top: 110px
}

@media (min-width:1600px) {
    .fixed1 {
        top: 160px
    }
}

.fixed1 .uk-icon-button {
    color: #17479b;
    text-decoration: none
}

    .fixed1 .uk-icon-button svg {
        width: 17px;
        color: #17479b
    }

.fixed1 .select_lang, .fixed1 .uk-search-icon {
    background: #f8f8f8
}

.select_lang {
    width: 36px;
    height: 36px;
    -webkit-transition: height .3s;
    -o-transition: height .3s;
    transition: height .3s;
    border-radius: 18px;
    overflow: hidden
}

    .select_lang:hover {
        height: 108px;
        border-radius: 18px
    }

    .select_lang .uk-icon {
        color: #17479b
    }

[lang=vi] .select_lang .uk-flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

[lang=en] .select_lang .uk-flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
}

.select_lang .uk-flex a {
    position: relative
}

    .select_lang .uk-flex a:after {
        content: '';
        width: 16px;
        height: 1px;
        background-color: #58595b;
        position: absolute;
        bottom: -1;
        left: calc((100% - 16px)/2);
        display: inline-block
    }

.select_lang a {
    padding: 0px 10px;
    line-height: 36px;
    display: block;
    color: #58595b;
    text-decoration: none
}

    .select_lang a:hover {
        color: #17479b
    }

.fixed2 {
    z-index: 2;
    right: 15px;
    bottom: 67px
}

    .fixed2 .txt_hotro {
        white-space: nowrap;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        font-size: 17px;
        color: #B8B8B8;
        top: -170px;
        left: 0;
        right: 0;
        font-family: 'Roboto-Regular'
    }

.boxchat_img {
    background-color: #fff;
    border-radius: 50%;
    border: 0.9921px solid #17479B;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    position: relative
}

    .boxchat_img img {
        -webkit-animation: 1s ease-in-out 0s normal none infinite running suntory-alo-circle-img-anim;
        animation: 1s ease-in-out 0s normal none infinite running suntory-alo-circle-img-anim
    }

.suntory-alo-ph-circle-fill {
    -webkit-animation: 2.3s ease-in-out 0s normal none infinite running suntory-alo-circle-fill-anim;
    animation: 2.3s ease-in-out 0s normal none infinite running suntory-alo-circle-fill-anim;
    border: 2px solid transparent;
    border-radius: 100%;
    height: 67px;
    position: absolute;
    top: calc((100% - 71px)/2);
    left: calc((100% - 71px)/2);
    right: calc((100% - 71px)/2);
    bottom: calc((100% - 71px)/2);
    -webkit-transform-origin: 50% 50% 0;
    -ms-transform-origin: 50% 50% 0;
    transform-origin: 50% 50% 0;
    -webkit-transition: all .5s ease 0s;
    -o-transition: all .5s ease 0s;
    transition: all .5s ease 0s;
    width: 67px;
    background-color: #17479B
}

.uk-breadcrumb li:nth-child(n+2):not(.uk-first-column):before {
    content: '';
    width: 10px;
    height: 1px;
    display: inline-block;
    background-color: #333333;
    margin: 0 5px;
    vertical-align: middle
}

.uk-breadcrumb li a, .uk-breadcrumb li span {
    color: #333333
}

.nav-sidebar li.uk-open > a {
    color: #17479b !important;
    font-family: 'SanFranciscoText-Medium'
}

.nav-sidebar li a {
    text-transform: uppercase;
    color: #333333 !important;
    font-family: 'SanFranciscoText-Regular'
}

    .nav-sidebar li a:hover {
        color: #17479b !important;
        font-family: 'SanFranciscoText-Medium'
    }

.title_tq1 {
    color: #17479b;
    font-family: 'SanFranciscoText-Medium';
    margin: 0;
    font-size: 16px
}

.title_tq2 {
    font-family: 'SanFranciscoDisplay-Bold';
    color: #17479b;
    font-size: 44px;
    margin: 0
}

.time1 {
    color: #6f6f6f;
    font-family: 'SanFranciscoText-Regular'
}

.boximg_tq {
    min-width: 219px;
    width: 100%
}

.card2 .uk-card-body time {
    color: #6f6f6f;
    font-family: 'SanFranciscoText-Regular'
}

.card2 .uk-card-body .uk-card-title {
    margin: 0;
    margin-top: 5px;
    font-family: 'SanFranciscoText-Medium'
}

    .card2 .uk-card-body .uk-card-title a {
        color: #333333
    }

.card2 .uk-card-body p {
    font-family: 'SanFranciscoText-Regular'
}

.card2 .uk-card-body .uk-link {
    color: #17479b
}

.boximg_thanhtic {
    min-width: 200px;
    width: 100%;
    text-align: center
}

.title_thanhtic {
    font-family: 'SanFranciscoText-Regular';
    color: #000;
    margin: 0;
    font-size: 15px
}

    .title_thanhtic:nth-child(n+2) {
        margin-top: 15px
    }

.line1 > div {
    position: relative
}

    .line1 > div:nth-child(n+2):not(.uk-grid-margin):before {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: #000000;
        right: calc(50% - 8px);
        top: -50px
    }

@media (max-width:960px) {
    .ptgd .uk-grid-margin .box1_bdh:after {
        display: none
    }
}

.ptgd .uk-grid-margin .box1_bdh:before {
    height: 50px !important;
    bottom: 100%
}

.ban2 > div:nth-child(n+2) {
    position: relative
}

    .ban2 > div:nth-child(n+2):before {
        content: '';
        position: absolute;
        top: -85%;
        left: -20px;
        width: 1px;
        height: calc(100% + 30px);
        background-color: #000
    }

    .ban2 > div:nth-child(n+2):after {
        content: '';
        position: absolute;
        width: calc(100% - 35px);
        height: 1px;
        background-color: #000000;
        right: calc(100% + 20px) !important;
        top: -50%
    }

.ban1 {
    position: relative;
    height: 82px
}

    .ban1:before {
        width: 50px !important;
        top: 50% !important;
        right: 100% !important;
        height: 1px !important;
        bottom: inherit !important;
        left: inherit !important
    }

@media (max-width:560px) {
    .ban1:before {
        display: none
    }
}

.ban1:after {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    right: calc(100% - 2px);
    top: calc((100% - 20px)/2) !important;
    left: inherit !important
}

@media (max-width:560px) {
    .ban1:after {
        display: none
    }
}

@media (max-width:560px) {
    .hai .uk-grid-margin {
        margin-top: 30px
    }
}

.box1_bdh {
    background-color: #e1e1e1;
    padding: 20px;
    max-width: 150px;
    margin: 0 auto;
    position: relative
}

    .box1_bdh:before {
        content: '';
        width: 1px;
        height: 40px;
        background-color: #000000;
        position: absolute;
        bottom: calc(100% + 10px);
        left: calc((100% - 1px)/2)
    }

.bot .box1_bdh:before {
    opacity: 0
}

.box1_bdh:after {
    content: "\f0d7";
    font-family: FontAwesome;
    position: absolute;
    bottom: 100%;
    left: calc((100% - 8px)/2)
}

.bot .box1_bdh:after {
    opacity: 0
}

.box1_bdh .title {
    font-size: 15px;
    margin: 0;
    margin-top: 10px;
    font-family: 'SanFranciscoText-Medium';
    color: #17479b
}

.box1_bdh small {
    color: #6f6f6f;
    font-size: 13px
}

.btn1 {
    text-transform: inherit;
    position: relative;
    padding-left: 15px
}

    .btn1 .uk-icon {
        right: 10px
    }

.box2_tq li:nth-child(n+2) {
    margin-top: 10px
}

.box2_tq .uk-accordion-title {
    background-color: #17479b;
    color: #FFFFFF;
    padding: 15px 0;
    font-family: 'SanFranciscoText-Medium';
    font-size: 17px
}

    .box2_tq .uk-accordion-title:before {
        content: "\f105";
        font-family: FontAwesome;
        background-image: none;
        margin-right: 10px;
        font-size: 20px
    }

.box2_tq .uk-open .uk-accordion-title:before {
    content: "\f107"
}

.sdtc2 tr td {
    width: 50% !important
}

.table1_tq {
    border: 1px solid #6f6f6f
}

    .table1_tq tbody tr:nth-child(n+2) {
        border: 1px solid #6f6f6f
    }

    .table1_tq tr th {
        border: 1px solid #6f6f6f;
        text-align: center;
        text-transform: inherit;
        font-family: 'Roboto-Medium_0';
        color: #333333;
        background-color: #c7e0ff
    }

    .table1_tq tr td:nth-child(n+2) {
        border-left: 1px solid #6f6f6f
    }

.dvtt {
    position: relative
}

    .dvtt:before {
        content: '';
        width: 1px;
        height: 40px;
        background-color: #000000;
        position: absolute;
        bottom: calc(100% + 10px);
        left: calc((100% - 1px)/2)
    }

    .dvtt:after {
        content: "\f0d7";
        font-family: FontAwesome;
        position: absolute;
        bottom: 100%;
        left: calc((100% - 8px)/2)
    }

.bandieuhanh .uk-margin-large {
    margin-top: 50px !important
}

.bandieuhanh .uk-grid-margin {
    margin-top: 50px !important
}

@media (min-width:960px) {
    .tgd:before {
        height: 70px !important
    }
}

.sdtc1 {
    position: relative
}

    .sdtc1.x1 {
        margin-left: -7px
    }

        .sdtc1.x1 > * {
            padding-left: 7px
        }

    .sdtc1.c2 {
        margin-left: -7px
    }

        .sdtc1.c2 > * {
            padding-left: 7px
        }

        .sdtc1.c2:after {
            opacity: 0;
            content: '';
            position: absolute;
            width: 1px;
            height: 100px;
            background-color: #000000;
            bottom: 105%;
            left: calc((100% + 1px + 15px)/2)
        }

@media (max-width:560px) {
    .sdtc1.c2:after {
        display: none
    }
}

.bgd1 .sdtc1:after {
    display: none !important
}

.sdtc1:after {
    content: '';
    position: absolute;
    width: 1px;
    background-color: #000000;
    bottom: 100%;
    left: calc(50% + 15px)
}

.bgd .sdtc1:after {
    content: '';
    position: absolute;
    width: 1px;
    height: 70px;
    background-color: #000000;
    bottom: 100%;
    left: calc(50% + 15px)
}

.sdtc1 > div:not(.uk-grid-margin) .uk-card:after {
    content: "\f0d7";
    font-family: FontAwesome;
    position: absolute;
    top: -12px;
    left: calc((100% - 8px)/2);
    color: #000
}

.sdtc1 > div:not(.uk-grid-margin) .uk-card:before {
    content: '';
    width: 1px;
    height: 30px;
    background-color: #000000;
    position: absolute;
    bottom: 100%;
    left: calc((100% - 1px)/2)
}

.bgd1 .sdtc1 > div:not(.uk-grid-margin):last-child:after, .bgd1 .sdtc1 > div:not(.uk-grid-margin):last-child:before {
    display: none
}

.sdtc1 > div:not(.uk-grid-margin):nth-child(n+2) {
    position: relative
}

.bgd1 .sdtc1 > div:not(.uk-grid-margin):nth-child(n+2):after {
    display: none !important
}

.sdtc1 > div:not(.uk-grid-margin):nth-child(n+2):before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #000000;
    right: calc(50% - 3px);
    top: -30px
}

@media (max-width:1024px) {
    .man1024 .sdtc1 > div:not(.uk-grid-margin):nth-child(n+2):before {
        right: calc(50% - 6px)
    }
}

.hai1 .sdtc1 > div:not(.uk-grid-margin):nth-child(n+2):before {
    right: calc(50% - 15px)
}

.bgd1 .sdtc1 > div:not(.uk-grid-margin):nth-child(n+2):before {
    opacity: 0;
    top: -30px;
    left: calc((100% + 30px)/2);
    width: calc(100% + 30px) !important
}

.bgd .sdtc1 > div:not(.uk-grid-margin):nth-child(n+2):before {
    width: calc(100% + 50%)
}

.card3 {
    z-index: 10;
    position: relative
}

    .card3.c1 {
        background: #E4E4E4 !important
    }

    .card3.gd {
        background-color: #ed1c24 !important
    }

        .card3.gd.hdtv:after, .card3.gd.hdtv:before {
            display: none
        }

    .card3.uk-card-default {
        background-color: #b9bbbd
    }

    .card3.uk-card-primary {
        padding-top: 20px;
        padding-bottom: 20px;
        background-color: #17479b;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

        .card3.uk-card-primary:after {
            content: "\f0d7";
            font-family: FontAwesome;
            position: absolute;
            top: -12px;
            left: calc((100% - 8px)/2);
            color: #000
        }

.cthd .card3.uk-card-primary:after {
    opacity: 0
}

.card3.uk-card-primary:before {
    content: '';
    width: 1px;
    height: 30px;
    background-color: #000000;
    position: absolute;
    bottom: 100%;
    left: calc((100% - 1px)/2)
}

.cthd .card3.uk-card-primary:before {
    opacity: 0
}

.card3 .uk-card-title {
    font-size: 13px;
    text-align: center;
    font-family: 'SanFranciscoText-Regular';
    color: #000
}

.uk-grid-margin .card3:before {
    content: '';
    width: 1px;
    height: 30px;
    background-color: #000000;
    position: absolute;
    bottom: 100%;
    left: calc((100% - 1px)/2)
}

@media (max-width:960px) {
    .uk-grid-margin .card3:before {
        height: 15px
    }
}

.uk-pagination li a, .uk-pagination li span {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 40px;
    height: 40px;
    background-color: #fff;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: 'SanFranciscoText-Medium';
    color: #17479b
}

.uk-pagination li.uk-active span {
    border: 1px solid #17479b;
    color: #17479b
}

.table1_dautu tr th {
    background-color: #17479b;
    color: #FFFFFF;
    font-family: 'SanFranciscoText-Medium';
    vertical-align: middle
}

.table1_dautu tr td {
    font-family: 'SanFranciscoText-Regular'
}

    .table1_dautu tr td a {
        color: #17479b
    }

.title_dsgtda {
    font-family: 'SanFranciscoText-Medium';
    color: #17479b;
    font-size: 14px;
    margin: 0
}

.table2_ttda caption {
    color: #17479b;
    font-family: 'SanFranciscoText-Medium';
    text-transform: uppercase
}

.table2_ttda tr td {
    font-family: 'SanFranciscoText-Regular'
}

    .table2_ttda tr td:first-child {
        padding-left: 0
    }

    .table2_ttda tr td b {
        color: #000;
        font-family: 'SanFranciscoText-Medium'
    }

.box_back hr {
    border-color: #6f6f6f
}

.back1 {
    text-transform: uppercase;
    color: #6f6f6f;
    font-family: 'SanFranciscoText-Regular'
}

.hoidap li {
    border: 1px solid #6F6F6F
}

    .hoidap li:nth-child(n+2) {
        margin: 0;
        margin-top: -1px
    }

    .hoidap li .uk-accordion-title {
        color: #17479b;
        font-family: 'SanFranciscoText-Medium';
        font-size: 14px;
        padding: 15px 20px
    }

        .hoidap li .uk-accordion-title:before {
            content: "\f107";
            font-family: FontAwesome;
            background-image: none;
            font-size: 18px;
            text-align: center
        }

    .hoidap li .uk-accordion-content {
        margin: 0;
        padding: 15px 20px;
        font-family: 'SanFranciscoText-Regular'
    }

    .hoidap li.uk-open .uk-accordion-title {
        background-color: #17479b;
        color: #FFFFFF
    }

        .hoidap li.uk-open .uk-accordion-title:before {
            content: "\f106"
        }

.name_hd {
    margin: 0;
    font-family: 'SanFranciscoText-Regular';
    color: #333333
}

.time2 {
    color: #6f6f6f
}

.title1_dv {
    color: #17479b;
    font-size: 20px;
    font-family: 'SanFranciscoText-Medium'
}

.btn-send {
    background-color: #17479b;
    border-color: #17479b
}

.card1_dv .uk-card-primary {
    background-color: #17479b;
    font-size: 14px
}

.card1_dv .uk-card-body {
    border: 1px solid #6F6F6F;
    border-top: none
}

    .card1_dv .uk-card-body .uk-list li {
        margin: 0;
        font-family: 'SanFranciscoText-Regular';
        color: #333333
    }

    .card1_dv .uk-card-body a {
        color: #17479b
    }

.title2_dv {
    background-color: #17479b;
    color: #FFFFFF;
    font-size: 15px;
    font-family: 'SanFranciscoText-Medium';
    padding: 15px 15px;
    margin-bottom: 0
}

.table1_dv tr th {
    background: #F0F4FB;
    color: #17479b;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px
}

.table1_dv tr td {
    font-family: 'SanFranciscoText-Regular';
    color: #333333
}

    .table1_dv tr td:first-child:not(.chuthich) {
        text-align: center;
        color: #17479b;
        font-family: 'SanFranciscoText-Medium'
    }

.table1_dv tr td, .table1_dv tr th {
    border: 1px solid #6F6F6F
}

.title1_table {
    color: #17479b;
    font-size: 14px;
    font-family: 'SanFranciscoText-Medium'
}

.bieugiadien li.uk-active a {
    background: #17479B !important;
    color: #FFFFFF !important
}

.bieugiadien li a {
    font-family: 'SanFranciscoText-Medium';
    color: #17479b !important;
    background: #F0F4FB !important;
    padding: 15px !important
}

.title_article1 {
    font-family: 'SanFranciscoText-Medium';
    color: #17479b
}

.quote1 {
    font-family: 'SanFranciscoText-Regular';
    font-size: 18px;
    color: #333333;
    padding: 0 50px;
    margin: 0 auto;
    max-width: 800px;
    width: 100%;
    position: relative
}

    .quote1:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        background: url("../imgs/antoan&tietkiemdien/quote.png") no-repeat;
        width: 32px;
        height: 21px
    }

.title2 {
    text-transform: uppercase;
    border-bottom: 1px solid #6f6f6f;
    color: #6f6f6f;
    font-family: 'SanFranciscoText-Medium';
    font-size: 18px;
    padding-bottom: 5px
}

.box1_antoan .uk-cover-container a {
    color: #FFFFFF
}

.box1_antoan .title1_at {
    margin: 0;
    margin-top: 10px;
    font-family: 'SanFranciscoText-Medium';
    font-size: 16px
}

    .box1_antoan .title1_at a {
        color: #333333
    }

.article_at figure figcaption small {
    font-style: italic
}

.box_add_lh h3 {
    font-family: 'SanFranciscoDisplay-Bold';
    font-size: 16px
}

.table3 tr:hover {
    background: #F0F4FB !important
}

.card1_tin .title1_tin {
    font-family: 'SanFranciscoText-Medium';
    font-size: 14px;
    margin: 0
}

    .card1_tin .title1_tin a {
        color: #333333
    }

.card1_tin .uk-position-center img {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8)
}

#sync1 .owl-nav button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #fff;
    position: absolute;
    top: calc((100% - 47px)/2);
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff
}

    #sync1 .owl-nav button:focus {
        outline: none
    }

    #sync1 .owl-nav button.owl-prev {
        left: 10px
    }

    #sync1 .owl-nav button.owl-next {
        right: 10px
    }

.tvha_detail h4 {
    font-family: 'SanFranciscoText-Medium';
    font-size: 20px;
    color: #333333
}

.view1 li {
    font-size: 14px
}

.list1 li a {
    color: #17479b
}

.list1 li small {
    color: #333333
}

.author_tacgia span {
    font-family: 'SanFranciscoText-Medium'
}

.danhgiabaiviet .txt1 {
    font-family: 'SanFranciscoText-Medium';
    color: #6f6f6f;
    font-size: 15px
}

.danhgiabaiviet i.fa {
    font-size: 15px
}

    .danhgiabaiviet i.fa.fa-star {
        color: #FFC800
    }

    .danhgiabaiviet i.fa.fa-star-o {
        color: #D2D2D2
    }

.title1_news {
    font-family: 'SanFranciscoDisplay-Bold';
    font-size: 16px
}

.btn1_tag {
    border-radius: 5px;
    background-color: #E4E4E4;
    border-color: #E4E4E4;
    text-transform: inherit;
    color: #6f6f6f;
    line-height: 28px;
    padding: 0 10px
}

    .btn1_tag.uk-active {
        background-color: #B9BBBD;
        border-color: #B9BBBD
    }

.sitemap li {
    position: relative
}

    .sitemap li:before {
        content: '';
        width: 19px;
        height: 100%;
        display: inline-block;
        position: absolute;
        top: 10px;
        left: -4px;
        background: url("../imgs/WebResource.gif") repeat-y
    }

    .sitemap li:after {
        content: '';
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        width: 19px;
        height: 5px;
        position: absolute;
        top: 8px;
        left: 0;
        display: inline-block;
        background: url("../imgs/WebResource.gif") repeat-y
    }

    .sitemap li:last-child:before {
        display: none
    }

    .sitemap li a {
        color: #000 !important;
        padding-left: 20px
    }

.sitemap.uk-nav-parent-icon > .uk-parent.uk-open > a:after {
    content: "\f147"
}

.sitemap.uk-nav-parent-icon > .uk-parent > a {
    position: relative
}

    .sitemap.uk-nav-parent-icon > .uk-parent > a:after {
        background-image: none;
        content: "\f196";
        font-family: FontAwesome;
        position: absolute;
        top: 6px;
        left: 0;
        background-color: #fff;
        z-index: 100
    }

.block-ads {
    width: 100%;
    z-index: 100
}

    .block-ads .uk-alert-close {
        opacity: 1;
        color: #ffffff
    }

    .block-ads img {
        width: 100%
    }

@media (min-width:960px) {
    .hai2:before {
        width: 100% !important;
        height: 1px !important;
        background-color: #000;
        left: 100% !important;
        top: 50%;
        display: block
    }
}

@media (min-width:960px) {
    .hai2:after {
        content: "\f0d9" !important;
        position: absolute;
        top: 50% !important;
        left: 100% !important;
        color: #000;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}

.hihi1 {
    position: relative
}

@media (min-width:960px) {
    .hihi1:before {
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0;
        left: calc(50% - 1px);
        background-color: #000000;
        display: inline-block
    }
}

@media (min-width:960px) {
    .title-rolate {
        white-space: nowrap;
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg)
    }

    .card-rolate {
        min-height: 200px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }
}
.first-video-card div h4 a {
    color: rgb(200, 195, 188);
}
.first-video-card div p a {
    color: rgb(200, 195, 188);
}
.grid-footer {
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto
}

.grid-footer div {
    white-space: nowrap;
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px
}
.grid-footer div:nth-child(1) {
    margin-right:50px;
}

#videoContainer * iframe {
    width: 100%;
}

#videoContainer * iframe + div {
    width: 100%;
    padding-left: 0px;
}


@media(min-width:600px){
    #videoContainer * iframe {
        width: 60%
    }

    #videoContainer * iframe + div {
        width: 35%;
        padding-left:20px;
    }
}

/*# sourceMappingURL=layout.css.map */

table.thanhtich th, table.thanhtich td {
    text-align: right;
    padding: 7px;
    background-color: #fff;
}

table.thanhtich td {
    border: 1px solid #c5e5f8
}

table.thanhtich {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.5em;
}

    table.thanhtich td {
        text-align: left;
    }

        table.thanhtich td.img_table {
            text-align: center;
        }
.logo_h img {
    height: 46px;
}
@font-face{
    font-family:'SanFranciscoText-Light';
    src:url("../fonts/San Francisco/SanFranciscoText-Light.otf") format("truetype");
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:'SanFranciscoText-Medium';
    src:url("../fonts/San Francisco/SanFranciscoText-Medium.otf") format("truetype");
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:'SanFranciscoDisplay-Bold';
    src:url("../fonts/San Francisco/SanFranciscoDisplay-Bold.otf") format("truetype");
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:'SanFranciscoDisplay-Semibold';
    src:url("../fonts/San Francisco/SanFranciscoDisplay-Semibold.otf") format("truetype");
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:'SanFranciscoText-Light';
    src:url("../fonts/San Francisco/SanFranciscoText-Light.otf") format("truetype");
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:'SanFranciscoDisplay-Light';
    src:url("../fonts/San Francisco/SanFranciscoDisplay-Light.otf") format("truetype");
    font-weight:normal;
    font-style:normal;
}

body {
    background-color: #fff;
}

.search_box{
    z-index:99;
}

.btn_slide_h {
    font-family:'SanFranciscoDisplay-Semibold';
}

#menu_link_slide .uk-navbar-nav>li>a {
    font-family:'SanFranciscoText-Light';
}

.box_register .uk-button{
    font-family:'SanFranciscoText-Regular';
}

.wrapperA {
    width: 100%;
    height: 240px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
}

#slide_tm p.title{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: 65px;
}

.block-ads .uk-alert-close {
    opacity: 1;
    color: #000f9f;
}

.banner_des{
	display:block;
}

.banner_mobile{
	display:none;
}

.m_nav_ham {
    background: #666;
}

.uk-position-center{
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
}

.fixed2 .chatwithus_en{
    top: -120px;
}

.box_register .uk-input {
    border-color: rgba(102,102,102,.5);
}

.uk-card-primary{
    background: #17479B;
    color: #fff;
}

.fixed1 .select_lang, .fixed1 .uk-search-icon {
    background: #f8f8f8;
    border: 1px solid #17479b;
    border-radius: 500px;
}

.select_lang a {
    color: #17479B;
}

.fixed2 .txt_hotro {
    white-space: nowrap;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    font-size: 17px;
    color: #17479B;
    top: -170px;
    left: 0;
    right: 0;
    font-family: 'SanFranciscoDisplay-Light';
}

.common .card2 {
    background: #fff;
    color: #666;
    box-shadow: none;
    border-radius: 4px;
    margin-top:40px;
    margin-bottom:40px;
}

.common {
    margin-top: 100px !important;
}

.biendao li a:hover {
    background: #17479B!important;
    color: #FFFFFF!important;
}

.biendao li a {
    font-family: 'SanFranciscoText-Medium';
    color: #17479b!important;
    background: #F0F4FB!important;
    padding: 15px!important;
}

.dauthau li a:hover {
    background: #17479B!important;
    color: #FFFFFF!important;
}

.dauthau li.active a {
    background: #17479B!important;
    color: #FFFFFF!important;
}

.dauthau li a {
    font-family: 'SanFranciscoText-Medium';
    color: #17479b!important;
    background: #F0F4FB!important;
    padding: 15px!important;
}

#header {
    background-color: rgba(255, 255, 255, 0);
}

#header.uk-active {
    background-color: #fff;
}

.common .uk-section-xsmall {
    padding-top: 20px;
    padding-bottom: 0;
}

.common .uk-pagination {
    margin-bottom: 0;
}

.uk-card-primary {
    box-shadow: none;
}

.uk-breadcrumb>:last-child>* {
    color: #000;
}

.box1_bdh small {
    color: #6f6f6f;
    font-size: 12px;
    line-height: 120%;
    height: 48px;
    overflow: hidden;
    display: -webkit-box;
    /*-webkit-line-clamp: 2;
    -webkit-box-orient: vertical;*/
}

#footer {
    margin-top: 100px;
    background-color: #fff;
    border-top: 1px solid #d2d2d2;
}

.dong1_bdh,.dong2_bdh{
    position: relative;
}

.bdh1:after {
    content: '';
    position: absolute;
    background: url(../imgs/muiten1.svg) no-repeat;
    width: 7px;
    height: 61px;
    background-size: 100%;
    display: inline-block;
    bottom: -18%;
    right: 50%;
}

.bdh2:after{
    content: '';
    position: absolute;
    background: url(../imgs/muiten2.svg) no-repeat;
    width: 843px;
    height: 80px;
    background-size: 100%;
    display: inline-block;
    bottom: -20%;
    right: 15%;
}
.box1_bdh img{
    width:100%;
}

.dong1_bdh, .dong2_bdh, .dong3_bdh{
    margin-left:0;
}

.dong3_bdh{
    margin-bottom:0;
}

.uk-nav-parent-icon>.uk-parent>a::after{
    width: 0;
    height: 0;
}

.uk-table-divider>:first-child>tr:not(:first-child), .uk-table-divider>:not(:first-child)>tr, .uk-table-divider>tr:not(:first-child) {
    border-top: 1px solid #6f6f6f;
}

.table_lknb>:first-child>tr:not(:first-child), .table_lknb>:not(:first-child)>tr, .table_lknb>tr:not(:first-child) {
    border-top: 1px solid #e5e5e5;
}

.uk-table-hover tbody tr:hover, .uk-table-hover>tr:hover {
    background: none;
}


.sdtc1>div:not(.uk-grid-margin) .uk-card:before {
    content: '';
    width: 1px;
    height: 30px;
    background-color: #000000;
    position: absolute;
    bottom: 100%;
    left: calc((100% - 2px)/2);
}

.card3.uk-card-primary:before {
    content: '';
    width: 1px;
    height: 30px;
    background-color: #000000;
    position: absolute;
    bottom: 100%;
    left: calc((100% - 0px)/2);
}

.box1_bdh:before {
    content: '';
    width: 1px;
    height: 40px;
    background-color: #000000;
    position: absolute;
    bottom: calc(100% + 10px);
    left: calc((100% - 1px)/2);
    display:none;
}

.box1_bdh:after {
    content: "\f0d7";
    font-family: FontAwesome;
    position: absolute;
    bottom: 99%;
    left: calc((100% - 7px)/2);
    display:none;
}

.table1_tq tr td:last-child {
    white-space: normal;
}

.title_danhgia{
    line-height: 120%;
    font-size: 1.2em;
    color: #6F6F6F;
    padding-right: 10px;
    font-family: 'SanFranciscoText-Medium';
}

.tacgia_detail{
    color: #333;
    font-weight:bold;
    margin:0;
}

.view_right{
    padding-left: 10px;
}

#header .uk-navbar-nav>li>a.active_menu_main:before {
    content: '';
    display: block;
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 25px;
    height: 1px;
    background-color: #17479b;
    -webkit-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    -webkit-transition-property: right;
    -o-transition-property: right;
    transition-property: right;
}

.tags_detail{
    background: #E4E4E4;
    color: #6F6F6F;
    padding: 10px;
    border-radius: 5px;
}

.tags_detail:hover{
   background: #B9BBBD;
}

.theodongsk{
    color: #17479B;
    font-weight: bold;
}

.quote1 {
    font-family: 'SanFranciscoText-Regular';
    font-size: 18px;
    color: #333333;
    padding: 0 50px;
    margin: 0 auto;
    max-width: 100%;
    width: auto;
    position: relative;
}

.title_aside:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #6f6f6f;
    width: calc(100%);
}

.table3 tr:hover {
    background: #F0F4FB!important;
}

.nav-sidebar li.uk-open>a {
    color: #17479b!important;
    font-family: 'SanFranciscoDisplay-Bold';
}

.nav-sidebar li a:hover {
    color: #17479b!important;
    font-family: 'SanFranciscoDisplay-Bold';
}

.uk-text-truncate{
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.sdtc1 .card3.uk-card-default{

}

.sdtc1.c2:after {
    content: '';
    position: absolute;
    width: 1px;
    height: 100px;
    background-color: #000000;
    bottom: 104%;
    left: calc((100% + 1px + 26px)/2);
}

.sdtc1 .card3.uk-card-default h3.uk-card-title{
    /*position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);*/
}

.bieugiadien li a{
    font-size: .825rem !important;
}

.card2 .uk-card-body p{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.content_blue h1.title_slide_h{
    color:#17479b;
}

.fixed2{
    display:none;
}

#slide_tcbc .uk-slidenav-previous{
    right: 45px;
    bottom: 85px;
    background: #F6F6F6;
    padding: 7px;
    color: #17479B;
    visibility: inherit !important;
}

#slide_tcbc .uk-slidenav-next{
    bottom: 85px;
    right:0;
    background: #F6F6F6;
    padding: 7px;
    color: #17479B;
    visibility: inherit !important;
}

#slide_tcbc .card_tcbc{
    background: #F6F6F6;
}

#slide_tm .uk-slidenav-previous{
    right: 45px;
    top: 5px;
    background: #F6F6F6;
    padding: 7px;
    color: #17479B;
    visibility: inherit !important;
}

#slide_tm .uk-slidenav-next{
    top: 5px;
    right:0;
    background: #F6F6F6;
    padding: 7px;
    color: #17479B;
    visibility: inherit !important;
}

.home_tinmoi .title_partner{
    font-family:'SanFranciscoDisplay-Bold';
}

.hangthu2.line1>div:nth-child(n+2):not(.uk-grid-margin):before{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #000000;
    right: calc(50% - 20px);
    top: -50px;
    display:none;
}

.hangthu2 .cotgiua.box1_bdh:before {
    content: '';
    width: 1px;
    height: 60px;
    background-color: #000000;
    position: absolute;
    bottom: calc(100% + 10px);
    left: calc((100% - 1px)/2);
    display:none;
}

.hangthu3:before {
    content: '';
    width: 1px;
    height: 22px;
    background-color: #000000;
    position: absolute;
    bottom: calc(100% + 49px);
    left: calc((100% + 14px)/2);
    display:none;
}

.line1>div:nth-child(n+2):not(.uk-grid-margin):before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #000000;
    right: calc(50% - 8px);
    top: -50px;
    display:none;
}

.line2 .box1_bdh:after {
    content: "\f0d7";
    font-family: FontAwesome;
    position: absolute;
    bottom: 99%;
    left: calc((100% - 8px)/2);
    display:none;
}

#menu_link_slide ul{
    padding-left: 39px;
    background: rgba(23, 71, 155, 0.75);
}

.giadien .uk-accordion-title{
    width: 130px;
    font-size: 17px;
}

.giadien .uk-accordion-title::before {
    content: "";
    width: 1.4em;
    height: 1.4em;
    margin-left: 10px;
    float: right;
    background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%230f6ecd%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    fill:#0f6ecd;
}

.giadien.uk-open>.uk-accordion-title::before {
    background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%230f6ecd%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E);
    transform: rotate(-180deg);
}

.uk-accordion-title, .uk-accordion-title:focus, .uk-accordion-title:hover{
    color: #0f6ecd;
}
.table2_dv tr td, .table2_dv tr th {
    border: 1px solid #6F6F6F;
}
.table2_dv tr th {
    background: #fff;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #333;
}

.table2_dv .giobt{
    background: #F0F4FB;
    text-align: center;
    font-size: 17px;
    font-family: 'SanFranciscoDisplay-Bold';
}

.table2_dv .indam{
    font-family: 'SanFranciscoDisplay-Bold';
}

.table2_dv p{
    margin:0;
}

.title_giadien span{
    text-transform: uppercase;
    font-size: 17px;
    position: relative;
    padding: 5px 0;
}

.title_giadien span:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #0f6ecd;
    -webkit-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    -webkit-transition-property: right;
    -o-transition-property: right;
    transition-property: right;
}

.sdtc_mobile{display:none;}
.sdtc_desktop{display:block;}

#footer{
	background-image: url(../images/icons/bg_footer.svg);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 12%;
    padding-bottom: 91px;
}

.icon_bottom_baiviet span img{
	width:32px;
}

.icon_bottom_baiviet span{
    display: inline-block;
    margin: 0 20px 0 0;
    text-align: center;
}

.audio_top_baiviet audio{
	width: 61vw;
}

.audio_top_baiviet img{
	width: 100vw;
}	  
@media (max-width: 1024px){
    #header .uk-navbar-nav>li>a {
        font-size: 0.57rem;
    }
    .space_left, .space_right{
        display: none!important;
    }
    .fixed1 {
        z-index: 99;
        right: 25px;
        top: 110px;
    }
    .back-to-top.display {
        right: 30px;
    }
    .sdtc_mobile{display:block;}
    .sdtc_desktop{display:none;}
	.wrapperA {
		width: 163px;
		height: 163px;
		overflow: hidden;
		background-size: cover;
		background-position: center center;
	}
	
	.banner_des{
		display:none;
	}

	.banner_mobile{
		display:block;
	}
	
	.banner_mobile ul li img{
		width:100% !important;
	}
	
	.banner_mobile ul {
		min-height: 158px !important;
	}
	#footer{
		background-image: url(../images/icons/bg_footer.svg);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 18%;
		padding-bottom: 184px;
	}
	
}

@media (max-width: 768px){
	.banner_mobile ul {
		min-height: 116px !important;
	}
	
	#footer{
		background-image: url(../images/icons/bg_footer.svg);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 29%;
		padding-bottom: 215px;
	}
}

@media (max-width: 736px){
	.banner_mobile ul {
		min-height: 109px !important;
	}
}

@media (max-width: 500px){
	
	.banner_mobile ul {
		min-height: 74px !important;
	}
    
    .sdtc_mobile{display:block;}
    .sdtc_desktop{display:none;}
    
    .box1_bdh small {
        color: #6f6f6f;
        font-size: 14px;
        line-height: 18px;
        height: 48px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .menu_sidebar{
         display:none;
    }
    .boximg_tq {
        text-align: center;
    }
    .tongquan_box1 .uk-padding-small{
        text-align:center;
    }
    .tongquan_box2 .uk-padding-small{
        text-align:center;
    }
    .title_tq2 {
        font-size: 24px;
    }
    .title_tq1 {
        font-size: 12px;
    }
    #footer {
        margin-top: 0px;
    }
    .fixed1 {
        z-index: 99;
        right: 3px;
        top: 110px;
    }
    .part1_bdh{
        margin-bottom:55px;
    }
    .part2_bdh{
        margin-bottom:55px;
    }
    .box2_part3_bdh::before, .box2_part3_bdh::after{
        content: none;
        width: 0px;
        height: 0px;
    }
    
    .box3_part3_bdh::before, .box3_part3_bdh::after{
        content: none;
        width: 0px;
        height: 0px;
    }
    
    .block2_part3_bdh, .block3_part3_bdh{
        margin-top:0px !important;
    }
    .part3_bdh{
        margin-bottom:120px !important;
    }
    .sdtc1.x1 >div{
        z-index: 999;
    }
    #slide_tcbc {
        min-height:250px;
    }
    
    #slide_tcbc .uk-slidenav-previous{
        right: 45px;
        bottom: 15%;
        background: #F6F6F6;
        padding: 7px;
        color: #17479B;
        visibility: inherit !important;
    }
    
    #slide_tcbc .uk-slidenav-next{
        bottom: 15%;
        right:0;
        background: #F6F6F6;
        padding: 7px;
        color: #17479B;
        visibility: inherit !important;
    }
	.wrapperA {
		width: 100%;
		height: 300px;
		overflow: hidden;
		background-size: cover;
		background-position: center center;
	}
	
	#footer{
		background-image: url(../images/icons/bg_footer.svg);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 55%;
		padding-bottom: 215px;
	}
}

@media (max-width: 415px){
	.banner_mobile ul {
		min-height: 62px !important;
	}
}

@media (min-width: 960px) {
  .title-rolate{
    white-space: nowrap;
    transform: rotate(-90deg);
  }
  .card-rolate{
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }
}

@media (min-width: 1100px){
    .banner_trangtrong{
        width:calc(75% + 20px);
    }
}

@media (min-width: 1024px){
    .box1_bdh .title {
        font-size: 9px;
        margin: 0;
        margin-top: 10px;
        font-family: 'SanFranciscoText-Medium';
        color: #17479b;
    }
    .box1_bdh small {
        color: #6f6f6f;
        font-size: 8px;
        line-height: 120%;
        height: 28px;
        overflow: hidden;
        /*display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;*/
    }
}

@media (min-width: 1144px){
    #header .uk-navbar-nav>li>a {
        font-size: 0.7375rem;
    }
    .sdtc1 .card3 .uk-card-title {
        font-size: 9px;
    }
}

@media (min-width: 1200px){
    .dvtpt_logo{
        padding: 0;
        text-align: left;
    }
    .box1_bdh .title {
        font-size: 12px;
        margin: 0;
        margin-top: 10px;
        font-family: 'SanFranciscoText-Medium';
        color: #17479b;
    }
    .title1_table{
        font-size: 16px;
    }
    .sdtc1 .card3 .uk-card-title {
        font-size: 9px;
    }
}

@media (min-width: 1366px){
    .sdtc1:after {
        /*content: '';
        position: absolute;
        width: 1px;
        height: 205px;
        background-color: #000000;
        bottom: 100%;
        left: calc(50% + 14px);*/
    }
    .box1_bdh small {
        color: #6f6f6f;
        font-size: 11px;
        line-height: 120%;
        height: 53px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .title1_table{
        font-size: 16px;
    }
    #slide_tm .uk-slidenav-previous{
        right: 45px;
        top: 5px;
        background: #F6F6F6;
        padding: 7px;
        color: #17479B;
        visibility: inherit !important;
    }
    
    #slide_tm .uk-slidenav-next{
        top: 5px;
        right:0;
        background: #F6F6F6;
        padding: 7px;
        color: #17479B;
        visibility: inherit !important;
    }
    .sdtc1 .card3 .uk-card-title {
        font-size: 11px;
    }
}
@media (min-width: 1440px){
    .logo_h img {
        height: 46px;
    }
    .section_doitac{
        padding-top: 85px;
        padding-bottom: 55px;
    }
    #slider_brand ul li a .uk-padding{
        padding: 15px 20px;
    }
    .social_f svg {
        width: 17px;
    }
    .footer_tongcty .info_cty{
        margin-bottom: 23px!important;
        line-height: 161%;
    }
    .uk-container-large {
        padding-left: 100px;
        padding-right: 100px;
    }
    #header .uk-navbar-nav>li>a, .uk-navbar-item {
        min-height: 75px;
    }
    .fixed2 .chatwithus_en{
        top: -120px;
    }
    .close_timkiem{
        position: absolute;
        right: 20px;
    }
    #header .uk-navbar-nav>li>a:before {
        content: '';
        display: block;
        position: absolute;
        left: 15px;
        right: calc(102% - 15px);
        bottom: 27px;
        height: 1px;
        background-color: #17479b;
        -webkit-transition: .3s ease-in-out;
        -o-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
        -webkit-transition-property: right;
        -o-transition-property: right;
        transition-property: right;
    }
    .fixed1 {
        top: 130px;
    }
    .search_box{
        position: absolute;
        width: 100%;
        height: 150px;
    }
    .home_doitac {
        padding-left: 150px;
        padding-right: 150px;
    }
    
    .home_doitac .uk-position-small[class*=uk-position-center-left] {
        transform: translateY(-50%) translateY(-15px) translateX(-50px);
    }
    
    .home_doitac .uk-position-small[class*=uk-position-center-right] {
        transform: translateY(-50%) translateY(-15px) translateX(50px);
    }
    .sdtc1:after {
        /*content: '';
        position: absolute;
        width: 1px;
        height: 205px;
        background-color: #000000;
        bottom: 100%;
        left: calc(50% + 14px);*/
    }
	.box1_bdh {
		background-color: #e1e1e1;
		padding: 20px;
		max-width: 150px;
		margin: 0 auto;
		position: relative;
		min-height:289px !important;
	}
    .box1_bdh .title {
        font-size: 11px;
        margin: 0;
        margin-top: 10px;
        font-family: 'SanFranciscoText-Medium';
        color: #17479b;
    }
    .box1_bdh small {
        color: #6f6f6f;
        font-size: 11px;
        line-height: 120%;
        height: 48px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .sdtc1 .card3 .uk-card-title {
        font-size: 11px;
    }
    .title1_table{
        font-size: 16px;
    }
    
    #slide_tcbc .uk-slidenav-previous{
        right: 45px;
        bottom: 30px;
        background: #F6F6F6;
        padding: 7px;
        color: #17479B;
        visibility: inherit !important;
    }
    
    #slide_tcbc .uk-slidenav-next{
        bottom: 30px;
        right:0;
        background: #F6F6F6;
        padding: 7px;
        color: #17479B;
        visibility: inherit !important;
    }
    #slide_tm .uk-slidenav-previous{
        right: 45px;
        top: 5px;
        background: #F6F6F6;
        padding: 7px;
        color: #17479B;
        visibility: inherit !important;
    }
    
    #slide_tm .uk-slidenav-next{
        top: 5px;
        right:0;
        background: #F6F6F6;
        padding: 7px;
        color: #17479B;
        visibility: inherit !important;
    }
}

@media (min-width: 1600px){
    .title1_table{
        font-size: 17px;
    }
    
    #slide_tcbc .uk-slidenav-previous{
        right: 45px;
        bottom: 45px;
        background: #F6F6F6;
        padding: 7px;
        color: #17479B;
        visibility: inherit !important;
    }
    
    #slide_tcbc .uk-slidenav-next{
        bottom: 45px;
        right:0;
        background: #F6F6F6;
        padding: 7px;
        color: #17479B;
        visibility: inherit !important;
    }
    #slide_tm .uk-slidenav-previous{
        right: 45px;
        top: 5px;
        background: #F6F6F6;
        padding: 7px;
        color: #17479B;
        visibility: inherit !important;
    }
    
    #slide_tm .uk-slidenav-next{
        top: 5px;
        right:0;
        background: #F6F6F6;
        padding: 7px;
        color: #17479B;
        visibility: inherit !important;
    }
}

@media (min-width: 1920px){
    body{
        font-size: 18px;
        font-family: 'SanFranciscoText-Regular';
        color: #333333;
        background-color: #fff;
    }
    #header .uk-navbar-nav>li>a, .uk-navbar-item {
        min-height: 75px;
    }
    #header .uk-navbar-nav>li>a {
        font-size: 0.95rem;
    }
    .logo_h img {
        height: 60px;
    }
    .logo_f img {
        height: 66px;
    }
    .uk-icon-button {
        width: 39px;
        height: 39px;
    }
    .select_lang {
        width: 39px;
        height: 39px;
    }
    .select_lang a {
        line-height: 39px;
    }
    .select_lang .uk-flex a:after {
        bottom: -2px;
    }
    .select_lang:hover {
        height: 114px;
    }
    .fixed1 {
        top: 130px;
        right: 30px;
    }
    .title_slide_h {
        font-size: 4.5rem;
    }
    .btn_slide_h {
        font-size: 1.0625rem;
        line-height: 58px;
        width: 148px;
    }
    #menu_link_slide .uk-navbar-nav>li>a:hover:before {
        height: 3px;
    }
    #menu_link_slide .uk-navbar-nav>li {
        margin-right: 39px;
    }
    .section_doitac{
        padding-top: 85px;
        padding-bottom: 55px;
    }
    #slider_brand ul li a .uk-padding{
        padding: 15px 20px;
    }
    .home_doitac {
        margin-bottom:62px;
        padding-left: 150px;
        padding-right: 150px;
    }
    
    .home_doitac .uk-position-small[class*=uk-position-center-left] {
        transform: translateY(-50%) translateY(-15px) translateX(-50px);
    }
    
    .home_doitac .uk-position-small[class*=uk-position-center-right] {
        transform: translateY(-50%) translateY(-15px) translateX(50px);
    }
    
    
    .box_register .uk-input, .uk-select:not([multiple]):not([size]) {
        height: 50px;
    }
    .box_register .uk-button{
        line-height: 48px;
        padding: 0 44px;
        border-radius: 0 2px 2px 0;
        text-transform: none;
        font-size: 1.1rem;
    }
    .home_danky {
        padding-left: 70px;
    }
    .footer_tongcty{
        padding-left: 70px;
    }
    .hotline {
        flex: 0.7;
        min-width: 1px;
        padding-left: 70px;
    }
    .boxchat_img{
        width: 45px;
        height: 45px;
    }
    .suntory-alo-ph-circle-fill{
        animation: 2.3s ease-in-out 0s normal none infinite running suntory-alo-circle-fill-anim;
        border: 2px solid transparent;
        border-radius: 100%;
        height: 69px;
        left: -13px;
        position: absolute;
        top: -13px;
        transform-origin: 50% 50% 0;
        transition: all 0.5s ease 0s;
        width: 69px;
    }
    .fixed1, .fixed2, .width_fix {
        width: 45px;
    }
    .fixed2 {
        right: 27px;
        bottom: 60px;
    }
    .back-to-top.display {
        right: 30px;
        bottom: 0px;
    }
    #header .uk-navbar-nav>li>a:before {
        content: '';
        display: block;
        position: absolute;
        left: 15px;
        right: calc(102% - 15px);
        bottom: 25px;
        height: 1px;
        background-color: #17479b;
        -webkit-transition: .3s ease-in-out;
        -o-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
        -webkit-transition-property: right;
        -o-transition-property: right;
        transition-property: right;
    }
    .social_f svg {
        width: 21px;
    }
    .footer_tongcty .info_cty{
        margin-bottom: 23px!important;
        line-height: 150%;
    }
    .close_timkiem{
        position: absolute;
        right: 30px;
    }
    .fixed2 .chatwithus_en{
        top: -120px;
    }
    .social_f .uk-first-column{
        padding-left: 10px;
    }
    .title_fix{
        font-size: 19px;
    }
    .title_f{
        font-size: 19px;
    }
    .search_box{
        position: absolute;
        width: 100%;
        height: 150px;
    }
    .title_aside {
        color: #17479b;
        font-size: 24px;
        font-family: 'SanFranciscoText-Medium';
        position: relative;
        padding-bottom: 6px;
    }
    .uk-breadcrumb li a, .uk-breadcrumb li span {
        color: #333333;
        font-size: 18px;
    }
    .title_common {
        font-size: 32px;
        margin-top: 0;
        color: #17479b;
        font-family: 'SanFranciscoText-Medium';
    }
    .nav-sidebar li a {
        text-transform: uppercase;
        color: #333333!important;
        font-family: 'SanFranciscoText-Regular';
        font-size: 18px;
    }
    .card2 .uk-card-body p {
        font-family: 'SanFranciscoText-Regular';
        font-size: 18px;
    }
    .card2 .uk-card-body .uk-link {
        color: #17479b;
        font-size: 18px;
    }
    .uk-card-body {
        /*padding: 40px 100px;*/
    }
    .title_c1 {
        font-size: 24px;
        color: #17479b;
        font-family: 'SanFranciscoText-Medium';
    }
    .title_tq1 {
        color: #17479b;
        font-family: 'SanFranciscoText-Medium';
        margin: 0;
        font-size: 24px;
    }
    .title_tq2 {
        font-family: 'SanFranciscoDisplay-Bold';
        color: #17479b;
        font-size: 64px;
        margin: 0;
    }
    .uk-h6, h6 {
        font-size: 18px;
        line-height: 28px;
        padding: 0 30px;
    }
    .title_thanhtic {
        font-family: 'SanFranciscoText-Regular';
        color: #000;
        margin: 0;
        font-size: 24px;
    }
    .common .uk-width-expand\@m {
        padding-left: 140px;
    }
    .dong1_bdh,.dong2_bdh{
        margin-bottom: 135px;
    }
    .box1_bdh .title {
        font-size: 15px;
        margin: 0;
        margin-top: 10px;
        font-family: 'SanFranciscoText-Medium';
        color: #17479b;
    }
    .box1_bdh {
        background-color: #e1e1e1;
        padding: 20px;
        width: calc(298px + 0px);
    }
    .bdh_pad1,.bdh_pad2{
        padding-left: 0px;
    }
    .bdh_pad3{
        padding-left: 0px;
    }
    .bdh_pad4,.bdh_pad5{
        padding-left: 68px;
    }
    .sdtc1>div:not(.uk-grid-margin) .uk-card:after {
        content: "\f0d7";
        font-family: FontAwesome;
        position: absolute;
        top: -15px;
        left: calc((100% - 9px)/2);
        color: #000;
        font-size: 13px;
    }
    .tongquan_box1, .tongquan_box2{
        margin-top:100px !important;
        margin-bottom:100px !important;
    }
    .title_article1 {
        font-family: 'SanFranciscoText-Medium';
        color: #17479b;
        font-size: 24px;
    }
    .title1_news{
        padding:0;
    }
    .title1_table {
        font-size: 18px;
    }
    #slide_tcbc .uk-slidenav-previous{
        right: 45px;
        bottom: 85px;
        background: #F6F6F6;
        padding: 7px;
        color: #17479B;
        visibility: inherit !important;
    }
    
    #slide_tcbc .uk-slidenav-next{
        bottom: 85px;
        right:0;
        background: #F6F6F6;
        padding: 7px;
        color: #17479B;
        visibility: inherit !important;
    }
    
    #slide_tm .uk-slidenav-previous{
        right: 45px;
        top: 5px;
        background: #F6F6F6;
        padding: 7px;
        color: #17479B;
        visibility: inherit !important;
    }
    
    #slide_tm .uk-slidenav-next{
        top: 5px;
        right:0;
        background: #F6F6F6;
        padding: 7px;
        color: #17479B;
        visibility: inherit !important;
    }

    
}

/*Cap nhat giao dien nam 7/2025 - sapnhapdonvi*/

/*# sourceMappingURL=layout.css.map */
:root {
    --primary-color: #17479b;
    --accent-color: white;
    --danger-color: white;
    --text-dark: #222;
    --text-medium: #555;
    --text-light: #666;
    --bg-gradient: linear-gradient(120deg, #e0eafc, #cfdef3 100%);
    --shadow-light: 0 8px 32px rgba(44, 62, 80, 0.12);
    --shadow-medium: 4px 4px 14px 0px #00000066;
    --border-radius: 18px;
    --transition: all 0.2s ease;
}

ol {
    padding-left: 20px;
}

.map-container {
    margin-block: 50px;
    position: relative;
}

#svgMap {
    width: min(90vw, 1200px);
    height: auto;
    margin: clamp(20px, 4vw, 40px);
    max-width: 100%;
}

/* SVG Path Styles */

svg path {
    transition: var(--transition);
    stroke-width: 1.5;
    outline: none;
    cursor: pointer;
}

    /* svg path:hover,
  svg path:focus {
    stroke: var(--accent-color);
    fill-opacity: 0.9;
  } */

    svg path.interactive {
        fill-opacity: 0.1;
    }

        svg path.interactive:hover,
        svg path.interactive:focus {
            fill-opacity: 1;
            stroke: var(--accent-color);
        }

    /* Subordinate elements highlighting */
    svg path.subordinate {
        transition: var(--transition);
    }

    svg path[class*="sub-triangle"].highlight {
        fill: var(--danger-color) !important;
    }

    svg path[class*="sub-line"].highlight {
        stroke: var(--danger-color) !important;
    }

svg text {
    text-transform: uppercase;
}

    svg text.highlight {
        fill: var(--danger-color) !important;
        font-weight: bold;
        filter: drop-shadow(0 0 2px var(--danger-color));
        transition: fill 0.2s, filter 0.2s;
    }

svg path.subordinate.highlight,
svg path[class*="sub-line"].highlight {
    stroke: #fff !important;
    fill-opacity: 1 !important;
}

.display-desktop {
    display: block;
}

.display-mobile,
#lamdong-label-mobile {
    display: none;
}

/* Info Box Styles */
#info-box {
    position: absolute;
    background: #fff;
    border: 1.5px solid var(--primary-color);
    border-radius: 12px;
    padding: 10px;
    display: none;
    z-index: 100;
    box-shadow: var(--shadow-medium);
    min-width: 320px;
    max-width: min(500px, 90vw);
    font-size: 1rem;
    color: var(--text-dark);
    transition: var(--transition);
    pointer-events: auto;
    opacity: 0;
    backdrop-filter: blur(10px);
    transform: translateY(20px) scale(0.95);
}

    #info-box.show-animation {
        animation: fadeIn 0.3s forwards;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Close Button */
#info-box .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #c4c4c4;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 1.2rem;
    color: white;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

    #info-box .close-btn:hover {
        background: #b0b0b0;
        color: #000;
        transform: scale(1.1);
    }

/* Info Content Layout */
.info-content {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 10px;
    align-items: start;
}

.info-image {
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    aspect-ratio: 1;
    height: 100%;
    width: -webkit-fill-available;
}

    .info-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transition);
    }

        .info-image img:hover {
            transform: scale(1.05);
        }

.info-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    height: -webkit-fill-available;
    margin-top: 15px;
}

    .info-details h3 {
        margin: 0;
        color: var(--primary-color);
        font-size: 1.2rem;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 1.3;
    }

    .info-details .unit {
        font-weight: 600;
        color: var(--danger-color);
        font-size: 0.9rem;
        text-transform: uppercase;
    }

    .info-details .director {
        font-weight: 600;
        color: #333333;
        font-size: 0.9rem;
    }

    .info-details .manager,
    .info-details .website,
    .info-details .email,
    .info-details .address,
    .info-details .phone {
        line-height: 1.4;
        color: var(--text-medium);
        font-size: 0.85rem;
    }

    .info-details .website {
        width: max-content;
    }

.directions-btn {
    background: linear-gradient(135deg, var(--primary-color), #2c5aa0);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(23, 71, 155, 0.3);
    margin-top: 12px;
    width: max-content;
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .directions-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(23, 71, 155, 0.4);
    }

    .directions-btn:active {
        transform: translateY(0);
    }

/* Arrow styles */
#info-box::before,
#info-box::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
}

#info-box.arrow-down::before {
    border-top-color: var(--primary-color);
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
}

#info-box.arrow-down::after {
    border-top-color: #fff;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
}

#info-box.arrow-up::before {
    border-bottom-color: var(--primary-color);
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
}

#info-box.arrow-up::after {
    border-bottom-color: #fff;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
}

#info-box.arrow-none::before,
#info-box.arrow-none::after {
    display: none;
}

.uk-text-center img {
    width: 120px;
    height: 120px;
}

/* Section: Menu link giữa trang */
.menu-link-cards {
    margin-top: 0;
    margin-bottom: 0;
}

.menu-link-card {
    display: block;
    position: relative;
    height: 160px;
    border-radius: 20px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

    .menu-link-card:hover {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    }

.menu-link-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

.menu-link-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( 0deg, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.05) 100% );
    border-radius: 0 0 20px 20px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s;
}

.menu-link-card:hover .menu-link-overlay {
    opacity: 0;
}

.menu-link-title {
    width: fit-content;
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 18px;
    z-index: 1;
    color: #fff;
    font-size: 20px;
    font-weight: normal;
    padding: 0;
    display: inline-block;
    background: none;
    transition: font-weight 0.2s, color 0.2s, background 0.2s, border-radius 0.2s, padding 0.2s;
}

.menu-link-card:hover .menu-link-title {
    font-weight: bold;
    color: var(--primary-color);
    background: #fff;
    border-radius: 6px;
    padding: 5px 15px;
}

.menu-link-icon {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-link-arrow {
    display: inline-block;
    transition: transform 0.3s;
    position: relative;
}

.menu-link-card:hover .menu-link-arrow {
    transform: rotate(45deg);
}

.menu-link-arrow-bg {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38px;
    height: 38px;
    background: var(--primary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 1;
    transition: opacity 0.3s;
    pointer-events: none;
    display: none;
}

.menu-link-card:hover .menu-link-arrow-bg {
    display: block;
}

.menu-link-arrow svg {
    position: relative;
    z-index: 1;
}

.menu-link-card {
    position: relative;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

/* Section: Tin Mới & Chuyên Đề */
.menu-links-section,
.quick-links-section {
    padding-block: 30px !important;
    background-color: #f5f5f5;
}

.news-latest-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.news-latest-left {
    display: flex;
    align-items: end;
    gap: 5px;
}

.news-title-main {
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.news-title-badge {
    background: #ff2d2d;
    color: #fff;
    font-size: 0.85rem;
    font-weight: bold;
    border-radius: 999px;
    padding: 2px 12px;
    margin-left: 8px;
    line-height: 1.5;
}

.news-latest-list {
    gap: 0 20px;
}

.news-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px 0px #00000014;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    transition: box-shadow 0.2s;
    height: 100%;
}

    .news-card:hover {
        cursor: pointer;
        box-shadow: 0px 0px 6px 0px #00000026;
    }

.news-card-img-wrap {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.news-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-card-content {
    padding: 18px 20px 16px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.news-card-type {
    color: var(--primary-color);
    font-size: 0.95rem;
    font-weight: bold;
    margin-bottom: 6px;
}

.news-card-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 6px;
    color: #222;
}

.news-card-date {
    font-size: 0.92rem;
    color: #888;
    margin-bottom: 6px;
}

.news-card-desc {
    /* 1. Tạo giới hạn số dòng */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Số dòng muốn hiển thị (ví dụ 3 dòng) */
    -webkit-box-orient: vertical;
    /* 2. Ẩn phần thừa */
    overflow: hidden;
    text-overflow: ellipsis; /* Thêm dấu ... ở cuối */
    /* 3. Tùy chỉnh thêm (nếu cần) */
    line-height: 1.5; /* Chiều cao dòng */
    max-height: 4.5em; /* line-height * số dòng (1.5 * 3 = 4.5) để đảm bảo cắt đúng */
    margin-top: 5px;
    color: #444;
    font-size: 0.98rem;
    text-align: justify; /* Căn đều 2 bên nhìn cho đẹp */
}

.topic-slider {
    flex-grow: 1;
}

.topic-box {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(24, 86, 201, 0.08);
    padding: 20px 18px 18px 18px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    border: 1px solid var(--primary-color);
}

.topic-box-header {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 18px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--primary-color);
}

.topic-box-nav {
    display: flex;
    gap: 10px;
}

.topic-nav-btn {
    font-size: 20px;
    background: #f2f6ff;
    border: none;
    border-radius: 15px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    outline: none;
    margin-left: 2px;
    box-shadow: 0 2px 8px rgba(24, 86, 201, 0.1), 0 1.5px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e5e5;
}

.topic-nav-btn i {
    color: var(--primary-color);
}

.topic-nav-btn i:first-child {
    margin-left: 3px;
}

.topic-nav-btn i:last-child {
    margin-left: 3px;
}

.topic-nav-btn.active,
.topic-nav-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

.topic-nav-btn:hover i {
    color: white;
}

.topic-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
}

.topic-item {
    background: #f6f8fa;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s ease-in-out;
    box-shadow: 0 2px 8px 0px #00000014;
}

    .topic-item:hover {
        box-shadow: 0px 0px 6px 0px #00000026;
        background-color: var(--primary-color);
        color: white;
    }

.topic-box-dots {
    margin-top: 16px;
    text-align: center;
}

.topic-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 4px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: background 0.2s;
}

    .topic-dot-active,
    .topic-dot.active {
        background: var(--primary-color);
    }

.topic-slide {
    display: none;
}

    .topic-slide.active {
        display: block;
    }

#topic-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Quick Links Section Styles */
.news-topic-section {
    margin-block: 60px;
    background-color: transparent;
}

.quick-links-title {
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 30px !important;
}

.quick-link-card {
    display: block;
    width: 100%;
    /* Bỏ chiều cao cố định, để nó tự co giãn theo ảnh */
    height: auto;
    /* Bỏ màu nền và shadow ở khung ngoài để tránh lộ viền */
    background: transparent;
    box-shadow: none;
    border-radius: 10px;
    /* Quan trọng: set font-size 0 để loại bỏ khoảng trắng 3px dưới chân ảnh mặc định của trình duyệt */
    font-size: 0;
    transition: transform 0.3s ease;
}

/* 2. ẢNH BÊN TRONG */
.quick-link-img {
    width: 100%;
    height: auto; /* Để ảnh tự quyết định chiều cao */
    display: block;
    border-radius: 10px; /* Bo góc trực tiếp vào ảnh */
    /* Đổ bóng trực tiếp cho ảnh */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.uk-slider-items.uk-grid {
    height: 100%;
}

@media (max-width: 640px) {
    .quick-link-card {
        height: 60px;
    }
}

.quick-link-card--white {
    background: #fff;
    color: #b22222;
    border: 1px solid #eee;
    flex-direction: row;
    gap: 10px;
}

.quick-link-card--red {
    background: #d32f2f;
    color: #fff;
}

.quick-link-card--green {
    background: #207244;
    color: #fff;
}

.quick-link-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px) scale(1.02);
}

.quick-link-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.quick-link-sub {
    font-size: 13px;
    color: #888;
    font-weight: normal;
}

/* News Links Section */
.news-links-section .uk-active {
    display: flex;
    flex-direction: column;
    position: relative;
}

    .news-links-section .uk-active::before {
        content: "|";
        display: block;
        position: absolute;
        right: -11px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        color: white;
    }

.news-links-section {
    margin-top: 100px;
}

.news-cat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    transition: background 0.18s, color 0.18s;
    text-align: center;
    padding-inline: 10px;
    border-radius: 6px;
}

    .news-cat-item:hover {
        background: #fff;
        color: var(--primary-color);
        cursor: pointer;
        font-weight: bold;
        border-radius: 6px;
    }

.news-cat-slider-box {
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 14px;
}

#news-cat-slider {
    height: 45px;
    border-radius: 6px;
}

    #news-cat-slider li {
        width: max-content;
    }

.news-cat-link {
    height: 100%;
}

    .news-cat-link:hover {
        text-decoration: none;
    }

/* Đoạn bị trùng */
.info-cards-row .info-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    background: #fff;
    transition: box-shadow 0.2s;
    height: 100%;
    text-decoration: none;
    position: relative;
}

.info-card:hover {
    box-shadow: 0 4px 24px rgba(23, 78, 166, 0.15);
}

.info-card-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}

.info-card-content {
    background: var(--primary-color);
    color: #fff;
    padding: 20px 20px 16px 20px;
    min-height: 90px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    flex-grow: 1;
}

    .info-card-content > div {
        flex: 1 1 auto;
        min-width: 0;
    }

.info-card-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0;
}

.info-card-desc {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 0;
}

.info-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
    color: #fff;
    opacity: 0.8;
    z-index: 2;
    transition: opacity 0.2s, background 0.3s;
    align-self: flex-start;
    position: static;
}

.info-card-arrow-bg {
    border-radius: 50%;
    background: transparent;
    transition: background 0.3s;
    z-index: 1;
}

.info-card-arrow-svg {
    position: relative;
    z-index: 2;
    transition: transform 0.3s;
}

.info-card:hover .info-card-arrow {
    opacity: 1;
}

.info-card:hover .info-card-arrow-bg {
    background: var(--primary-color);
}

.info-card:hover .info-card-arrow-svg {
    transform: rotate(45deg);
}

.info-detail {
    display: flex;
    justify-content: space-between;
}

.info-card-title,
.info-card-desc {
    margin-bottom: 0;
}

.info-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    z-index: 2;
    transition: background 0.3s;
    position: static;
    align-self: flex-start;
}

.info-card-arrow-bg {
    border-radius: 50%;
    background: transparent;
    transition: background 0.3s;
    z-index: 1;
}

/* Đoạn cuối */
/* --- Custom News Cards Section Responsive & Modern --- */
#news-slider {
    padding: 10px;
    margin: -10px;
}

.custom-news-cards-section {
    margin-top: 40px;
    margin-bottom: 40px;
}

.custom-news-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    min-height: 260px;
    transition: box-shadow 0.2s, transform 0.2s;
    align-items: stretch;
}

    .custom-news-card:hover {
        /*cursor: pointer;*/
        box-shadow: 0 8px 32px rgba(25, 118, 210, 0.18);
    }

.custom-news-card-img-wrap {
    flex: 1 1 60%;
    min-width: 0;
    max-width: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 0;
}

.custom-news-card-box {
    padding: 8px;
    border: 1px solid var(--primary-color);
    border-radius: 14px;
    margin-top: 20px;
    margin-bottom: 60px;
}

    .flex-40,
    .custom-news-card-box .custom-news-card-img-wrap {
        flex: 1 1 40%;
    }

    .custom-news-card-box .custom-news-card-content {
        background-color: transparent;
    }

.custom-news-card-img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    background: #eaeaea;
    transition: box-shadow 0.2s;
}

.custom-news-card:hover .custom-news-card-img {
    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.13);
}

.custom-news-card-content {
    flex: 1 1 50%;
    min-width: 0;
    max-width: 100%;
    width: 50%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.custom-news-card-type {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-news-card-title {
    font-size: 21px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #1a237e;
    line-height: 1.3;
}

.custom-news-card-date {
    font-size: 14px;
    color: #888;
    margin-bottom: 10px;
}

.custom-news-card-desc {
    font-size: 16px;
    color: #444;
    margin-bottom: 18px;
    line-height: 1.6;
}

.news-card-link:hover {
    text-decoration: none;
}

.custom-news-card-link {
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: none;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s;
    letter-spacing: 0.2px;
}

    .custom-news-card-link:hover {
        color: var(--primary-color);
        text-decoration: underline;
    }

.title-border-top {
    padding-top: 24px;
    border-top: 1px solid #e4e4e4;
}

.events-section {
    margin-bottom: 60px;
}
/* Khoảng cách giữa các card */
.custom-news-cards-row > div {
    margin-bottom: 24px;
}

.cancel-m {
    margin: 0;
}

.cancel-p {
    padding: 0 !important;
}

.custom-news-card-events .custom-news-card {
    margin-top: 40px;
}

    .custom-news-card-events .custom-news-card:last-child {
        margin-bottom: 40px;
    }
/* Tablet */
@media (max-width: 1199px) {
    .custom-news-cards-section {
        margin-top: 32px;
        margin-bottom: 32px;
    }

    .custom-news-card-content {
        padding: 22px 18px 22px 16px;
    }

    .custom-news-card-title {
        font-size: 18px;
    }

    .custom-news-card-desc {
        font-size: 15px;
    }
}
/* Mobile */
@media (max-width: 767px) {
    .custom-news-cards-section {
        margin-top: 18px;
        margin-bottom: 18px;
    }

    .custom-news-card {
        flex-direction: column;
        min-height: unset;
        border-radius: 14px;
    }

    .custom-news-card-img-wrap,
    .custom-news-card-content {
        width: auto;
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
        padding: 0;
    }

    .custom-news-card-img-wrap {
        background: #f5f7fa;
        justify-content: center;
    }

    .custom-news-card-img {
        width: 100%;
        max-width: 100%;
        height: 160px;
        max-height: 180px;
        border-radius: 10px;
    }

    .custom-news-card-content {
        padding: 18px 14px 18px 14px;
        align-items: flex-start;
    }

    .custom-news-card-title {
        font-size: 16px;
    }

    .custom-news-card-desc {
        font-size: 14px;
    }

    .custom-news-card-link {
        font-size: 15px;
    }
}

@media (min-width: 960px) {
    .custom-news-cards-row > .uk-grid-margin {
        margin-top: 0 !important;
    }

    .custom-news-cards-row > div {
        margin-bottom: 0;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .map-container {
        margin: 0;
    }

    #svgMap {
        width: 95vw;
        margin: 20px;
    }

    svg text {
        font-size: 30px;
        font-weight: bold;
    }

    #lamdong-label {
        display: none;
    }

    .display-mobile,
    #lamdong-label-mobile {
        display: block;
    }

    .display-desktop {
        display: none;
    }

    #info-box {
        min-width: 280px;
        max-width: 95vw;
        font-size: 0.9rem;
        padding: 12px;
    }

    .info-content {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .info-image {
        width: 60px;
        height: 60px;
        align-self: center;
        margin: 0 auto;
    }

    .info-details {
        height: auto;
    }

        .info-details h3 {
            font-size: 1rem;
            text-align: center;
        }

        .info-details .unit,
        .info-details .director,
        .info-details .address,
        .info-details .phone {
            font-size: 0.8rem;
            text-align: center;
        }

    .directions-btn {
        align-self: center;
        font-size: 0.8rem;
        padding: 8px 12px;
    }

    .bdh-item {
        display: flex;
        flex-wrap: wrap; /* Cho phép xuống dòng */
        justify-content: center; /* Căn giữa các dòng */
        margin: 0 auto;
    }

        .bdh-item .uk-width-auto {
            width: calc(50%);
        }

    .box1_bdh small {
        height: 53px !important;
    }

    .common .uk-section-xsmall {
        padding-block: 20px !important;
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 1.5rem;
        margin: 20px 0;
    }

    .map-container {
        margin: 0;
        border-radius: 12px;
    }

    #svgMap {
        width: 98vw;
        margin: 12px;
    }

    #info-box {
        min-width: 260px;
        padding: 10px;
    }
}

/* Loading state */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Focus styles for accessibility */
svg path:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.directions-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.photo-library-section,
.video-library-section {
    margin-block: 100px;
}

.video-card-link:hover {
    text-decoration: none;
}

    .video-card-link:hover .video-card-caption {
        color: var(--primary-color);
        transition: 0.1s ease-in-out;
        font-weight: bold;
        text-decoration: none;
    }

.video-library-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    text-transform: uppercase;
}

.video-library-more {
    color: var(--primary-color);
    font-size: 0.95rem;
    text-decoration: none;
    transition: 0.1s ease-in-out;
}

    .video-library-more:hover {
        font-weight: bold;
    }

.video-card-box {
    display: flex;
    flex-direction: column;
}

.video-card {
    border-radius: 8px;
    overflow: hidden;
    flex-grow: 1;
}

    .video-card img {
        width: 100%;
        object-fit: cover;
        display: block;
    }

.video-card-large img {
    height: 100%;
    height: 700px;
}

.video-card:not(.video-card-large) img {
    height: 100%;
}

.video-card .video-play-btn,
.video-card-large .video-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(23, 71, 155, 0.7);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
}

.video-card-large .video-play-btn {
    width: 80px;
    height: 80px;
}

.video-card .video-play-btn {
    width: 80px;
    height: 80px;
}

.video-card-caption {
    font-size: 0.95rem;
    color: #666;
    margin-top: 8px;
}

.video-card-large + .video-card-caption {
    font-size: 1rem;
}

/* photo-slider-section */
.photo-slider-section {
    margin-bottom: 60px;
}

/* Subheader (Topbar) */
.subheader-bar {
    background: #d2d2d2;
    font-size: 14px;
    color: #6f6f6f;
    padding-block: 5px;
}

.subheader-links {
    justify-content: flex-end;
    gap: 18px;
    height: 36px;
}

.subheader-link {
    color: #6f6f6f;
    text-decoration: none;
    margin-left: 18px;
    transition: color 0.15s;
}

    .subheader-link:hover {
        color: var(--primary-color);
        text-decoration: underline;
        transition: 0.1s ease-in-out;
        font-weight: bold;
    }

.subheader-sep {
    margin-left: 18px;
    color: #6f6f6f;
}

.subheader-support {
    margin-left: 18px;
    color: #6f6f6f;
    font-weight: 400;
}

/* Responsive subheader-bar */
@media (min-width: 1200px) {
    /* Style riêng cho PC lớn */
}

@media (max-width: 1024px) {
    .subheader-bar {
        font-size: 13px;
        padding-block: 3px;
    }

    .subheader-links {
        gap: 10px;
    }

    .subheader-link,
    .subheader-sep,
    .subheader-support {
        margin-left: 10px;
    }
}

@media (max-width: 768px) {
    .subheader-bar {
        font-size: 12px;
        padding-block: 2px;
    }

    .subheader-links {
        justify-content: center;
        gap: 8px;
        text-align: center;
    }

    .subheader-link,
    .subheader-sep,
    .subheader-support {
        margin-left: 6px;
        margin-right: 0;
        white-space: nowrap;
    }

    .subheader-support {
        display: block;
        width: 100%;
        margin: 4px 0 0 0;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .subheader-bar {
        font-size: 11px;
        padding-block: 5px;
    }

    .subheader-links {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 0;
        column-gap: 10px;
    }

    .subheader-link,
    .subheader-sep {
        margin-left: 0;
        margin-right: 0;
        display: block;
        text-align: center;
    }

    .subheader-support {
        font-size: 10px;
        margin-top: 2px;
    }
}

/* Fixed Social/Contact Box */
.fixed-social-box {
    position: fixed;
    top: 50%;
    left: 15px;
    transform: translateY(-50%) translateX(-80px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: slideInLeft 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

@keyframes slideInLeft {
    from {
        transform: translateY(-50%) translateX(-80px);
        opacity: 0;
    }

    to {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
}

.fixed-social-item {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.18s;
    user-select: none;
}

    .fixed-social-item:hover {
        transform: scale(1.08) translateX(8px);
        z-index: 2;
    }

    .fixed-social-item img {
        object-fit: cover;
    }
/* #header .uk-navbar-nav.uk-visible\@m > li:hover > a:before,
#header .uk-navbar-nav > li > a.active_menu_main:before {
  display: none;
}
#header .uk-navbar-nav > li > a:before {
  display: none !important;
}
#header .uk-navbar-nav > li:hover > a,
#header .uk-navbar-nav > li.uk-open > a,
#header .uk-navbar-nav > li > a:hover,
#header .uk-navbar-nav > li > a.active_menu_main {
  background: var(--primary-color) !important;
  color: #fff !important;
  transition: background 0.15s, color 0.15s;
}

#header .uk-navbar-nav > li:last-child > a {
  padding-right: 15px !important;
}
#header .uk-navbar-dropdown:not(.uk-dropdown-bottom-right) {
  left: 0px !important;
}
.uk-navbar-nav li:hover {
  background-color: var(--primary-color);
  transition: 0.2s ease-in-out;
}
.uk-navbar-nav li:hover a {
  color: white;
} */

.fixed2 .txt_hotro {
    font-weight: 600;
}

.footer-absolute-img {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 200px; /* hoặc tuỳ chỉnh kích thước phù hợp */
    height: auto;
    pointer-events: none; /* không ảnh hưởng tới click các thành phần khác */
}

#footer {
    position: relative;
}
/* #header .uk-navbar-nav > li:nth-child(8) .uk-navbar-dropdown {
  right: 0;
  left: auto !important;
} */
.appsocial {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    width: max-content;
}

    .appsocial i {
        font-size: 25px;
        transition: transform 0.25s cubic-bezier(0.4, 2, 0.6, 1), box-shadow 0.25s cubic-bezier(0.4, 2, 0.6, 1), color 0.25s cubic-bezier(0.4, 2, 0.6, 1), background 0.25s cubic-bezier(0.4, 2, 0.6, 1);
        border-radius: 50%;
        padding: 5px;
        background: transparent;
        box-shadow: none;
        color: #18499a;
    }

        .appsocial a:hover i,
        .appsocial i:hover {
            transform: scale(1.25) rotate(-8deg);
            box-shadow: 0 4px 24px 0 rgba(24, 73, 154, 0.18), 0 1.5px 8px 0 rgba(0, 0, 0, 0.1);
            background: linear-gradient(135deg, #18499a 0%, #00c3ff 100%);
            color: #fff;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        }

    .appsocial .uk-grid-small > .uk-grid-margin {
        margin-top: 0;
    }

.app-mobile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

    .app-mobile img {
        width: 100px;
        cursor: pointer;
    }

/* Accordion custom style dùng chung cho cả custom-accordion và member-accordion */
.custom-accordion .uk-accordion-title,
.member-accordion .uk-accordion-title {
    border: 1.5px solid var(--primary-color);
    border-radius: 14px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
    color: var(--primary-color);
    text-transform: none !important;
    font-size: 16px;
    padding: 22px 10px;
    background: #fff;
    transition: background 0.2s, color 0.2s;
}

    .custom-accordion .uk-accordion-title:hover,
    .custom-accordion .uk-open > .uk-accordion-title,
    .member-accordion .uk-accordion-title:hover,
    .member-accordion .uk-open > .uk-accordion-title {
        background: var(--primary-color);
        color: #fff;
    }

.custom-accordion .uk-accordion-content,
.member-accordion .uk-accordion-content {
    border-radius: 0 0 14px 14px;
    border-top: none;
    margin-bottom: 10px;
    padding: 20px 0;
    background: #fff;
    margin-top: -20px;
}

.bdh-grid-1-2-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-top: 30px;
}

.box1_bdh {
    padding: 0 !important;
    background-color: #ffffff !important;
    border-radius: 14px;
    margin: 0 auto 18px auto;
    text-align: center;
    max-width: 220px;
}

    .box1_bdh img {
        object-fit: contain !important;
    }

.bdh-row img {
    height: auto;
    object-fit: contain !important;
}

.bdh-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 0;
}

    .bdh-row:last-child {
        margin-bottom: 0;
    }

.bdh-info {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.bdh-title {
    background: var(--primary-color);
    color: #fff;
    border-radius: 8px 8px 0 0;
    border-bottom: 4px solid #faed23;
    padding: 8px 0 4px 0;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 0;
    margin-top: 10px;
}

.first-bdh {
    border-color: #ed1c24;
}

.bdh-desc {
    background: #f5f8fc;
    color: #333;
    padding: 15px;
    font-size: 14px;
}

.member-accordion {
    margin-top: 24px;
}

    .member-accordion .uk-accordion-title {
        border: none;
        border-radius: 0;
        margin-bottom: 0;
        font-weight: bold;
        color: var(--primary-color);
        text-transform: none !important;
        font-size: 17px;
        padding: 18px 20px;
        transition: background 0.2s, color 0.2s;
        text-align: center;
    }

        .member-accordion .uk-accordion-title:hover,
        .member-accordion .uk-open > .uk-accordion-title {
            background: var(--primary-color);
            color: #fff;
        }

    .member-accordion .uk-accordion-content {
        border: none;
        border-radius: 0 0 14px 14px;
        border-top: none;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0 0 0 0;
        background: #fff;
    }

    .member-accordion > li {
        border: 1.5px solid var(--primary-color);
        border-radius: 12px;
        margin-bottom: 18px;
        overflow: hidden;
    }

.member-info {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--primary-color);
}

    .member-info:last-child {
        border-color: transparent;
    }

    .member-info .member-img {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
    }

    .member-info img {
        width: 100%;
        height: 80px;
        object-fit: contain;
        border-radius: 10px;
    }

.member-details {
    flex: 2;
    min-width: 0;
    padding-left: 24px;
}

    .member-details strong {
        color: var(--primary-color);
        font-size: 18px;
        display: block;
        margin-bottom: 6px;
    }

    .member-details p {
        margin: 0 0 4px 0;
        color: #5a5a5a;
        font-size: 15px;
        width: 80%;
    }

    .member-details b {
        color: var(--primary-color);
    }

.uk-accordion-content .uk-accordion-title {
    text-align: left;
    border-bottom: 1px solid var(--primary-color);
}

    .uk-accordion-content .uk-accordion-title:hover {
        background-color: transparent;
    }

/* Không đổi màu nền khi accordion mở */
.company-accordion .uk-accordion-title,
.company-accordion .uk-accordion-title.uk-open,
.company-accordion .uk-open > .uk-accordion-title {
    background: transparent;
}

/* Đội quản lý điện - card style (theo thiết kế bảng) */
.company-teams {
    /* Reset UIkit grid spacing */
    --uk-grid-margin-horizontal: 0;
    --uk-grid-margin-vertical: 0;
}

    .company-teams .uk-card {
        border-radius: 0;
        box-shadow: none;
        background: none;
        margin: 0;
        font-size: 13px;
        padding: 20px;
        /* Override UIkit card styles */
        border: none !important;
        min-height: auto !important;
    }

    .company-teams h5 {
        margin: 0 0 6px 0;
        font-size: 15px;
        font-weight: 600;
        color: #444;
        text-transform: uppercase;
        letter-spacing: 0.2px;
    }

    .company-teams .uk-card > div {
        font-size: 13px;
        color: #222;
        margin-bottom: 1px;
    }

    .company-teams .uk-grid {
        margin-top: 0;
        margin-bottom: 0;
    }
    /* Custom grid layout */
    .company-teams .teams-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        margin: 0;
    }

    .company-teams .team-card {
        border-bottom: 1px solid #1a4fa0;
        border-right: 1px solid #1a4fa0;
    }

        /* Phần con chẵn (2, 4, 6...) - không có border-right */
        .company-teams .team-card:nth-child(even) {
            border-right: none;
        }

#slider_home .uk-slideshow-items {
    height: 55vh;
    min-height: auto !important;
}

/* Responsive */
@media (max-width: 767px) {
    .company-teams .teams-grid {
        grid-template-columns: 1fr;
    }

    .company-teams .team-card {
        border-right: none;
    }
}

@media (max-width: 767px) {
    .company-teams .uk-child-width-1-2\@m > div {
        width: 100% !important;
        max-width: 100%;
        border-right: none;
    }
}

.photo-slide-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* padding-right: 30px; */
}

.fixed2 {
    display: block;
}

.sdtc-img {
    margin-top: 40px;
}
/* Tối ưu giao diện bài viết chi tiết và liên quan */
.article-detail {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(30, 135, 240, 0.06);
}

.article-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
    letter-spacing: -1px;
}

.article-detail .article-cover img,
.article-image img,
.uk-card-media-top img {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(30, 135, 240, 0.08);
}

.article-content h3,
.article-content h4 {
    margin-top: 2rem;
    color: var(--primary-color);
    font-weight: 600;
}

.article-content ul,
.article-content ol {
    margin-left: 1.5rem;
    margin-bottom: 1.2rem;
}

.article-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1rem;
    font-style: italic;
    background: #f5f7fa;
    margin: 1.5rem 0;
}

.article-image {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.custom-quote {
    margin-left: 50px;
}

.sub-li {
    padding: 5px 15px;
    border-bottom: 1px solid #e4e4e4;
}

.uk-navbar-dropdown {
    width: max-content;
}

.sub-li:last-child {
    border-bottom: none;
}

@media (max-width: 900px) {
    .member-details {
        padding-left: 12px;
    }
}

@media (max-width: 600px) {
    .member-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 8px;
    }

        .member-info .member-img {
            flex: unset;
            width: 100%;
            max-width: 100%;
        }

    .member-accordion .uk-accordion-title {
        padding: 12px 8px;
        font-size: 15px;
    }

    .member-details p {
        width: auto;
        padding-right: 12px;
    }

    #footer {
        margin-top: 30px;
    }
}

@media (max-width: 900px) {
    .bdh-row {
        gap: 12px;
    }

    .box1_bdh {
        /* max-width: 140px; */
    }

    .custom-accordion .uk-accordion-title {
        font-size: 14px;
        padding: 14px 6px;
    }

    .custom-accordion .uk-accordion-content {
        padding: 10px 4px 4px 4px;
    }

    .news-links-section {
        margin-top: 30px;
    }

    .news-topic-section {
        margin-block: 30px;
    }

    .custom-news-cards-row > div {
        margin-bottom: 0;
    }

    .photo-library-section,
    .video-library-section {
        margin-block: 40px;
    }

    .topic-item {
        margin-bottom: 10px;
    }

    .events-section,
    .custom-news-card-box {
        margin-bottom: 30px;
    }

    .news-card-img {
        height: 300px;
    }

    .custom-news-card-events .custom-news-card {
        margin-top: 20px;
    }

        .custom-news-card-events .custom-news-card:last-child {
            margin-bottom: 20px;
        }
}

@media (max-width: 600px) {
    .bdh-row {
        flex-direction: column;
        gap: 10px;
    }

    .bdh-grid-1-2-3 {
        gap: 10px;
    }

    .appsocial {
        align-items: start;
        flex-direction: column;
        gap: 20px;
    }

    .app-mobile {
        gap: 10px;
    }

    .video-card-large img {
        height: 400px;
    }
}

@media (min-width: 1440px) {
    .fixed2 {
        bottom: 100px;
    }
}

@media (min-width: 1920px) {
    /* Style riêng cho PC lớn */
    .fixed-social-box {
        top: 35%;
        right: 25px;
        left: auto;
    }

    .fixed-social-item:hover {
        transform: scale(1.08) translateX(-8px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        z-index: 2;
    }

    .fixed2 {
        top: 65%;
        right: 30px;
    }

    .back-to-top.display {
        right: 30px;
        bottom: 20px;
    }
}


/* --- CSS MỚI CHO THƯ VIỆN ẢNH --- */

/* 1. Cấu hình chung cho khung ảnh */
.video-card {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Xóa bỏ height cố định để tránh mất hình */
}

    /* 2. Cấu hình ảnh bên trong */
    .video-card img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Cắt ảnh tự động để lấp đầy khung */
        display: block; /* Xóa khoảng trắng thừa dưới chân ảnh */
        /* QUAN TRỌNG: Không dùng position: absolute nữa để tránh lỗi mất hình */
    }

/* 3. Tỉ lệ cho Ảnh Lớn (Cột Trái) */
/* Tỉ lệ 16/10 (1.6) sẽ cao hơn 16/9 một chút => Giúp bù đắp cho khe hở (gap) của 2 ảnh bên phải */
.video-card-large {
    aspect-ratio: 16 / 10;
}

/* 4. Tỉ lệ cho 2 Ảnh Nhỏ (Cột Phải) */
/* Tỉ lệ 16/9 (1.77) là chuẩn màn hình wide */
.video-card-box .video-card {
    aspect-ratio: 16 / 9;
}

/* 5. Mobile: Reset về tỉ lệ chuẩn để không bị quá cao */
@media (max-width: 959px) {
    .video-card-large {
        aspect-ratio: 16 / 9;
    }
}



/* --- CSS CHO TOP HEADER --- */

/* 1. Định dạng trạng thái bình thường của link */
.top_header .uk-navbar-nav > li > a {
    color: #666; /* Màu xám chữ hiện tại (hoặc #777 tùy design gốc) */
    font-size: 13px; /* Kích thước chữ nhỏ gọn cho topbar */
    font-weight: 400;
    text-transform: none; /* Giữ nguyên chữ hoa/thường */
    transition: color 0.3s ease; /* Tạo độ trễ để đổi màu mượt mà */
    min-height: 35px; /* Giảm chiều cao mặc định của navbar uikit cho gọn */
    display: flex;
    align-items: center;
}

/* 2. Hiệu ứng khi Hover (Rê chuột vào) */
.top_header .uk-navbar-nav > li > a:hover {
    color: #17479b; /* Đổi sang màu Xanh thương hiệu EVN */
    text-decoration: none; /* Đảm bảo không bị gạch chân xấu */
}

/* Để số điện thoại luôn nổi bật hơn các link khác */
/*.top_header .uk-navbar-nav > li:last-child > a {
    font-weight: 600;
    color: #17479b;
    cursor: default;
}*/


/* Class tiện ích để reset style cho thẻ a */
.link-no-style {
    text-decoration: none !important;
    color: inherit !important; /* Giữ màu chữ gốc của thẻ cha */
    display: block; /* Để link bao trọn nội dung */
}

    .link-no-style:hover {
        color: #17479b !important; /* Đổi màu xanh khi hover (nếu muốn) */
        text-decoration: none !important;
        cursor: pointer;
    }

/* Tinh chỉnh riêng cho phần Mô tả */
.custom-news-card-desc a {
    color: #666 !important; /* Giữ màu xám cho mô tả */
}

.custom-news-card-desc a:hover {
    color: #333 !important; /* Hover mô tả thì đậm hơn chút, đừng xanh quá */
}

/* Đảm bảo ảnh cũng có cursor pointer */
.custom-news-card-img-wrap a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}


/* 1. KHUNG CARD CHÍNH */
.custom-news-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    /* Đặt chiều cao tối thiểu cho card, nhưng cho phép giãn nếu chữ dài */
    min-height: 320px;
    /* QUAN TRỌNG: Giúp 2 cột (ảnh và nội dung) luôn cao bằng nhau */
    align-items: stretch;
    transition: box-shadow 0.2s, transform 0.2s;
}

/* 2. KHUNG BAO NGOÀI ẢNH (Cột trái) */
.custom-news-card-img-wrap {
    /* Set độ rộng cố định (40% hoặc 50% tùy bạn) */
    flex: 0 0 40%;
    max-width: 40%;
    padding: 0;
    /* QUAN TRỌNG: Làm điểm neo cho ảnh tuyệt đối */
    position: relative;
    overflow: hidden;
    /* Giữ màu nền khớp với ảnh để khi load ko bị chớp */
    /*background: #eaeaea;*/
}

/* 3. ẢNH CHÍNH */
.custom-news-card-img {
    /* QUAN TRỌNG: Absolute giúp ảnh luôn phủ kín khung wrap bất kể chiều cao */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Cắt ảnh để vừa khung mà không méo */
    object-fit: cover;
    /* Xóa bỏ min-height cũ gây lỗi cao thấp */
    min-height: unset;
    transition: transform 0.5s ease;
}

/* 4. PHẦN NỘI DUNG (Cột phải) */
.custom-news-card-content {
    flex: 1 1 auto; /* Tự động chiếm phần còn lại */
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Căn giữa nội dung theo chiều dọc */
}

/* 5. MOBILE (Màn hình nhỏ dưới 767px) */
@media (max-width: 767px) {
    .custom-news-card {
        flex-direction: column; /* Xếp dọc lại */
        height: auto;
        min-height: unset;
    }

    .custom-news-card-img-wrap {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        /* Trên mobile thì quay về relative/static để ảnh đẩy nội dung xuống */
        height: 200px; /* Chiều cao cố định cho ảnh trên mobile */
    }

    .custom-news-card-img {
        /* Trên mobile không dùng absolute nữa */
        position: relative;
        height: 100%;
    }
}

.uk-active .top_header {
    background: #f3f3f3;
    /*#f3f3f3*/
}


/* --- 1. XỬ LÝ HEADER (Lớp cao nhất) --- */

/* Wrapper bao ngoài của Header khi đang Sticky */
/* .uk-sticky-fixed là class UIkit tự sinh ra khi dính */
div[uk-sticky].uk-active,
.uk-sticky.uk-active.uk-sticky-fixed {
    z-index: 2000 !important; /* Đặt số thật cao để đè lên mọi thứ */
    background-color: #ffffff !important; /* Nền trắng tuyệt đối, không được trong suốt */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Bóng đổ nhẹ để tách biệt */
}

/* Đảm bảo Header bên trong cũng có nền trắng */
#header {
    background-color: #ffffff !important;
    position: relative;
    z-index: 2001; /* Cao hơn wrapper 1 đơn vị cho chắc chắn */
}

/* --- 2. XỬ LÝ LEFT MENU (Lớp thấp hơn) --- */

/* Khung chứa Menu trái */
.menu_sidebar {
    position: relative;
    z-index: 1000 !important; /* Thấp hơn Header (2000) */
}

    /* Thẻ ASIDE khi đang Sticky */
    .menu_sidebar aside.uk-sticky,
    .menu_sidebar aside.uk-sticky.uk-active {
        z-index: 1000 !important; /* Vẫn thấp hơn Header */
    }

    /* Nếu bạn lỡ dùng class 'uk-position-z-index' cho sidebar, đoạn này sẽ fix */
    .menu_sidebar.uk-position-z-index {
        z-index: 1000 !important;
    }

.rotate-button {
    transform: rotate(180deg);
}


/* 1) Hai ô đỏ */
.hihi1 .uk-card {
    border-radius: 8px;
}

.hihi1 .card3.gd {
    background-color: #ed1c24 !important;
}

    .hihi1 .card3.gd h3 {
        color: #ffffff !important;
    }
/* 2) Tầng trên + dàn Phó TGĐ: xanh đậm */
.hihi1 .bgd1 .card3.color,
.hihi1 .bgd1 .card3.ban1,
.hihi1 .bgd1 .card3.hai2,
.hihi1 .hai1 .card3.uk-card-primary {
    background-color: #1f4fa3 !important;
}

    .hihi1 .bgd1 .card3.color h3,
    .hihi1 .bgd1 .card3.ban1 h3,
    .hihi1 .bgd1 .card3.hai2 h3,
    .hihi1 .hai1 .card3.uk-card-primary h3 {
        color: #ffffff !important;
    }
/* 3) Hàng 14 ban: xanh nhạt vừa */
.hihi1 .uk-grid.color1 .card3.uk-card-primary {
    background-color: #7fa0dc !important;
}

    .hihi1 .uk-grid.color1 .card3.uk-card-primary h3 {
        color: #111111 !important;
    }
/* 4) Hàng đơn vị trực thuộc: nhạt hơn */
.hihi1 .uk-grid.color2 .card3.uk-card-primary {
    background-color: #9cb1d2 !important;
    max-width: 100px;
    min-height: 180px !important;
}

    .hihi1 .uk-grid.color2 .card3.uk-card-primary h3 {
        color: #111111 !important;
    }
/* 5) Hàng công ty điện lực: nhạt nhất */
.hihi1 .uk-grid.color3 .card3.uk-card-primary {
    background-color: #d9dee8 !important;
    max-width: 100px !important;
}

    .hihi1 .uk-grid.color3 .card3.uk-card-primary h3 {
        color: #111111 !important;
    }
/* 6) Giữ các ô còn lại không bị rule cũ đè */
.hihi1 .card3.uk-card-primary {
    box-shadow: none;
}
/* 7) Chữ dễ đọc hơn */
.hihi1 .sdtc1 .card3 .uk-card-title {
    line-height: 1.3;
}

.hihi1 .card3 .uk-card-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.25;
}

/* Hàng trên + PTGĐ: hơi to hơn */
.hihi1 .bgd1 .card3 .uk-card-title,
.hihi1 .hai1 .card3 .uk-card-title {
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* Các ô chữ dọc */
.hihi1 .title-rolate {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.15;
}

/* Hàng đơn vị trực thuộc */
.hihi1 .color2 .uk-card-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.25;
}

/* Hàng công ty điện lực cuối */
.hihi1 .color3 .uk-card-title {
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.15;
}


.tag_baiviet {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    line-height: normal;
}

    .tag_baiviet .uk-label {
        display: inline-block;
        margin: 0!important;
        padding: 1px 10px;
        background: #eef5ff;
        color: #0f6ecd;
        border-radius: 6px;
        font-weight: 500;
        font-size: 13px;
        white-space: nowrap;
    }

    

/* Fix bảng trong nội dung bài viết CKEditor */
.article_at table.Table {
    border-collapse: collapse;
}

    /* Tạo khoảng cách đẹp trong ô */
    .article_at table.Table td,
    .article_at table.Table th {
        padding: 4px 6px !important;
        vertical-align: middle !important;
    }

        /* Chặn Bootstrap làm thẻ p trong td bị dư margin */
        .article_at table.Table td p,
        .article_at table.Table th p {
            margin: 0 !important;
            padding: 0 !important;
        }

    /* Không cho dòng tiêu đề Tháng bị rớt dòng */
    .article_at table.Table tr:first-child td,
    .article_at table.Table tr:first-child th {
        white-space: nowrap;
    }