@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes shake-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }

    10%,
    30% {
        -moz-transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20%,
    40% {
        -moz-transform: rotate(25deg) scale(1) skew(1deg)
    }

    100%,
    50% {
        -moz-transform: rotate(0) scale(1) skew(1deg)
    }
}

@keyframes rotate {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes fadeup {
    from {
        opacity: 0;
        transform: translateX(-20px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes pulse-animation {
    0% {
        transform: scale3d(1, 1, 1);
        opacity: 0
    }

    10% {
        transform: scale3d(1.1, 1.1, 1.1);
        opacity: 1
    }

    100% {
        transform: scale3d(1.6, 1.6, 1.6);
        opacity: 0
    }
}

@keyframes border-animation {
    0% {
        transform: scale3d(0.6, 0.6, 0.6);
        opacity: 0
    }

    20% {
        transform: scale3d(1.2, 1.2, 1.2);
        opacity: 1
    }

    100% {
        transform: scale3d(1.4, 1.4, 1.4);
        opacity: 0
    }
}

@keyframes skeleton {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .1
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }

    50% {
        opacity: 1
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.inset-0 {
    inset: 0
}

.pointer {
    cursor: pointer
}

.z--1 {
    z-index: -1
}

.z-1 {
    z-index: 1
}

.z-2 {
    z-index: 2
}

.z-3 {
    z-index: 3
}

.isolate {
    isolation: isolate
}

.ovf-hidden {
    overflow: hidden
}

.square {
    aspect-ratio: 1/1
}

:root {
    --max-padding: 30px;
    --max-w-unit: 1300;
    --max-width: min(1300px, calc(100vw - var(--max-padding)));
    --primary-color: #ff6700;
    --light-primary-color: #ff8635;
    --secondary-color: #171717;
    --light-secodanry-color: #222;
    --light-color: #fff;
    --font-family: "Montserrat", sans-serif;
    --line: 3;

    --fancybox-opacity: 0.5;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: .5
}

::-webkit-scrollbar-track {
    background: #fff
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 5px
}

body {
    top: 0 !important;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-family: var(--font-family);
    font-size: 14px
}

button {
    all: unset;
    box-sizing: border-box;
    cursor: pointer
}

picture {
    display: flex
}

picture:has(>img.w-100) {
    width: 100%;
    height: auto
}

img {
    max-width: 100%;
    object-fit: cover;
    display: inline-block;
    height: auto
}

img.lazy {
    display: flex;
    opacity: 0
}

img:not(.initial) {
    transition: opacity 1s
}

img:not([src]) {
    visibility: hidden
}

img:is(.loaded, .error) {
    opacity: 1
}

a,
input,
textarea {
    outline: none;
    padding: 0
}

input[type=number] {
    appearance: textfield
}

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.wrap-content {
    display: grid;
    width: 100% !important;
    grid-column: main;
    grid-template-columns: [main-start] 1fr [content-start] var(--max-width) [content-end] 1fr [main-end]
}

.wrap-content>*:not(.fw, .wrap-content) {
    grid-column: content
}

.wrap-content>.fw {
    grid-column: main
}

.pagination {
    --bs-pagination-color: var(--primary-color);
    --bs-pagination-hover-color: var(--primary-color);
    --bs-pagination-active-bg: var(--primary-color);
    --bs-pagination-active-border-color: var(--primary-color);
    flex-wrap: wrap;
    margin: 20px 0 0 0 !important
}

.pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

:is(.title-main, .title-detail) {
    text-align: center;
    margin-bottom: clamp(20px, 3.2520325203vw, 40px)
}

:is(.title-main, .title-detail) img {
    margin-bottom: 5px;
    width: clamp(100px, 11.8699186992vw, 146px)
}

:is(.title-main, .title-detail) :is(span, h1, h2, h3, h4, h5, h6) {
    color: var(--secondary-color);
    font: 700 clamp(18px, 3.007518797vw, 32px)/1.35 var(--font-family);
    text-transform: uppercase;
    margin-bottom: 0
}

.time-main {
    color: #999;
    margin-bottom: .75rem
}

.time-main i {
    margin: 3px 7px 0 0;
    vertical-align: top
}

.time-main span {
    display: inline-block;
    vertical-align: top
}

.share {
    background: hsla(0, 0%, 50%, .15);
    border-radius: 5px;
    line-height: normal;
    margin-top: 15px;
    padding: 17px 15px 10px
}

.share b {
    display: block;
    margin-bottom: 5px
}

footer {
    background: #21242a
}

.footer-top {
    padding: clamp(30px, 6.5040650407vw, 80px) 0
}

.footer-title {
    font: 600 clamp(14px, 1.4634146341vw, 18px)/1.3333333333 var(--font-family);
    text-transform: uppercase;
    color: var(--light-color);
    margin-bottom: 1em
}

:is(.footer-listview, .footer-gridview) {
    font: 400 15px/1.6 var(--font-family);
    --item-h: calc(1em + (12 / 15 * 1em));
    --item-count: 4;
}

:is(.footer-listview, .footer-gridview)::-webkit-scrollbar {
    display: none
}

:is(.footer-listview, .footer-gridview) .item {
    padding: .4em 0;
    color: var(--light-color)
}

.footer-social-title {
    font: 400 15px/1.73333 var(--font-family);
    color: var(--light-color)
}

.footer-powered {
    padding: 20px 0;
    font: 400 15px/1.73333 var(--font-family);
    color: var(--light-color);
    background: #1d2026
}

.footer-powered strong {
    color: var(--primary-color)
}

#footer-map {
    height: 500px;
    position: relative
}

#footer-map iframe {
    height: 100% !important;
    left: 0 !important;
    position: absolute !important;
    top: 0 !important;
    width: 100% !important
}

.text-split {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--line);
    box-orient: vertical;
    line-clamp: var(--line);
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    height: calc(var(--line)*1lh)
}

.scale-img {
    display: block;
    overflow: hidden
}

.scale-img img {
    transition: all .3s;
    transform: scale(1)
}

:is([class*=_item]:hover .scale-img, .scale-img:hover)>img,
:is([class*=_item]:hover .scale-img, .scale-img:hover) picture>img {
    transition: all .3s;
    transform: scale(1.1)
}

[class*=-xemthem] {
    transition: all .6s;
    position: relative;
    overflow: hidden
}

[class*=-xemthem]::before {
    transition: all .6s;
    content: "";
    z-index: -1;
    position: absolute;
    inset: 0;
    background-image: linear-gradient(20deg, var(--bg, transparent) 50%, var(--xemthem-color, var(--primary-color)) 50%);
    background-size: 600%
}

[class*=-xemthem]:hover {
    color: #fff;
    transform: translateX(0.5rem)
}

[class*=-xemthem]:hover::before {
    background-position: 100%
}

.transition {
    transition: all .3s
}

.cart-fixed {
    color: #fff !important;
    z-index: 10
}

.cart-fixed i {
    font-size: 20px
}

.cart-fixed span {
    background: var(--primary-color);
    border-radius: 100%;
    color: #fff;
    font-size: 11px;
    height: 25px;
    line-height: 25px;
    position: absolute;
    right: -5px;
    text-align: center;
    top: 0;
    width: 25px
}

.a2a_kit .a2a_svg {
    height: 30px;
    line-height: 30px;
    width: 30px
}

.qty-pro {
    flex: 0 0 100px !important
}

.skeleton :is([class*="-pic "], [class*="-title "], [class*="-desc "], [class*="-content "], [class*="-price "]) {
    background: #e4e4e4;
    border-radius: 5px;
    animation: skeleton 2s ease-in-out infinite;
    color: rgba(0, 0, 0, 0);
    -webkit-text-fill-color: rgba(0, 0, 0, 0)
}

.skeleton .pagination-ajax {
    filter: grayscale(1);
    position: relative
}

.skeleton .pagination-ajax::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3
}

.skeleton img {
    opacity: 0
}

.htmx-indicator:not(.htmx-request) {
    display: none !important
}

.aos-overflow {
    overflow: hidden !important;
    overflow: clip visible !important
}

.btn-primary {
    background: var(--primary-color);
    font: 600 clamp(13px, 1.2195121951vw, 15px)/1.4666666667 var(--font-family);
    color: var(--light-color);
    padding: .6666666667em 2em;
    --xemthem-color: var(--light-primary-color)
}

.btn-primary:hover {
    background: var(--light-primary-color)
}

.menu-res {
    z-index: 100
}

.menu-res .header-cart img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(8%) hue-rotate(353deg) brightness(104%) contrast(104%)
}

