@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 {
    /* Lề hai bên cột nội dung. Trước để 30px nên ở khổ 1280 mép phải nội dung
       chạm 1261 trong khi cụm nút nổi bắt đầu từ 1193 — đè nhau 68px, che mất
       các nút mũi tên băng chuyền, ô nhập form và khung bản đồ. Nới lên 190px
       để chừa chỗ cho cụm nút (rộng 50px, cách mép 30px) ở cả hai bên.
       Từ khổ 1490px trở lên vẫn chạm trần 1300px nên không đổi gì. */
    --max-padding: 190px;
    --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
}

/* Bốn quy tắc của bộ tải lười bằng JavaScript đã gỡ ở đợt trước từng nằm đây:
   ẩn ảnh chưa có src rồi cho hiện dần khi tải xong. Nay ảnh dùng cơ chế tải
   lười sẵn có của trình duyệt nên chúng thành rác — riêng quy tắc chuyển cảnh
   độ mờ 1 giây thì vẫn bám vào MỌI thẻ ảnh toàn site, làm ì mọi thay đổi độ mờ
   về sau. Đã xoá cả cụm. */

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 {
    /* Bootstrap để danh sách bám trái; khách muốn nó nằm giữa trang */
    justify-content: center;
    --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-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
}


.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(1300px, 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;
}
/* ==========================================================================
   Thanh menu không chịu lề rộng của cột nội dung
   ==========================================================================
   Lề 190px khai ở :root sinh ra để chừa chỗ cho cụm nút nổi ở góc phải dưới.
   Nhưng thanh menu dán ở đỉnh trang, cụm nút không bao giờ với tới đó — ép nó
   hẹp theo chỉ làm các mục sít vào nhau: đo ở khổ 1440 thì hàng menu còn
   1250px và các mục chỉ cách nhau 18px.

   Khai lại --max-width cho riêng thanh này. Phải khai đè chính biến đó chứ
   không phải --max-padding: giá trị của --max-width đã được thay thế ngay tại
   :root rồi mới truyền xuống, nên đổi --max-padding ở đây không tính lại nữa.
   -------------------------------------------------------------------------- */
.menu.wrap-content {
	--max-width: min(1300px, calc(100vw - 30px));
}

/* ==========================================================================
   Khối đăng ký trang chủ: căn ảnh vào giữa cột
   ==========================================================================
   Ảnh ở đây là ảnh ngang 626x480, đặt vào cột rộng 521px thì cao 399px — thấp
   hơn cột 496px (chiều cao do form bên cạnh quyết định). Trước đây ảnh dính
   mép trên nên khoảng trống 97px dồn hết xuống dưới. Căn vào giữa cho cân.
   -------------------------------------------------------------------------- */
.wrap-dknt .row > [class*="col-"]:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   Lề 190px ở trên chỉ đúng cho màn rộng, nơi cụm nút nổi Zalo/hotline đè lên
   nội dung. Ở màn hẹp nó lấy mất gần nửa bề ngang: công thức
   100vw - 190px cho ra 185px nội dung trên màn 375px. Trả lề về mức thường
   từ khổ máy tính bảng trở xuống. Khai lại ngay trên :root chứ không phải ở
   phần tử con, vì --max-width chỉ tính lại khi hai biến cùng một phần tử.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	:root { --max-padding: 30px; }
}