.menu-res-btn {
    padding: 13px 16px;
    margin: -13px -16px;
    border-left: 1px solid var(--bs-list-group-border-color);
}

.grid-sp {
    display: grid;
    --gap: clamp(8px, calc(20 / 1230 * 100vw), 20px);
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(max(150px, (100% - var(--gap) * 3) / 4), 1fr))
}

.wrap-gt_home {
    padding: clamp(20px, 6.7669172932vw, 38px) 0 clamp(20px, 4.962406015vw, 66px);
    --max-width: min(1330px, calc(100vw - var(--max-padding)))
}

.gt_home-title {
    font: 700 clamp(18px, 3.007518797vw, 32px)/1.35 var(--font-family);
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: .3em
}

.gt_home-desc {
    font: 400 clamp(13px, 1.1278195489vw, 15px)/1.73333 var(--font-family);
    text-align: justify;
    color: #000;
    margin-bottom: 2.6666666667em
}

.gt_home-thongso {
    margin-top: clamp(25px, 4.0650406504vw, 50px);
    width: 100%;
}

.gt_home-thongso-title {
    font: 700 clamp(35px, 4.8780487805vw, 60px)/1.2166666667 var(--font-family);
    text-align: justify;
    background: linear-gradient(90deg, #ffc7a2 0%, #ff6e0c 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    margin-right: .1666666667em;
    -webkit-text-stroke: 1px var(--primary-color);
    paint-order: stroke fill
}

.gt_home-thongso-desc {
    font: 600 clamp(14px, 1.3008130081vw, 16px)/1.5 var(--font-family);
    text-transform: uppercase;
    text-align: justify;
    color: var(--light-secodanry-color)
}

@media(max-width: 1920px)and (min-width: 992px) {
    .wrap-gt_home {
        padding-bottom: calc(.0496240602*var(--max-width))
    }

    .gt_home-banner {
        mask: url(../images/gt_home_banner_mask.svg) no-repeat bottom center/cover
    }

    .gt_home-decor {
        width: calc(1.4436090226*var(--max-width));
        aspect-ratio: 1920/520
    }

    .gt_home-thongso {
        margin-top: calc(.037593985*var(--max-width))
    }
}

@media (min-width: 992px) {
    .gt_home-thongso {
        width: 50%;
    }
}

.wrap-khoahoc {
    background: linear-gradient(122deg, #ffe8d8 0%, #fff6f0 20.78%, #ffe8d8 33.85%, #fffdfb 53.41%, #ffdfc9 67.63%, #ffe0ca 89.95%, #ffe8d8 100%);
    padding: clamp(20px, 6.0975609756vw, 75px) 0
}

.khoahoc-flex {
    gap: clamp(40px, 4.8780487805vw, 60px)
}

.khoahoc-title {
    font: 700 clamp(18px, 3.007518797vw, 32px)/1.35 var(--font-family);
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: .3em
}

.khoahoc-desc {
    font: 400 clamp(13px, 1.2195121951vw, 15px)/1.7333333333 var(--font-family);
    text-align: justify;
    color: #000;
    margin-bottom: 2.1333333333em
}

.khoahoc-pic {
    position: relative;
    isolation: isolate
}

.khoahoc-pic .scale-img {
    box-shadow: 0 0 clamp(92px, 14.9593495935vw, 184px) rgba(255, 134, 53, .4)
}

.khoahoc-pic-decor {
    position: absolute;
    z-index: -1;
    left: -26%;
    top: -11.3333333333%;
    width: 89.6666666667%;
    height: 100.5%
}

.khoahoc_item>.d-flex {
    gap: clamp(24px, 4.0650406504vw, 50px)
}

@media(min-width: 768px) {
    .khoahoc_item:nth-child(even) .khoahoc-pic {
        order: 2;
        transform: rotateY(180deg)
    }

    .khoahoc_item:nth-child(even) .khoahoc-pic .scale-img {
        transform: rotateY(-180deg)
    }

    .khoahoc_item:nth-child(even) .khoahoc-info {
        order: 1
    }
}

.wrap-camket {
    padding: clamp(20px, 3.2520325203vw, 40px) 0
}

.camket-bg-1:not(.loaded) {
    background: linear-gradient(0deg, #ffdfc9 0%, #fff 100%)
}

.camket-bg-2 {
    background: var(--primary-color);
    mask: url(../images/camket_bg_mask_2.svg) no-repeat top center/cover
}

.camket-bg-3 {
    background: #ff8d40;
    mask: url(../images/camket_bg_mask_3.svg) no-repeat top center/cover
}

.camket-number {
    font: 700 clamp(24px, calc(40 / 1230 * 100vw), 40px)/calc(49/40) var(--font-family);
    background: linear-gradient(90deg, #ffc7a2 0%, #ff6e0c 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    -webkit-text-stroke: 1px var(--primary-color);
    paint-order: stroke fill
}

.camket-title {
    font: 700 clamp(14px, 1.3008130081vw, 16px)/1.625 var(--font-family);
    text-align: start;
    color: var(--light-secodanry-color)
}

.camket_item {
    padding: clamp(10px, 1.6260162602vw, 20px);
    padding-top: clamp(5px, .8130081301vw, 10px);
    backdrop-filter: blur(6px);
    box-shadow: 6px 6px 6px 0 rgba(129, 90, 63, .1);
    border-radius: 20px;
    border: 1px solid var(--primary-color)
}

.grid-camket {
    display: grid;
    --gap: clamp(8px, calc(20 / 1230 * 100vw), 20px);
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(max(min(150px, 100%), (100% - var(--gap) * 1) / 2), 1fr));

    --title-fs: clamp(14px, 1.3008130081vw, 16px);
    --title-lh: 1.625;
    --title-line-count: 2;
    --title-h: calc(var(--title-fs) * var(--title-lh) * var(--title-line-count));

    --number-fs: clamp(24px, calc(40 / 1230 * 100vw), 40px);
    --number-lh: calc(49/40);
    --number-h: calc(var(--number-fs) * var(--number-lh));

    --pt: clamp(10px, 1.6260162602vw, 20px);
    --pb: clamp(5px, .8130081301vw, 10px);

    --item-h: calc(var(--title-h) + var(--number-h) + var(--pt) + var(--pb) + 2px);

    --row: 4;

}

@media(min-width: 992px) {
    .grid-camket {
        max-height: calc(var(--item-h) * var(--row) + var(--gap) * (var(--row) - 1));
        overflow: auto;
    }

    .camket-bg-1 {
        mask: url(../images/camket_bg_mask_1.svg) no-repeat top center/cover
    }

    *:has(+.wrap-camket) {
        padding-bottom: clamp(160px, 26.0162601626vw, 320px)
    }

    .wrap-camket {
        padding-top: clamp(128px, 20.8130081301vw, 256px);
        margin-top: calc(-1*clamp(124px, 20.243902439vw, 249px))
    }

    .camket-title {
        --line: 2;
    }
}

.wrap-doingu {
    padding: clamp(20px, 6.1788617886vw, 76px) 0
}

.doingu-bg-1 {
    mask: url(../images/doingu_mask_1.svg) no-repeat top center/cover;
    background: var(--primary-color)
}

.doingu-bg-2 {
    background: linear-gradient(0deg, #ffdfc9 0%, #fff 100%)
}

.doingu-pic {
    background: linear-gradient(360deg, #ffac74 0%, #fff 100%)
}

.doingu-title {
    font: 700 clamp(16px, 1.6260162602vw, 20px)/1.2 var(--font-family);
    text-transform: uppercase;
    text-align: center;
    color: var(--primary-color);
    margin-top: 1.1em
}

.doingu-desc {
    font: 700 clamp(13px, 1.2195121951vw, 15px)/1.6666666667 var(--font-family);
    text-align: center;
    color: var(--light-secodanry-color);
    margin-top: .5333333333em
}

@media(min-width: 992px) {
    *:has(+.wrap-doingu) {
        padding-bottom: clamp(116px, 18.8617886179vw, 232px)
    }

    .wrap-doingu {
        padding-top: clamp(105px, 17.1544715447vw, 211px);
        margin-top: calc(-1*clamp(78px, 12.7642276423vw, 157px))
    }

    .doingu-bg-2 {
        mask: url(../images/doingu_mask_2.svg) no-repeat top center/cover;
    }
}

.wrap-feedback {
    padding: clamp(20px, 6.1788617886vw, 76px) 0 clamp(20px, 6.5040650407vw, 80px);
    --content-fs: clamp(13px, calc(15 / 1230 * 100vw), 15px)
}

.feedback-content {
    font: 400 clamp(13px, 1.2195121951vw, 15px)/1.7333333333 var(--font-family);
    color: #434343;
    border-radius: 1.2em;
    padding: 2.0666666667em;
    position: relative;
    background: #fff;
    margin-bottom: 2.2em
}

.feedback-content svg {
    width: 7.1333333333em;
    height: 1em;
    margin-bottom: 1.0666666667em
}

.feedback-content::after {
    position: absolute;
    content: "";
    top: 100%;
    left: 4em;
    width: 1.6em;
    height: .8em;
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    background: inherit
}

.feedback-header {
    padding-left: calc(2.4*var(--content-fs))
}

.feedback-pic {
    width: calc(4.9333333333*var(--content-fs));
    margin-right: calc(.6666666667*var(--content-fs))
}

.feedback-title {
    font: 700 clamp(14px, 1.3821138211vw, 17px)/1.2352941176 var(--font-family);
    color: var(--secondary-color)
}

.feedback-desc {
    font: 500 clamp(10px, 1.0569105691vw, 13px)/1.6153846154 var(--font-family);
    color: #434343
}

.feedback-slide {
    filter: drop-shadow(0 2px clamp(7px, 1.0569105691vw, 13px) rgba(0, 0, 0, 0.15))
}

@media(min-width: 992px) {
    .feedback-slide .embla__slide .feedback_item {
        padding: 0 0 clamp(20px, 3.2520325203vw, 40px);
        transition: .3s
    }

    .feedback-slide .embla__slide:nth-child(even) .feedback_item {
        padding: clamp(20px, 3.2520325203vw, 40px) 0 0
    }
}

.wrap-kenhthongtin {
    padding: clamp(20px, 6.5040650407vw, 80px) 0
}

.kenhthongtin-counter {
    font: 700 clamp(25px, 4.0650406504vw, 50px)/1 var(--font-family);
    text-transform: uppercase;
    text-align: center;
    color: rgba(0, 0, 0, 0);
    -webkit-text-stroke: 1px var(--primary-color);
    paint-order: stroke fill
}

.kenhthongtin-btns {
    margin-top: clamp(21px, 3.4146341463vw, 42px)
}

:is(.kenhthongtin-pic, .kenhthongtin-slide, .kenhthongtin-slide-nav) {
    border-radius: clamp(10px, 1.6260162602vw, 20px)
}

@media(min-width: 992px) {
    .wrap-kenhthongtin-slide-nav {
        --wrapper-gap: calc(20 / 1300 * var(--max-width));
        --width-inner: calc(180 / 1300 * var(--max-width));
        --width-outer: calc((100vw - var(--max-width)) / 2);
        --width: calc(var(--width-inner) + var(--width-outer));
        --item-w: calc(270 / 1300 * var(--max-width));
        --item-aspect-ratio: calc(270 / 438);
        --item-h: calc(var(--item-w) / var(--item-aspect-ratio));
        position: absolute;
        top: calc(.0230769231*var(--max-width));
        left: calc(100% + var(--wrapper-gap));
        height: var(--item-h);
        width: var(--width)
    }

    .wrap-kenhthongtin-slide-nav .embla__container {
        --gap__calc: var(--wrapper-gap) !important
    }

    .wrap-kenhthongtin-slide-nav .embla__slide {
        flex: 0 0 calc(var(--item-w) + var(--gap__calc))
    }

    .wrap-kenhthongtin .title-main {
        margin-top: calc(.1661538462*var(--max-width))
    }
}

.wrap-truyenthong {
    background: linear-gradient(180deg, #fff 0.48%, #ffefe4 51.35%, #fff 100%);
    padding: clamp(20px, 6.9105691057vw, 85px) 0 clamp(20px, 6.5040650407vw, 80px)
}

.truyenthong-slide-video,
.truyenthong-slide-video .truyenthong-pic {
    border-radius: clamp(10px, 1.6260162602vw, 20px)
}

.truyenthong-slide-video+style+.wrap-truyenthong-hinhanh {
    margin-top: clamp(20px, 3.2520325203vw, 40px)
}

.wrap-doitac {
    padding: clamp(20px, 6.1788617886vw, 76px) 0 clamp(20px, 6.5040650407vw, 80px);
    background: linear-gradient(145deg, #ffc9a4 0%, #fff 54.33%, #ffc9a4 100%)
}

.doitac-slide {
    border-radius: 16px;
}

.doitac-slide .embla__container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% / var(--slide__count_calc));
    grid-template-rows: repeat(2, 1fr);
    row-gap: var(--gap__calc);
}

.grid-doitac {
    display: grid;
    --gap: clamp(8px, calc(20 / 1230 * 100vw), 20px);
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(max(150px, (100% - var(--gap) * 4) / 5), 1fr))
}

.doitac-pic {
    padding: 8px 20px;
    border-radius: 16px;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .05);
    background: var(--light-color)
}

.wrap-dknt {
    padding: clamp(20px, 6.1788617886vw, 76px) 0 clamp(20px, 6.5040650407vw, 80px)
}

.grid-dknt {
    display: grid;
    --gap: clamp(7px, calc(15 / 1230 * 100vw), 15px);
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(max(min(150px, 100%), (100% - var(--gap) * 1) / 2), 1fr))
}

.dknt-form .dknt-group {
    background: var(--light-color);
    border-radius: 26px;
    display: flex;
    overflow: hidden;
    gap: 10px;
    padding: 0 13px;
    height: 50px;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .05)
}

.dknt-form .dknt-group svg {
    margin-top: 14px
}

.dknt-form .dknt-group .dknt-line {
    width: 1px;
    height: 25px;
    margin-top: 13px;
    background: #656567;
    opacity: .3
}

.dknt-form .dknt-group :is(.form-control, .form-select) {
    background: rgba(0, 0, 0, 0) !important;
    border-radius: 0 !important;
    border: 0 !important;
    font: 400 14px/1.71429 var(--font-family);
    color: #333;
    height: 100%;
    padding: 13px 0;
    box-shadow: unset !important;
    resize: none
}

.dknt-form .dknt-group-textarea,
.dknt-form .dknt-group-textarea textarea {
    height: 100px
}

.dknt-form.was-validated .dknt-group:has(>:valid) {
    outline: 1px solid var(--bs-form-valid-border-color)
}

.dknt-form.was-validated .dknt-group:has(>:invalid) {
    outline: 1px solid var(--bs-form-invalid-border-color)
}

.dknt-form button {
    font: 700 clamp(14px, 1.4634146341vw, 18px)/1.3888888889 var(--font-family);
    text-transform: uppercase;
    color: #f7f7f7;
    padding: .7222222222em 1.7777777778em
}

.dknt-btn-font {
    font: 700 clamp(14px, 1.4634146341vw, 18px)/1.3888888889 var(--font-family);
    text-transform: uppercase;
    color: #f7f7f7;

}

.wrap-tintuc_list_nb {
    padding: clamp(20px, 6.5040650407vw, 80px) 0 clamp(20px, 8.2926829268vw, 102px)
}

.wrap-tintuc_list_nb .row.g-0 {
    --bs-gutter-y: calc(30 / 1300 * var(--max-width));
    --bs-gutter-x: clamp(15px, calc(30 / 1230 * 100vw), 30px)
}

.tintuc_list_nb-title-main {
    /* font: 700 clamp(24px, 2.4390243902vw, 30px)/1.3333333333 var(--font-family); */
    font: 700 clamp(18px, 3.007518797vw, 32px) / 1.35 var(--font-family);
    text-transform: uppercase;
    text-align: center;
    color: var(--secondary-color);
    margin-bottom: .9333333333em
}

.tintuc_list_nb-date {
    font: 400 13px/1.2307692308 var(--font-family);
    color: #737373
}

.tintuc_list_nb-slide {
    margin-bottom: clamp(12px, calc(55 / 1230 * 100vw), 55px)
}

:not(.tintuc_list_nb-slide-nav) .tintuc_list_nb-title {
    font: 700 clamp(14px, 1.3821138211vw, 17px)/1.5294117647 var(--font-family);
    text-transform: uppercase;
    color: var(--secondary-color);
    margin-top: .6470588235em
}

:not(.tintuc_list_nb-slide-nav) .tintuc_list_nb-date {
    margin-top: 1.0769230769em
}

.tintuc_list_nb-slide,
:not(.tintuc_list_nb-slide-nav) .tintuc_list_nb-pic {
    border-radius: 10px
}

.tintuc_list_nb-slide-nav {
    --slide-w: calc(413 / 1300 * var(--max-width))
}

.tintuc_list_nb-slide-nav .embla__container {
    --item-w: var(--slide-w);
    --item-aspect: calc(413 / 98);
    --item-h: calc(var(--item-w) / var(--item-aspect));
    --gap__calc: calc(25 / 413 * var(--slide-w));
    height: calc((var(--item-h) + var(--gap__calc))*var(--slide__count_calc)) !important
}

.tintuc_list_nb-slide-nav .tintuc_list_nb-pic {
    width: calc(.382566586*var(--slide-w))
}

.tintuc_list_nb-slide-nav,
.tintuc_list_nb-slide-nav .tintuc_list_nb-pic {
    border-radius: 10px;
}

.tintuc_list_nb-slide-nav .tintuc_list_nb-info {
    width: calc(.5690072639*var(--slide-w))
}

.tintuc_list_nb-slide-nav .tintuc_list_nb-title {
    font: 700 calc(0.0363196126 * var(--slide-w))/1.6 var(--font-family);
    color: var(--secondary-color);
    margin-top: .4666666667em
}

.tintuc_list_nb-slide-nav .tintuc_list_nb-date {
    font-size: calc(.0314769976*var(--slide-w));
    margin-top: 0;
}

.lich_khai_giang_item {
    background: linear-gradient(122deg, #ffe8d8 0%, #fff6f0 20.78%, #ffe8d8 33.85%, #fffdfb 53.41%, #ffdfc9 67.63%, #ffe0ca 89.95%, #ffe8d8 100%);
    padding: clamp(15px, 2.4390243902vw, 30px);
    border-radius: clamp(15px, 2.4390243902vw, 30px);
    border: 1px solid var(--primary-color);
    font-size: clamp(16px, 1.4634146341vw, 18px)
}

.lich_khai_giang-label {
    margin-bottom: 0
}

.lich_khai_giang-title {
    font-weight: 700;
    margin-bottom: 0
}

.menu-btn {
    font: 600 clamp(14px, calc(18 / 1230 * 100vw), 18px)/1.1428571429 var(--font-family);
    text-transform: uppercase;
    color: var(--light-color);
    padding: .7142857143em .8571428571em;
    background: var(--primary-color);
    border-radius: 6px
}


.jj-p-\[20px_15px\].jj-w-\[calc\(240\/1300\*100\%\)\] {
    width: calc(360/1300*var(--max-width));
}

.jj-p-\[20px_15px\].jj-w-\[calc\(240\/1300\*100\%\)\]>.jj-overflow-auto {
    margin-right: -16px;
    padding-right: 16px;
}

:is([class*=-prev], [class*=-next]):not([class*=fancybox]) {
    width: clamp(36px, calc(50 / 1230 * 100vw), 50px);
    height: clamp(36px, calc(50 / 1230 * 100vw), 50px);
    transition: .3s;
}

:is([class*=-prev], [class*=-next]):not([class*=fancybox]) .position-absolute {
    opacity: 0;
}

*:hover> :is([class*=-prev], [class*=-next]):not([class*=fancybox]) .position-absolute {
    opacity: 1
}

:is([class*=-prev], [class*=-next]):not([class*=fancybox]) svg {
    width: 100%;
    height: 100%;
}

.wrap-slide :is(img, picture) {
    aspect-ratio: 1920/642 !important;
    width: 100vw !important;
    height: calc(100vw / 1920 * 642) !important;
}

.offcanvas .list-group-item {
    padding: 13px;
}

.content-main .title-detail h1 {
    line-height: 1.1 !important;
}

.offcanvas .list-group-item-action:hover,
.list-group-item-action:focus {
    background: white !important;
}

.title-detail h1 {
  color: var(--primary-color);
  text-align: justify;
}