/* =====================================================================
   Responsive man hinh < 1024px (Figma mobile 390px).
   CHI them quy tac trong @media; khong sua CSS cua man hinh to.
   Nap sau cung trong layouts/site.blade.php de de len CSS tung trang.
   ===================================================================== */

/* Menu mobile la phan tu moi: man hinh to khong bao gio hien, ke ca khi dang mo roi keo rong cua so. */
@media (min-width: 1024px) {
    .mobile-drawer {
        display: none !important;
    }
}

@media (max-width: 1023.98px) {

    /* ===== HEADER (Figma 3361:10921) =====
       fixed thay cho sticky: sticky de mat tac dung tren dien thoai khi trang bi tran ngang.
       .site-shell chua san 64px phia tren de noi dung khong bi header che. */
    /* Cat moi phan tran ngang (hieu ung truot vao, khoi chua responsive) de trang luon rong bang man hinh. */
    html {
        overflow-x: hidden;
    }
    .site-shell {
        padding-top: 64px;
    }
    .site-header.simple-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        margin: 0;
        height: 64px;
        box-shadow: none;
        border-bottom: 1px solid #eceff2;
        box-sizing: border-box;
    }
    .site-header.simple-header .container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        padding: 0 12px 0 20px;
        box-sizing: border-box;
    }
    .site-header .site-nav,
    .site-header .login-button {
        display: none;
    }
    .site-logo img {
        width: 96px;
        height: 40px;
        max-width: none;
        max-height: none;
        border-radius: 8px;
    }
    .header-tools {
        gap: 15px;
    }
    .header-flag .contact-connect{
        width: auto;
        height: 42px;
        padding: 0 4px;
        border-radius: 36px;
        box-sizing: border-box;
    }
    .mobile-menu-button {
        display: block;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: url('/images/icons/mobile-menu.svg') center / 44px 44px no-repeat;
        font-size: 0;
        color: transparent;
    }

    /* ===== MENU MOBILE (Figma 3361:11196) ===== */
    .mobile-drawer-open,
    .mobile-drawer-open body {
        overflow: hidden;
    }
    .mobile-drawer {
        position: fixed;
        inset: 64px 0 0;
        z-index: 29;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px 20px 32px;
        background: #fff;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .mobile-drawer[hidden] {
        display: none;
    }
    .mobile-drawer-nav {
        display: flex;
        flex-direction: column;
    }
    .mobile-drawer-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px 0;
        border-bottom: 1px solid #f1f3f5;
    }
    .mobile-drawer-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 48px;
        padding: 0;
        border: 0;
        background: none;
        color: #101418;
        font: inherit;
        font-size: 17px;
        font-weight: 800;
        line-height: 24px;
        text-align: left;
        cursor: pointer;
    }
    .mobile-drawer-row img {
        width: 20px;
        height: 20px;
        flex: none;
    }
    .mobile-drawer-row.active,
    .mobile-drawer-row[aria-expanded="true"] {
        color: var(--primary);
    }

    /* Dau +/- ve bang CSS: thanh ngang 16x2 (Figma "Icon / Minus"), thanh doc chi hien khi dang dong. */
    .mobile-drawer-toggle {
        position: relative;
        width: 20px;
        height: 20px;
        flex: none;
    }
    .mobile-drawer-toggle::before,
    .mobile-drawer-toggle::after {
        content: '';
        position: absolute;
        left: 2px;
        top: 9px;
        width: 16px;
        height: 2px;
        border-radius: 1px;
        background: #b4bcc4;
    }
    .mobile-drawer-toggle::after {
        transform: rotate(90deg);
    }
    .mobile-drawer-row[aria-expanded="true"] .mobile-drawer-toggle::before {
        background: var(--primary);
    }
    .mobile-drawer-row[aria-expanded="true"] .mobile-drawer-toggle::after {
        display: none;
    }

    .mobile-drawer-sub {
        display: flex;
        flex-direction: column;
        padding: 4px 16px;
        border-radius: 14px;
        background: #fafbfc;
    }
    .mobile-drawer-sub[hidden] {
        display: none;
    }
    .mobile-drawer-sub a {
        display: flex;
        align-items: center;
        min-height: 48px;
        color: #474e5a;
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
    }

    .mobile-drawer-languages {
        display: flex;
        justify-content: center;
        gap: 39px;
        padding: 4px;
        border-radius: 14px;
        background: #f5f6f8;
    }
    .mobile-drawer-flag {
        display: flex;
        align-items: center;
        height: 42px;
        padding: 0 4px;
        border: 1px solid #dee4ea;
        border-radius: 36px;
        box-sizing: border-box;
        font-size: 19px;
    }
    .mobile-drawer-flag img {
        width: 33px;
        height: 33px;
        border-radius: 50%;
        object-fit: cover;
    }

    .mobile-drawer-login {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        height: 52px;
        border-radius: 26px;
        background: var(--primary);
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        line-height: 24px;
    }

    /* ===== NANG LUC VAN HANH (Figma 3361:10953) ===== */
    .operations {
        padding: 8px 0 40px;
        background: #fff;
    }
    .operations .op-layout {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .op-layout .section-title {
        color: #101418;
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
    }
    .op-layout .section-title .orange {
        color: inherit;
    }
    .op-layout .section-title br {
        display: none;
    }
    .op-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .op-metric {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 162px;
        padding: 8px 24px 8px 27px;
        border-radius: 16px 60px 16px 16px;
        background: #fff6ee;
        box-sizing: border-box;
    }
    .op-metric-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 16px;
        font-size: 30px;
    }
    .op-metric strong {
        margin-bottom: 6px;
    }

    /* ===== VE CHUNG TOI - trang chu (Figma 3361:10972) ===== */
    .about-modern {
        display: block;
        min-height: 0;
        padding: 36px 0;
        border-radius: 28px 28px 0 0;
        background: var(--primary);
        overflow: hidden;
    }
    .about-modern > .container {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .about-modern-grid {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }
    .about-modern .about-intro {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }
    .about-modern h2 {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
    }
    .about-lead {
        max-width: none;
        margin: 0;
    }
    .about-features {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width:100%
    }
    .about-feature {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 14px;
        border-radius: 16px;
        background: rgba(255, 255, 255, .12);
    }
    .about-feature-icon {
        flex: none;
        width: 48px;
        height: 48px;
        border-radius: 8px;
        background: #fff3e9;
    }
    .about-feature-icon img {
        width: 32px;
        height: 32px;
    }
    .about-feature > div:last-child {
        flex: 1;
        min-width: 0;
    }
    .about-feature h3 {
        margin: 0 0 4px;
        font-size: 15px;
        font-weight: 800;
        line-height: 22px;
    }
    .about-feature p {
        line-height: 23.6px;
        opacity: 1;
    }

    /* Chi so (trang chu + Gia tri cot loi o trang gioi thieu): vuot ngang bang tay de doc tiep. */
    :is(.about-modern, .core-values) .about-stats {
        flex-wrap: nowrap;
        gap: 41px;
        width: auto;
        margin-top: 22px;
        padding: 20px 30px;
        border-radius: 14px;
        background: #fbfbfb;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 30px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    :is(.about-modern, .core-values) .about-stats::-webkit-scrollbar {
        display: none;
    }
    :is(.about-modern, .core-values) .about-stats > div {
        flex: none;
        width: 160px;
        scroll-snap-align: start;
    }
    :is(.about-modern, .core-values) .about-stats strong {
        margin-bottom: 9px;
        line-height: 59px;
    }

    /* ===== DICH VU - trang chu (Figma 3361:11019) ===== */
    .service-showcase {
        padding: 40px 0;
        background: #fff;
    }
    /* display:contents tren .service-intro de dua nut "Xem tat ca" xuong duoi slider ma khong sua HTML. */
    .service-showcase .service-showcase-grid {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding-left: 20px;
        box-sizing: border-box;
    }
    .service-intro {
        display: contents;
    }
    .service-intro h2,
    .service-intro p {
        align-self: stretch;
        margin: 0;
        padding-right: 20px;
    }
    .service-intro h2 {
        order: 1;
        color: #101418;
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
    }
    .service-intro h2 .orange {
        color: inherit;
    }
    .service-intro p {
        order: 2;
        margin-top: -8px;
        color: #474e5a;
        font-size: 15px;
        line-height: 23px;
    }
    .service-slider {
        order: 3;
        align-self: stretch;
        display: block;
        min-width: 0;
    }
    .service-scrollbar {
        display: none;
    }
    .service-intro .contact-btn {
        order: 4;
    }

    .service-track {
        display: flex;
        gap: 14px;
        max-height: none;
        padding-right: 20px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        -webkit-overflow-scrolling: touch;
    }
    .service-slide {
        flex: none;
        display: flex;
        flex-direction: column;
        width: min(290px, calc(100vw - 60px));
        padding: 0 0 20px;
        border: 1px solid #eceff2;
        border-radius: 20px;
        background: #fff;
        overflow: hidden;
        box-sizing: border-box;
    }
    .service-slide-art {
        height: 170px;
        margin: 0;
        border-radius: 0;
    }
    .service-slide-art img {
        object-fit: cover;
    }
    .service-slide h3,
    .service-slide p,
    .service-slide .more {
        margin-left: 18px;
        margin-right: 18px;
    }
    .service-slide h3 {
        margin-top: 18px;
        margin-bottom: 10px;
        color: #101418;
        font-size: 17px;
        font-weight: 800;
        line-height: 24px;
    }
    .service-slide p {
        margin-top: 0;
        margin-bottom: 10px;
        color: #5b636b;
        font-size: 14px;
        line-height: 21px;
    }
    .service-slide .more {
        align-self: flex-start;
        padding: 2px 0;
        font-size: 14px;
        line-height: 22px;
    }

    /* ===== DOI TAC - trang chu (Figma 3361:11052) ===== */
    .partners {
        padding: 36px 0;
        background: #f7f8fa;
    }
    .partners > .container {
        width: 100%;
        padding-left: 20px;
        box-sizing: border-box;
    }
    .partners-head {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 18px;
        padding-right: 20px;
    }
    .partners-head .section-title {
        color: #101418;
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
    }
    .partners-head p {
        color: #5c6b7a;
        font-size: 16px;
        line-height: 25.6px;
    }
    .partners-row {
        gap: 12px;
    }
    .partner-card {
        width: 124px;
        height: 64px;
        flex: 0 0 124px;
        padding: 8px;
        border: 0;
        border-radius: 14px;
        box-sizing: border-box;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    

    /* ===== TIN TUC - trang chu (Figma 3393:4110) =====
       Quy tac the tin dung :is(.news, .news-index) de ap ca trang danh sach tin. */
    .news {
        padding: 20px 0;
    }
    /* display:contents tren .news-head de dua nut "Xem tat ca" xuong cuoi ma khong sua HTML. */
    .news > .container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .news .news-head {
        display: contents;
    }
    .news .news-head .section-title {
        order: 1;
        align-self: stretch;
        color: #101418;
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
    }
    .news .news-layout {
        order: 2;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        gap: 20px;
        height: auto;
    }
    .news .news-head .contact-btn {
        order: 3;
    }

    :is(.news, .news-index) .news-layout .news-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--primary);
        font-size: 12px;
        font-weight: 600;
        line-height: 18px;
        letter-spacing: 0;
        text-transform: none;
    }
    :is(.news, .news-index) .news-layout .news-meta time {
        margin-left: 0;
        color: #98a2ae;
        font-weight: 400;
    }

    :is(.news, .news-index) .news-layout .featured-news {
        border: 1px solid #eceff2;
        border-radius: 20px;
    }
    :is(.news, .news-index) .news-layout .featured-news img {
        flex: none;
        height: 196px;
        min-height: 0;
    }
    :is(.news, .news-index) .news-layout .featured-news .news-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 18px 18px 20px;
    }
    :is(.news, .news-index) .news-layout .featured-news .news-meta {
        gap: 10px;
    }
    :is(.news, .news-index) .news-layout .featured-news h3 {
        margin: 0;
        color: #101418;
        font-size: 18px;
        font-weight: 600;
        line-height: 26px;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
    :is(.news, .news-index) .news-layout .featured-news p {
        margin: 0;
        color: #5b636b;
        line-height: 21px;
    }

    :is(.news, .news-index) .news-layout .news-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    :is(.news, .news-index) .news-layout .news-item {
        display: flex;
        align-items: center;
        gap: 14px;
        border: 0;
        border-radius: 0;
        background: none;
        overflow: visible;
    }
    :is(.news, .news-index) .news-layout .news-thumb {
        flex: none;
        width: 96px;
        height: 96px;
        border-radius: 14px;
    }
    :is(.news, .news-index) .news-layout .news-item .news-body {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: 1;
        padding: 0;
    }
    :is(.news, .news-index) .news-layout .news-item h3 {
        margin: 0;
        color: #101418;
        font-size: 15px;
        font-weight: 600;
        line-height: 22px;
    }

    /* ===== TIN NOI BAT - trang danh sach tin (Figma 3361:12028) =====
       Dung chung quy tac voi tin trang chu o tren, chi khac so do. */
    main.news-index {
        width: 100%;
        padding: 32px 20px 80px;
        box-sizing: border-box;
    }
    .news-index .news-layout {
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: auto;
    }
    .news-index .news-layout .featured-news .news-body {
        padding: 18px;
    }
    .news-index .news-layout .news-list {
        gap: 16px;
    }
    .news-index .news-layout .news-item {
        align-items: flex-start;
        gap: 12px;
    }
    .news-index .news-layout .news-thumb {
        width: 84px;
        height: 84px;
        border-radius: 12px;
    }
    .news-index .news-layout .news-item h3 {
        font-size: 14px;
        line-height: 20px;
    }

    /* ===== DANG KY NHAN TIN (Figma 3393:4045) =====
       Nen section doi sang gradient nhat, noi dung nam trong the cam bo goc. */
    .newsletter {
        min-height: 0;
        padding: 20px;
        border-radius: 0;
        background: linear-gradient(0deg, #fff 0%, #fff3e9 122.37%);
        box-sizing: border-box;
    }
    .newsletter > .newsletter-inner {
        display: block;
        width: 100%;
        min-height: 0;
        padding: 24px 20px;
        border-radius: 22px;
        background: var(--primary);
        box-sizing: border-box;
    }
    .newsletter-inner > div {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    /* Anh minh hoa chi co tren mobile nen ve bang ::before, khong them the img vao HTML. */
    .newsletter-inner > div::before {
        content: '';
        height: 120px;
        border-radius: 14px;
        background: url('/images/newsletter-mobile.png') center / cover no-repeat;
    }
    .newsletter h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        line-height: 28px;
    }
    .subscribe-form {
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-width: none;
    }
    .subscribe-form > input,
    .subscribe-form > .subscribe-btn {
        grid-row: auto;
    }
    .subscribe-form input {
        flex: none;
        height: 52px;
        padding: 0 16px;
        border-radius: 12px;
        box-shadow: none;
        font-size: 15px;
        line-height: 22px;
    }
    .subscribe-form input::placeholder {
        color: #98a2ae;
    }
    .subscribe-form .subscribe-btn {
        align-self: center;
        height: 50px;
        padding: 0 30px 0 3px;
    }
    .subscribe-btn b {
        width: 42px;
        height: 42px;
    }
    .subscribe-form .field-error {
        margin: -6px 0 0 4px;
    }
    .newsletter .success {
        margin-top: 0;
        font-size: 15px;
    }

    /* ===== FOOTER (Figma 3361:11125) =====
       Xep doc theo thu tu thiet ke bang display:contents + order, khong sua HTML.
       Nhom lien ket thu gon/mo bang +/- (JS trong partials/footer them class is-open). */
    footer {
        padding: 32px 0 40px;
        background: linear-gradient(270deg, #fff3e9 0%, #ffd9b7 99.97%);
    }
    footer > .container {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .footer-grid {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }
    .footer-brand {
        display: contents;
    }
    .footer-brand > img,
    .footer-brand > .logo {
        order: 1;
        align-self: flex-start;
    }
    .footer-brand > img {
        width: 114px !important;
        height: 56px !important;
    }
    .footer-grid .footer-brand > p {
        order: 2;
        margin: 0;
        color: #6b5b52;
        font-size: 14px;
        line-height: 21px;
    }
    .footer-grid .socials {
        order: 6;
        margin-top: 0;
    }
    .footer-grid .socials a {
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 999px;
        background: #fff;
    }
    .footer-grid .socials svg {
        width: 20px;
        height: 20px;
    }

    /* Lien ket nhanh, Dich vu, Ho tro khach hang (.footer-contact): thu gon/mo bang +/-. */
    .footer-links,
    .footer-contact {
        order: 3;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 16px 0;
        border-bottom: 1px solid #f1dfd4;
    }
    .footer-links + .footer-links,
    .footer-links + .footer-contact {
        margin-top: -22px;
    }
    .footer-grid :is(.footer-links, .footer-contact) h3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 32px;
        margin: 0;
        color: #101418;
        font-size: 16px;
        font-weight: 800;
        line-height: 24px;
        cursor: pointer;
    }
    :is(.footer-links, .footer-contact) h3::after {
        content: '';
        flex: none;
        width: 20px;
        height: 20px;
        background:
            linear-gradient(var(--primary), var(--primary)) center / 16px 2px no-repeat,
            linear-gradient(var(--primary), var(--primary)) center / 2px 16px no-repeat;
    }
    :is(.footer-links, .footer-contact).is-open h3 {
        margin-bottom: -2px;
    }
    :is(.footer-links, .footer-contact).is-open h3::after {
        background: linear-gradient(var(--primary), var(--primary)) center / 16px 2px no-repeat;
    }
    .footer-links a {
        display: none;
        margin: 0;
        color: #6b5b52;
        font-size: 15px;
        line-height: 22px;
    }
    .footer-links.is-open a {
        display: block;
    }
    .footer-grid .footer-contact .contact-line {
        display: none;
    }
    .footer-grid .footer-contact.is-open .contact-line {
        display: grid;
    }
    .footer-apps h3 {
        display: none;
    }
    .footer-grid .contact-line {
        grid-template-columns: 20px 1fr;
        gap: 12px;
        margin: 0;
    }
    .contact-line b svg {
        width: 20px;
        height: 20px;
    }
    .contact-line span {
        color: #3a2f29;
        font-size: 15px;
        line-height: 22px;
    }

    .footer-apps {
        order: 5;
        display: flex;
        gap: 12px;
    }
    .footer-apps a {
        flex: 1;
        min-width: 0;
        gap: 10px;
        margin: 0;
        padding: 8px 12px;
        background: #0d0d0d;
        font-size: 14px;
        font-weight: 600;
        line-height: 19px;
    }
    .footer-apps a svg {
        width: 24px;
        height: 24px;
    }
    .footer-apps a small {
        font-size: 8px;
        line-height: 12px;
        letter-spacing: .4px;
    }

    footer .copyright {
        margin-top: 22px;
        padding-top: 0;
        border-top: 0;
        color: #8a7a70;
        font-size: 13px;
        line-height: 20px;
    }

    /* ===== THAO TAC NHANH (partials/float-actions): an tren dien thoai ===== */
    .float-actions {
        display: none;
    }

    /* ===== CHI TIET TIN: Tin lien quan + Bai viet noi bat (Figma 3393:6862, 3393:6885) =====
       Bo cuc 1 cot: aside von nam sau bai viet trong HTML nen tu xuong cuoi. */
    .article-page {
        padding-bottom: 0;
    }

    /* ===== CHI TIET TIN: breadcrumb + mo bai + noi dung (Figma 3393:6684, 3393:6688) ===== */
    main.article-page {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .article-page .page-crumbs {
        gap: 8px;
        margin: 0 -20px;
        padding: 14px 20px;
        background: #f7f8fa;
        color: #7d858f;
        font-size: 13px;
        line-height: 20px;
    }
    .article-page .page-crumbs svg {
        width: 14px;
        height: 14px;
        color: #101418;
    }
    .article-page .page-crumbs span {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        color: #101418;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .article-page .article-head {
        padding-top: 24px;
    }
    .article-page .article-head h1 {
        margin: 0 0 16px;
        color: #101418;
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
    }
    .article-page .article-head .tag {
        display: block;
        color: #7d858f;
        font-size: 13px;
        font-weight: 500;
        line-height: 18px;
    }
    .article-page .article-head .summary {
        margin: 16px 0 0;
        color: #474e5a;
        font-size: 15px;
        line-height: 24px;
    }
    .article-page .cover {
        height: 230px;
        margin: 16px 0 0;
        border-radius: 16px;
    }
    .article-page .article-body {
        margin-top: 16px;
        color: #474e5a;
        font-size: 15px;
        font-weight: 400;
        line-height: 24px;
    }
    .article-page .article-body h2 {
        color: #101418;
        font-size: 20px;
        line-height: 28px;
    }
    .article-page .article-body h3 {
        color: #101418;
        font-size: 18px;
        line-height: 26px;
    }

    /* Nut chia se: 1 hang ngang, khong du cho thi vuot ngang. */
    .article-page .article-share {
        flex-wrap: nowrap;
        gap: 10px;
        margin: 24px -20px 0;
        padding: 0 20px 24px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .article-page .article-share::-webkit-scrollbar {
        display: none;
    }
    .article-page .article-share-button {
        flex: none;
        gap: 10px;
        padding-right: 16px;
        font-size: 14px;
        white-space: nowrap;
    }
    .article-page .article-share-button:hover {
        transform: none;
    }
    .article-page .article-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .article-page .side {
        position: static;
        gap: 0;
        margin: 0 calc(50% - 50vw);
    }
    .article-page .side-block {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 24px 20px;
        border-radius: 0;
        background: #f7f8fa;
    }
    .article-page .side h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
    }
    .article-page .related,
    .article-page .featured-post {
        grid-template-columns: 84px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: center;
        gap: 6px 12px;
        padding: 0;
    }
    .article-page .related img,
    .article-page .featured-post img {
        width: 84px;
        height: 84px;
        align-self: center;
        border-radius: 12px;
    }
    .article-page .related span,
    .article-page .featured-post span {
        align-self: end;
        color: #101418;
        font-size: 14px;
        line-height: 20px;
    }
    .article-page .related time,
    .article-page .featured-post time {
        color: #474e5a;
        font-size: 16px;
        line-height: 17.6px;
        letter-spacing: 1.1px;
    }
    .article-page .related time svg,
    .article-page .featured-post time svg {
        width: 20px;
        height: 20px;
    }

    /* ===== TAT CA BAI VIET - trang danh sach tin (Figma 3361:12035) ===== */
    main.news-index {
        padding-bottom: 32px;
    }
    
    .all-news-head {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        margin-bottom: 20px;
    }
    .all-news-head h2 {
        color: #101418;
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
    }

    /* Chip loc: vuot ngang tran ra mep man hinh. news-filters.js ghi width/transform inline khi co > 4 chip,
       nen tren mobile phai ghi de bang !important va an nut mui ten. */
    .news-filters {
        margin: 0 -20px;
    }
    .news-filters-nav {
        display: none !important;
    }
    .news-filters-track,
    .news-filters-track.is-sliding {
        flex: 1;
        width: auto !important;
        max-width: none;
        gap: 10px;
        padding: 0 20px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .news-filters-track::-webkit-scrollbar {
        display: none;
    }
    .news-filters-row {
        gap: 10px;
        transform: none !important;
    }
    .news-filters a {
        padding: 10px 18px;
        border: 0;
        background: #f5f6f8;
        color: #474e5a;
        font-weight: 600;
        line-height: 20px;
    }
    .news-filters a.active {
        background: var(--primary);
        color: #fff;
    }

    .all-news-list {
        gap: 20px;
    }
    .all-news-item {
        display: flex;
        flex-direction: column;
        gap: 0;
        border: 1px solid #eceff2;
        border-radius: 20px;
        background: #fff;
        overflow: hidden;
    }
    .all-news-item img {
        width: 100%;
        height: 196px;
        border-radius: 0;
    }
    .all-news-item > div {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 18px;
        width:100%
    }
    .all-news-item .news-meta {
        gap: 10px;
        line-height: 18px;
        text-transform: none;
    }
    .all-news-item .news-meta span {
        padding: 4px 10px;
        border-radius: 999px;
        background: #fff3ec;
        color: var(--primary);
        font-weight: 600;
    }
    .all-news-item .news-meta time {
        color: #98a2ae;
        font-weight: 400;
    }
    .all-news-item h3,
    .all-news-item p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0;
    }
    .all-news-item h3 {
        color: #101418;
        font-size: 18px;
        line-height: 26px;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
    .all-news-item p {
        color: #5b636b;
        font-size: 14px;
        line-height: 21px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    /* Phan trang: an nut ve trang dau/cuoi, o 40px co lai neu nhieu so de khong tran. */
    .all-news .site-pagination {
        margin-top: 28px;
    }
    .all-news .site-pagination > :first-child,
    .all-news .site-pagination > :last-child {
        display: none;
    }
    .all-news .site-pagination a,
    .all-news .site-pagination span {
        flex: 0 1 40px;
        min-width: 32px;
        height: 40px;
        padding: 0;
        border-radius: 12px;
        background: #f5f6f8;
        color: #474e5a;
        font-weight: 600;
    }
    .all-news .site-pagination .current {
        background: var(--primary);
        color: #fff;
        font-weight: 600;
    }
    .all-news .site-pagination .disabled {
        opacity: .45;
        color: #474e5a;
    }
    .all-news .site-pagination .ellipsis {
        min-width: 32px;
        letter-spacing: 0;
    }

    /* ===== CHU TREN BANNER CAC TRANG (Figma 3393:6681) =====
       .page-hero: gioi thieu, dich vu, lien he, FAQ, quy dinh, buu cuc, tra cuu...
       .news-masthead: tin tuc, tuyen dung. */
    .page-hero h1,
    .page-hero-banner h1,
    .news-masthead h1 {
        margin: 0 0 10px;
        font-size: 28px;
        font-weight: 800;
        line-height: 36px;
    }
    .page-hero-lead,
    .page-hero-banner .page-hero-lead,
    .news-masthead p {
        font-size: 14px;
        line-height: 22px;
    }
    /* Noi dung dau tien duoi banner cach 32px (breadcrumb hoac khoi dau trang).
       Breadcrumb rong (FAQ) an di de khong cong them khoang trong. */
    .page-crumbs {
        padding-top: 32px;
        font-size: 13px;
    }
    .page-crumbs:not(:has(*)) {
        display: none;
    }
    .contact-page {
        padding-top: 32px;
    }

    /* ===== TRANG LIEN HE (Figma 3393:7395 form, 3393:7418 thong tin) =====
       Form la the trang bo goc 20px tren nen xam full width; thong tin ket noi la dai xam ben duoi. */
    .contact-page {
        padding-bottom: 0;
        background: #f5f6f8;
    }
    .contact-page-grid {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        padding: 0;
        border-radius: 0;
        background: transparent;
    }
    .contact-card {
        margin: 0 20px 24px;
        border-radius: 20px;
        box-shadow: 0 10px 28px rgb(0 0 0 / .08);
    }
    .contact-card-head {
        padding: 16px 20px;
        font-size: 18px;
        line-height: 24px;
    }
    .contact-form {
        gap: 16px;
        padding: 20px 20px 24px;
    }
    .contact-form .field {
        gap: 8px;
    }
    .contact-form label {
        color: #101418;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0;
    }
    .contact-form input,
    .contact-form textarea {
        padding: 0 16px;
        border-color: #e4e8ec;
        border-radius: 12px;
        background: #f7f8fa;
        font-size: 15px;
        line-height: 22px;
    }
    .contact-form input {
        height: 52px;
    }
    .contact-form textarea {
        height: 120px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
        color: #98a2ae;
    }
    .contact-submit {
        height: 50px;
        padding: 0 24px;
        font-size: 15px;
        line-height: 24px;
    }
    .contact-connect {
        height: auto;
        min-height: 0;
        padding: 32px 20px;
        border-radius: 0;
        background: #f6f6f6;
    }
    .contact-connect h2 {
        margin: 0 0 20px;
        font-size: 24px;
        line-height: 32px;
    }
    .contact-connect-line {
        grid-template-columns: 20px minmax(0, 1fr);
        margin: 0;
    }
    .contact-connect-line + .contact-connect-line {
        margin-top: 37px;
    }
    .contact-connect-line svg {
        width: 20px;
        height: 20px;
        margin-top: 2px;
    }
    .contact-connect-line span {
        margin-bottom: 7px;
    }
    .contact-connect-line span,
    .contact-connect-line b {
        font-size: 20px;
        line-height: 24px;
        overflow-wrap: anywhere;
    }
    .contact-connect h3 {
        margin: 20px 0 12px;
        font-size: 18px;
        line-height: 26px;
    }
    .contact-connect-socials {
        gap: 14px;
    }
    .contact-connect-socials a {
        width: 46px;
        height: 46px;
        border-radius: 12px;
    }
    .contact-connect-socials svg {
        width: 20px;
        height: 20px;
    }

    /* ===== GIOI THIEU: Vai net ve chung toi (Figma 3393:7982) =====
       Chi xep anh tren, chu duoi va doi co chu; anh va khoang cach giu nhu desktop. */
    .about-intro-block {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding-top: 32px;
    }
    .about-intro-copy h2 {
        font-size: 28px;
        font-weight: 800;
        line-height: 36px;
    }
    .about-intro-copy .about-intro-brand {
        font-size: 19px;
        line-height: 23.6px;
    }
    .about-intro-copy p {
        font-size: 15px;
        line-height: 24px;
    }

    /* ===== GIOI THIEU: Tam nhin & Su menh (Figma 3393:7988) =====
       Giu anh nen nhu desktop; bo dinh vi tuyet doi de xep doc thanh 2 the trang. */
    .about-vision {
        display: flex;
        flex-direction: column;
        gap: 20px;
        aspect-ratio: auto;
        padding: 36px 20px;
    }
    .about-vision-panel {
        display: flex;
        flex-direction: column;
        gap: 20px;
        min-height: 0;
        padding: 0;
    }
    .about-vision-watermark {
        position: static;
        color: rgba(255, 255, 255, .14);
        font-size: 40px;
        font-weight: 800;
        line-height: 44px;
        letter-spacing: 0;
    }
    .about-vision-head {
        margin: 0;
    }
    .about-vision-head h2 {
        font-size: 30px;
        line-height: 38px;
    }
    .about-vision-logo {
        display: none;
    }
    .about-vision-items {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0;
    }
    .about-vision-item,
    .about-vision-item-mission {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        margin: 0;
        padding: 20px;
        border-radius: 20px;
        background: #fff;
    }
    .about-vision-item h3,
    .about-vision-item p {
        transform: none;
    }
    .about-vision-icon {
        position: static;
        width: 44px;
        height: 44px;
        border-radius: 999px;
        background: #fff3ec;
        box-shadow: none;
    }
    .about-vision-icon img,
    .about-vision-icon svg {
        width: 22px;
        height: 22px;
    }
    .about-vision-item h3 {
        margin: 0;
        color: #101418;
        font-size: 24px;
        font-weight: 800;
        line-height: 32px;
    }
    .about-vision-item p {
        grid-column: 1 / -1;
        color: #474e5a;
        font-size: 14px;
        line-height: 22px;
    }

    /* ===== GIOI THIEU: Gia tri cot loi (Figma 3393:8006) + chi so (3393:8015) =====
       Anh nam tren (ve bang ::before tu bien --core-values-image inline), noi dung nen gradient ben duoi.
       !important de bo background-image inline cua banner. */
    .core-values {
        width: 100%;
        padding: 32px 20px 8px;
        box-sizing: border-box;
    }
    .core-values-banner {
        aspect-ratio: auto;
        border-radius: 24px;
        background-image: linear-gradient(180deg, #ff5100, #ff6b1a) !important;
        overflow: hidden;
    }
    .core-values-banner::before {
        content: '';
        display: block;
        height: 220px;
        background: var(--core-values-image) center / cover no-repeat;
    }
    .core-values-copy {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: auto;
        padding: 20px 20px 24px;
        transform: none;
    }
    .core-values-copy h2 {
        margin: 0;
        font-size: 26px;
        font-weight: 800;
        line-height: 34px;
    }
    .core-values-copy h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
    }
    .core-values-copy p {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        line-height: 23.6px;
    }
    .core-values .about-stats {
        margin: 16px 0 0;
        box-shadow: none;
    }

    /* ===== GIOI THIEU: Vi sao nen chon chung toi - xep doc (Figma 3393:8032) ===== */
    .about-reasons {
        width: 100%;
        padding: 8px 20px 36px;
        box-sizing: border-box;
    }
    .about-reasons .section-title {
        margin-bottom: 18px;
        color: #101418;
        font-size: 26px;
        font-weight: 800;
        line-height: 34px;
        text-align: left;
    }
    .about-reasons-grid {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .about-reason {
        padding: 14px;
        border: 1px solid #eceff2;
        border-radius: 16px;
        background: #fff;
    }
    .about-reason-icon {
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 12px;
        box-sizing: border-box;
    }
    .about-reason-icon svg {
        width: 26px;
        height: 26px;
    }
    .about-reason > div {
        flex: 1;
        min-width: 0;
    }
    .about-reason h3 {
        margin: 0 0 4px;
        color: #101418;
        font-size: 17px;
        font-weight: 800;
        line-height: 24px;
    }
    .about-reason p {
        color: #5b636b;
        font-size: 14px;
        line-height: 21px;
    }

    /* ===== TRANG QUY DINH: Tat ca quy dinh (Figma 3393:8452) =====
       The xep doc: icon, tieu de, mo ta, "Xem chi tiet". Nen trang giu nhu desktop. */
    .regulations-page {
        width: 100%;
        padding: 32px 20px 40px;
        box-sizing: border-box;
    }
    .regulations-page h2 {
        margin: 0 0 18px;
        color: #101418;
        font-size: 26px;
        font-weight: 800;
        line-height: 34px;
    }
    .regulation-list {
        gap: 14px;
    }
    .regulation-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 18px;
        border-color: #eceff2;
        border-radius: 16px;
    }
    .regulation-icon {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        background: #fff3e9;
    }
    .regulation-icon svg {
        width: 32px;
        height: 32px;
    }
    .regulation-copy {
        gap: 12px;
    }
    .regulation-copy b {
        color: #101418;
        font-size: 18px;
        line-height: 26px;
    }
    .regulation-copy span {
        color: #5c6b7a;
        font-size: 14.5px;
        line-height: 23.2px;
    }
    .regulation-more {
        font-size: 14px;
        line-height: 22px;
    }

    /* ===== TRANG FAQ: chuyen muc nam ngang vuot duoc + co chu (Figma 3361:13646, 3361:13692) ===== */
    .faq-page {
        width: 100%;
        padding-top: 32px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    .faq-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .faq-categories {
        display: flex;
        gap: 10px;
        margin: 0 -20px;
        padding: 0 20px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .faq-categories::-webkit-scrollbar {
        display: none;
    }
    .faq-category {
        flex: none;
        gap: 8px;
        padding: 12px 16px;
        border-color: #e4e8ec;
        border-radius: 12px;
        font-size: 14px;
        line-height: 20px;
        white-space: nowrap;
    }
    .faq-category-icon,
    .faq-category.active .faq-category-icon {
        width: 18px;
        height: 18px;
        background: none;
    }
    .faq-category-icon svg {
        width: 18px;
        height: 18px;
    }
    .faq-content h2 {
        margin-bottom: 14px;
        color: #1f1d1a;
        font-size: 22px;
        line-height: 28px;
    }
    .faq-item {
        margin-bottom: 10px;
        border-color: #e4e8ec;
        border-radius: 12px;
    }
    .faq-item summary {
        gap: 12px;
        padding: 16px;
        color: #18181b;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
    }
    .faq-item summary svg {
        width: 20px;
        height: 20px;
    }
    .faq-answer {
        padding: 0 16px 16px;
    }

    /* ===== TRANG DICH VU (Figma 3361:13940 carousel, 3361:13949 nhom 1 dich vu) ===== */
    .services-index {
        width: 100%;
        gap: 36px;
        padding: 32px 20px 40px;
        box-sizing: border-box;
    }
    .services-group .section-title,
    .services-feature-copy .section-title {
        margin: 0 0 16px;
        color: #101418;
        font-size: 28px;
        font-weight: 800;
        line-height: 36px;
    }

    /* Nhom nhieu dich vu: vuot ngang tran mep phai. services-scroll ghi transform inline va
       dat overflow:hidden, nen tren mobile ghi de bang !important va an nut mui ten. */
    .services-nav {
        display: none !important;
    }
    .services-track,
    .services-track.is-sliding {
        gap: 14px;
        margin-right: -20px;
        padding-right: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .services-row {
        gap: 14px;
        transform: none !important;
        transition: none;
    }
    .services-card {
        width: min(290px, calc(100vw - 60px));
        max-height: none;
        gap: 10px;
        padding-bottom: 20px;
        border: 1px solid #eceff2;
        border-radius: 20px;
        background: #fff;
        overflow: hidden;
        scroll-snap-align: start;
        box-sizing: border-box;
    }
    .services-card-art {
        height: 170px;
        aspect-ratio: auto;
        margin-bottom: 8px;
        border-radius: 0;
        background: #fff2ea;
    }
    .services-card h3,
    .services-card p,
    .services-card .services-more {
        margin-left: 18px;
        margin-right: 18px;
    }
    .services-card h3 {
        margin-top: 0;
        color: #101418;
        font-size: 17px;
        line-height: 24px;
    }
    .services-card p {
        color: #5b636b;
        font-size: 14px;
        line-height: 21px;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
    .services-more {
        padding: 10px 24px;
        font-size: 14px;
        line-height: 24px;
    }

    /* Nhom 1 dich vu: anh tren, roi chu, roi nut. */
    .services-feature {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 0;
    }
    .services-group-alt .services-feature {
        padding: 20px;
    }
    .services-feature-art,
    .services-group-alt .services-feature-art {
        order: 0;
        height: 220px;
        aspect-ratio: auto;
        border-radius: 20px;
    }
    .services-feature-copy {
        gap: 16px;
    }
    .services-feature-copy .section-title {
        margin: 0;
    }
    .services-feature-copy p {
        color: #3a4149;
        font-size: 15px;
        line-height: 24px;
    }
    .services-feature-copy .services-more {
        margin-top: 0;
    }

    /* ===== CHI TIET DICH VU: Gioi thieu (Figma 3361:14061) ===== */
    .service-page {
        width: 100%;
        padding: 0 20px 40px;
        box-sizing: border-box;
    }
    .service-page-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 24px 0 32px;
    }
    .service-page-grid > div:first-child {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .service-page-art {
        display: block;
        order: -1;
    }
    .service-page-art img {
        width: 100%;
        height: 230px;
        border-radius: 24px;
        background: #fff2ea;
        object-fit: cover;
    }
    .service-page-grid h2 {
        margin: 0;
        color: #101418;
        font-size: 30px;
        font-weight: 800;
        line-height: 38px;
    }
    .service-page-lead {
        max-width: none;
        margin: 0;
        color: #474e5a;
        font-size: 15px;
        line-height: 24px;
    }
    .service-page-actions {
        flex-wrap: nowrap;
        gap: 10px;
    }
    .service-page-actions .contact-btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
        font-size: 14px;
        line-height: 20px;
        white-space: nowrap;
    }

    /* ===== CHI TIET DICH VU: Giai phap + Uu diem - xep doc, anh full chieu rong (Figma 3361:14073, 3361:14076) ===== */
    .service-solution-block,
    .service-advantages-block {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 36px 20px 12px;
        text-align: left;
    }
    .service-advantages-block {
        gap: 16px;
        padding: 24px 20px 40px;
    }
    .service-solution-block h2,
    .service-advantages-block h2 {
        margin: 0;
        color: #101418;
        font-size: 26px;
        font-weight: 800;
        line-height: 34px;
    }
    .service-solution-block img {
        height: 210px;
        max-height: none;
        border-radius: 20px;
    }
    .service-advantages-block img {
        height: 230px;
        max-height: none;
        border-radius: 20px;
    }
    /* site.css dat co chu bang !important cho noi dung CMS nen phai ghi de tuong tu. */
    .service-advantages-copy > :first-child,
    .service-advantages-copy > :first-child * {
        font-size: 26px !important;
        font-weight: 800 !important;
        line-height: 34px;
    }
    .service-advantages-copy h2 {
        margin-bottom: 16px;
    }
    .service-advantages-copy > :not(:first-child),
    .service-advantages-copy > :not(:first-child) * {
        color: #474e5a;
        font-size: 15px !important;
        line-height: 24px;
    }

    /* ===== CHI TIET DICH VU: noi dung / bang gia (Figma 3361:14080) =====
       Noi dung nhap tu CMS, site.css dat co chu bang !important nen ghi de tuong tu.
       Bang nhieu cot khong vua man hinh -> cho vuot ngang thay vi bi cat. */
    .service-page-body {
        margin-top: 0;
        padding: 36px 0 0;
        font-size: 15px;
        line-height: 24px;
    }
    .service-page-body h2,
    .service-page-body h1,
    .service-page-body h2 *,
    .service-page-body h1 * {
        margin: 0 0 16px;
        font-size: 26px !important;
        font-weight: 800 !important;
        line-height: 34px;
    }
    #pricing p,
    #pricing p span {
        margin: 0 0 16px;
        font-size: 15px !important;
        line-height: 24px;
    }
    .service-page-body table {
        display: block;
        margin-bottom: 16px;
        max-width: 100%;
        overflow-x: auto;
        border-radius: 20px;
        -webkit-overflow-scrolling: touch;
    }
    .service-page-body th,
    .service-page-body thead th {
        font-size: 13px !important;
        line-height: 18px;
    }
    .service-page-body td {
        font-size: 14px;
        line-height: 20px;
    }
    /* Chi bang tu 3 cot tro len (vuot ngang) moi giu chu tren 1 dong; bang 2 cot de tu xuong dong. */
    .service-page-body table:has(tr > :nth-child(3)) :is(th, td) {
        white-space: nowrap;
    }

    /* ===== CHI TIET DICH VU: Dich vu lien quan - thu nho (Figma 3361:14215) ===== */
    .related-services {
        width: 100%;
        padding: 36px 0 40px;
    }
    .related-services-head {
        margin-bottom: 20px;
        padding: 0 20px;
    }
    .related-services-head .section-title {
        color: #101418;
        font-size: 26px;
        font-weight: 800;
        line-height: 34px;
    }
    .related-services-nav {
        display: none;
    }
    .services-track.related-track {
        gap: 14px;
        margin-right: 0;
        padding: 0 20px;
        scroll-padding-left: 20px;
    }
    .related-track .services-row {
        width: max-content;
        gap: 14px;
    }
    .services-card.related-card {
        flex: none;
        width: min(290px, calc(100vw - 60px));
        gap: 10px;
        padding: 0 0 20px;
        border-color: #eceff2;
    }
    .services-card.related-card .services-card-art {
        height: 170px;
        max-height: none;
        aspect-ratio: auto;
        margin-bottom: 8px;
        border-radius: 0;
        background: #fff2ea;
    }
    .services-card.related-card h3 {
        margin: 0 18px;
        font-size: 17px;
        line-height: 24px;
    }
    .services-card.related-card p {
        margin: 0 18px;
        font-size: 14px;
        line-height: 21px;
    }
    .related-more {
        font-size: 14px;
        line-height: 22px;
        padding: 0px 18px;
    }
    .related-more b svg {
        transform: rotate(0deg);
    }


    /* ===== TRA CUU - trang chu (Figma 3402:9928) =====
       .tabs va .tool-panel la 2 khoi rieng; ghep thanh 1 the trang, clip-path cat bong o cho noi. */
    .quick {
        padding: 24px 20px 32px;
    }
    .quick .tabs {
        display: flex;
        gap: 8px;
        padding: 18px 0 0 18px;
        border-radius: 20px 20px 0 0;
        background: #fff;
        box-shadow: 0 12px 32px rgba(15, 20, 26, .14);
        clip-path: inset(-40px -40px 0 -40px);
        overflow-x: auto;
        scroll-padding-left: 18px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .quick .tabs::-webkit-scrollbar {
        display: none;
    }
    .quick .tabs::after {
        content: '';
        flex: none;
        width: 10px;
    }
    .quick .tab {
        flex: none;
        gap: 8px;
        height: 40px;
        padding: 0 14px;
        border-radius: 999px;
        background: #f5f6f8;
        color: #474e5a;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        white-space: nowrap;
    }
    .quick .tab.active {
        background: var(--primary);
        color: #fff;
    }
    .quick .tab svg {
        height: 18px;
    }
    .quick .tool-panel {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding: 18px 18px 22px;
        border-radius: 0 0 20px 20px;
        box-shadow: 0 12px 32px rgba(15, 20, 26, .14);
        clip-path: inset(0 -40px -40px -40px);
    }

    /* Tra cuu van don: xep doc, bo anh minh hoa. */
    .quick .track-art {
        display: none;
    }
    .quick .tool-copy h2 {
        margin: 0 0 18px;
        color: #101418;
        font-size: 15px;
        font-weight: 600;
        line-height: 22px;
    }
    .quick .tool-copy > p {
        margin: 0;
        color: #7d858f;
        font-size: 13px;
        line-height: 19px;
    }
    .quick .track-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        margin-top: 18px;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .quick .track-form input {
        flex: none;
        height: 52px;
        padding: 0 16px;
        border: 1px solid #e4e8ec;
        border-radius: 12px;
        background: #f7f8fa;
        font-size: 15px;
        line-height: 22px;
        box-sizing: border-box;
    }
    .quick .track-input .field-error {
        margin-left: 4px;
    }
    .quick .track-form > .btn {
        grid-column: 1;
        grid-row: auto;
        justify-self: stretch;
        height: 50px;
        padding: 0 24px;
        border-radius: 26px;
        font-size: 15px;
        line-height: 24px;
    }

    /* ===== TRA CUU: tab Tim buu cuc (Figma 3361:11256) =====
       Dung chung cho tab tren trang chu va trang /offices (cung partial tools/office).
       Thu tu: o tim kiem, 3 bo loc, ban do, danh sach. */
    .office-panel .office-search {
        gap: 18px;
        padding: 0;
    }
    .office-panel .office-search-field label {
        color: #101418;
        font-size: 14px;
        line-height: 20px;
    }
    .office-panel .office-search-input input {
        height: 48px;
        padding: 0 44px 0 14px;
        border-color: #e4e8ec;
        border-radius: 12px;
        background: #f7f8fa;
        font-size: 14px;
        line-height: 20px;
        text-overflow: ellipsis;
    }
    .office-panel .office-search-input input::placeholder {
        color: #98a2ae;
    }
    .office-panel .office-search-input svg {
        right: 14px;
        width: 20px;
        height: 20px;
    }
    .office-panel .office-search-filters {
        flex-wrap: wrap;
        gap: 8px;
    }
    .office-panel .office-search-filters .office-search-field {
        flex: 1 1 0;
    }
    /* Dong trang thai tai danh muc (geography.js chen vao) xuong hang rieng. */
    .office-panel .office-search-filters .geography-status {
        flex: 0 0 100%;
        order: 1;
    }
    .office-panel .office-search .office-search-filters select {
        min-width: 0;
        height: 38px;
        padding: 0 34px 0 14px;
        border: 0;
        background-color: #f5f6f8;
        background-position: right 12px center;
        background-size: 16px 16px;
        color: #18181b;
        font-size: 14px;
        font-weight: 500;
        text-overflow: ellipsis;
    }

    .office-panel .office-layout {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-top: 18px;
        padding: 0;
    }
    .office-panel .office-map {
        order: -1;
        height: 280px;
        border-radius: 14px;
    }
    .office-panel #office-map {
        min-height: 280px;
    }
    /* Danh sach cao vua phan con lai cua man hinh duoi ban do, cuon ben trong de ban do luon trong tam nhin.
       360px = header 64 + ban do 210 + khoang cach 18 + dong trang thai ~28 + le duoi the ~40. */
    .office-panel .office-list {
        max-height: max(240px, calc(100vh - 360px));
        max-height: max(240px, calc(100dvh - 360px));
        gap: 0;
        padding-right: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .office-panel .office-card {
        padding: 14px 52px 14px 0;
        border: 0;
        border-bottom: 1px solid #eceff2;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    .office-panel .office-card:last-child {
        border-bottom: 0;
    }
    .office-panel .office-card:hover,
    .office-panel .office-card.active {
        border-color: #eceff2;
        box-shadow: none;
    }
    .office-panel .office-card h3 {
        margin: 0 0 6px;
        color: #101418;
        font-size: 16px;
        line-height: 22px;
    }
    .office-panel .office-card-title {
        font-size: 16px;
        font-weight: 600;
    }
    .office-panel .office-line {
        gap: 8px;
        margin-bottom: 6px;
        color: #5c6b7a;
        font-size: 14px;
        line-height: 20px;
    }
    .office-panel .office-line:last-of-type {
        margin-bottom: 0;
    }
    .office-panel .office-line svg {
        width: 16px;
        height: 16px;
    }
    .office-panel .office-card-locate {
        top: 50%;
        right: 0;
        bottom: auto;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        transform: translateY(-50%);
    }
    .office-panel .office-card-locate:hover {
        transform: translateY(-50%) scale(1.06);
    }
    .office-panel .office-card-locate svg {
        width: 18px;
        height: 18px;
    }

    /* ===== TRA CUU: tab Uoc tinh cuoc (Figma 3361:11757) =====
       Tinh full ngang, Muong + Ban chia doi; loai hang va trong luong xep doc; 3 kich thuoc 1 hang. */
    .quick .tool-panel.estimate-panel.active {
        padding: 18px 18px 22px;
    }
    .estimate-panel .estimate-form {
        gap: 18px;
    }
    .estimate-panel .estimate-group {
        gap: 12px;
    }
    .estimate-panel .estimate-group-title {
        color: #101418;
        font-size: 16px;
        line-height: 22px;
    }
    .estimate-panel .estimate-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .estimate-panel .estimate-row:has(select) > .field:first-child {
        grid-column: 1 / -1;
    }
    .estimate-panel .estimate-row:has(#est-length) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .estimate-panel .estimate-row-parcel {
        grid-template-columns: minmax(0, 1fr);
    }
    .estimate-panel .estimate-weight {
        grid-column: auto;
    }
    .estimate-panel .estimate-form .field {
        gap: 8px;
        min-width: 0;
    }
    .estimate-panel .estimate-form label,
    .estimate-panel .estimate-goods legend {
        color: #101418;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }
    .estimate-panel .estimate-goods legend {
        margin-bottom: 10px;
        padding: 0;
    }
    .estimate-panel .estimate-goods-options {
        gap: 28px;
        min-height: 0;
    }
    .estimate-panel .estimate-goods-options label {
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
    }
    .estimate-panel .estimate-form .estimate-goods-options input {
        width: 20px;
        height: 20px;
    }
    .estimate-panel .estimate-form input:not([type="radio"]):not([type="checkbox"]),
    .estimate-panel .estimate-form select {
        width: 100%;
        min-width: 0;
        height: 48px;
        padding: 0 14px;
        border-color: #e4e8ec;
        border-radius: 12px;
        background-color: #f7f8fa;
        font-size: 15px;
        line-height: 22px;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }
    .estimate-panel .estimate-form select {
        padding-right: 36px;
        background-position: right 14px center;
        background-size: 16px 16px;
    }
    .estimate-panel .estimate-form input::placeholder {
        color: #98a2ae;
    }
    .estimate-panel .estimate-cod {
        gap: 10px;
        color: #101418;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
    }
    .estimate-panel .estimate-cod input {
        width: 22px;
        height: 22px;
    }
    .estimate-panel .estimate-cod-fee {
        margin-top: 0;
    }
    .estimate-panel .estimate-action .btn {
        width: 100%;
        height: 50px;
        padding: 0 24px;
        border-radius: 26px;
        font-size: 15px;
        line-height: 24px;
    }

    /* ===== TRA CUU: ket qua uoc tinh cuoc (Figma 3361:11943) ===== */
    .estimate-panel .estimate-result {
        gap: 18px;
        margin-top: 0;
        padding: 0;
        border-radius: 0;
        background: none;
    }
    .estimate-panel .estimate-result-heading {
        gap: 10px;
        font-size: 20px;
        line-height: 28px;
    }
    .estimate-panel .estimate-result-back {
        width: 22px;
        font-size: 22px;
    }
    .estimate-panel .estimate-result-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
    .estimate-panel .estimate-result-copy,
    .estimate-panel .estimate-result-service {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 16px;
        border-radius: 16px;
        background: #f7f8fa;
    }
    .estimate-panel .estimate-result-line {
        flex-wrap: wrap;
        gap: 4px;
        padding-bottom: 14px;
        border-bottom: 1px dashed #d5dbe1;
        color: #101418;
        font-size: 14px;
        line-height: 22px;
    }
    .estimate-panel .estimate-result-label {
        color: #3a4149;
    }
    .estimate-panel .estimate-result-route {
        gap: 42px;
        font-size: 15px;
        line-height: 22px;
    }
    /* Doan noi giua diem gui va diem nhan: ve sau diem gui de luon nam giua du dia chi dai bao nhieu dong. */
    .estimate-panel .estimate-result-route::before {
        display: none;
    }
    .estimate-panel .estimate-result-route > span:first-child {
        position: relative;
    }
    .estimate-panel .estimate-result-route > span:first-child::after {
        content: '';
        position: absolute;
        left: 8px;
        top: calc(100% + 14px);
        height: 14px;
        border-left: 1px solid #c9d0d8;
    }
    .estimate-panel .estimate-result-route span {
        align-items: flex-start;
        gap: 12px;
    }
    .estimate-panel .estimate-route-dot {
        width: 18px;
        height: 18px;
        margin-top: 2px;
        border-color: #1fa971;
        box-sizing: border-box;
    }
    .estimate-panel .estimate-result-route svg {
        width: 18px;
        height: 18px;
        margin-top: 2px;
    }
    .estimate-panel .estimate-service-title {
        margin: 0;
        font-size: 17px;
        font-weight: 600;
        line-height: 24px;
    }
    .estimate-panel .estimate-service-price {
        padding: 14px;
        border-radius: 10px;
        background: #fff;
        font-size: 16px;
        line-height: 22px;
    }
    .estimate-panel .estimate-result-price {
        font-size: 16px;
    }
    .estimate-panel .estimate-service-hint {
        margin: 0;
        padding-top: 14px;
        border-top: 1px dashed #d5dbe1;
        color: #5b636b;
        font-size: 14px;
        line-height: 21px;
    }
    .estimate-panel .estimate-result-service a {
        font-size: 15px;
        line-height: 22px;
    }

    /* ===== TRA CUU: tab Cau hoi - xep doc, anh tren (Figma 3361:11992) ===== */
    .quick .tool-panel.faq-panel.active {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding: 26px 18px 30px;
        text-align: center;
    }
    .faq-panel .faq-art {
        order: -1;
        width: 220px;
        height: 220px;
    }
    .faq-panel .faq-art img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .faq-panel .faq-intro {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }
    .faq-panel .faq-intro h2 {
        margin: 0;
        color: #101418;
        font-size: 24px;
        font-weight: 800;
        line-height: 32px;
    }
    .faq-panel .faq-intro h2 .orange {
        color: inherit;
    }
    .faq-panel .faq-intro p {
        max-width: none;
        margin: 0;
        color: #3a4149;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
    }
    .faq-panel .faq-intro .btn {
        padding: 11px 28px;
        font-size: 15px;
        line-height: 24px;
    }

    /* ===== TUYEN DUNG: bo loc + danh sach viec lam - xep doc (Figma 3361:13046, 3361:13067) ===== */
    .recruit-list-page {
        width: 100%;
        padding: 0 20px 32px;
        box-sizing: border-box;
    }
    .recruit-list-page .recruit-filter {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 28px;
        padding: 32px 0 20px;
    }
    .recruit-list-page .recruit-filter .ts-control,
    .recruit-filter > .recruit-field > select {
        height: 46px;
        min-height: 46px;
        border-color: #dee4ea;
        border-radius: 28px;
        font-size: 16px;
    }
    .recruit-list-page .recruit-filter .ts-control input,
    .recruit-list-page .recruit-filter .ts-control .item {
        font-size: 16px;
        font-weight: 500;
    }
    .recruit-filter > .recruit-field > input {
        height: 48px;
        border-color: #e4e8ec;
        border-radius: 12px;
        font-size: 14px;
    }
    .recruit-list-page .recruit-filter > .recruit-button {
        width: 100%;
        height: 48px;
        border-radius: 24px;
        font-size: 15px;
        line-height: 24px;
    }

    .recruit-list-page .recruit-list-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 16px;
        color: #101418;
        font-size: 22px;
        font-weight: 700;
        line-height: 28px;
    }
    .recruit-list-page .recruit-list-title span {
        padding: 3px 10px;
        border-radius: 999px;
        background: #fff3ec;
        font-size: 14px;
        font-weight: 800;
        line-height: 20px;
    }
    .recruit-list-page .recruit-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    /* The: logo + tieu de cung hang; ngay/dia diem va 2 nut xuong duoi full chieu ngang. */
    .recruit-list-page .recruit-card {
        min-height: 0;
        grid-template-columns: 56px minmax(0, 1fr);
        align-items: center;
        gap: 14px 12px;
        padding: 16px;
        border-color: #eceff2;
        border-radius: 16px;
        box-shadow: none;
    }
    .recruit-list-page .recruit-card > div {
        display: contents;
    }
    .recruit-list-page .recruit-logo {
        width: 56px;
        height: 56px;
        padding: 8px 8px;
        border: 0;
        border-radius: 12px;
        background: #fff3ec;
        box-sizing: border-box;
    }
    .recruit-list-page .recruit-card h3 {
        margin: 0;
        color: #101418;
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
    }
    .recruit-list-page .recruit-card .recruit-meta,
    .recruit-list-page .recruit-actions {
        grid-column: 1 / -1;
    }
    .recruit-list-page .recruit-card .recruit-meta {
        gap: 16px;
        color: #8b8b8b;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }
    .recruit-list-page .recruit-meta svg {
        width: 16px;
        height: 16px;
    }
    .recruit-list-page .recruit-actions {
        flex-wrap: nowrap;
        gap: 10px;
        margin-top: 0;
    }
    .recruit-list-page .recruit-actions .recruit-button {
        flex: 1;
        min-width: 0;
        min-height: 40px;
        padding: 10px 12px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }

    .recruit-list-page .recruit-pagination {
        gap: 6px;
        margin-top: 26px;
    }
    .recruit-list-page .recruit-pagination > a,
    .recruit-list-page .recruit-pagination > span {
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        border-radius: 12px;
        background: #f5f6f8;
        color: #474e5a;
        font-weight: 600;
        box-sizing: border-box;
    }
    .recruit-list-page .recruit-pagination > .current {
        background: var(--primary);
        color: #fff;
    }

    /* ===== CHI TIET TUYEN DUNG: thong tin vi tri - xep doc (Figma 3361:12726) ===== */
    .recruit-detail-page {
        width: 100%;
        padding: 0 20px 32px;
        box-sizing: border-box;
    }
    .recruit-detail-page .recruit-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .recruit-detail-page .recruit-summary {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 24px 0 28px;
        border: 0;
        border-radius: 0;
    }
    .recruit-detail-page .recruit-tags span {
        padding: 4px 10px;
        background: #fff3ec;
        font-size: 12px;
        font-weight: 700;
        line-height: 18px;
    }
    .recruit-detail-page .recruit-summary h1 {
        margin: 0;
        color: #1d2126;
        font-size: 26px;
        font-weight: 700;
        line-height: 34px;
    }
    .recruit-detail-page .recruit-summary > .recruit-meta {
        flex-direction: column;
        gap: 4px;
        padding-bottom: 0;
        border-bottom: 0;
        color: #8b919b;
        font-size: 13px;
        line-height: 18px;
    }
    .recruit-detail-page .recruit-summary > .recruit-meta span + span {
        padding-left: 0;
        border-left: 0;
        font-size: 13px;
    }
    .recruit-detail-page .recruit-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin: 0;
    }
    .recruit-detail-page .recruit-facts > div {
        min-height: 0;
        gap: 12px;
        padding: 12px 14px;
        border: 0;
        background: #fff4ec;
    }
    .recruit-detail-page .recruit-facts i {
        width: 40px;
        height: 40px;
        border-radius: 999px;
    }
    .recruit-detail-page .recruit-facts i svg {
        width: 20px;
        height: 20px;
    }
    .recruit-detail-page .recruit-facts small {
        margin-bottom: 2px;
        color: #8b919b;
        font-size: 12px;
        line-height: 16px;
    }
    .recruit-detail-page .recruit-facts b {
        color: #1d2126;
        font-size: 15px;
        font-weight: 700;
        line-height: 22px;
    }
    .recruit-detail-page .recruit-summary > .recruit-button {
        width: 100%;
        min-height: 50px;
        padding: 6px 16px 6px 6px;
        gap: 10px;
        font-size: 15px;
        line-height: 24px;
    }
    .recruit-detail-page .recruit-summary > .recruit-button i {
        width: 38px;
        height: 38px;
    }

    /* ===== CHI TIET TUYEN DUNG: form ung tuyen (Figma 3402:9190) + popup (3402:9319) =====
       Form #apply van o cuoi trang; nut "Ung tuyen" (script trong career.blade) them .is-popup de mo thanh bottom sheet. */
    .recruit-popup-open,
    .recruit-popup-open body {
        overflow: hidden;
    }
    /* Form o cuoi trang (Figma 3402:9190): nen cam, the trang full chieu ngang. */
    .recruit-detail-page .recruit-application-band {
        margin: 28px -20px 0;
        padding: 28px 20px;
        border-radius: 0;
        box-sizing: border-box;
        width: auto;
    }
    .recruit-detail-page .recruit-application-band .recruit-application {
        max-width: none;
        padding: 20px 20px 24px;
        border-radius: 20px;
    }
    .recruit-detail-page .recruit-application-band.is-popup {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: rgba(16, 20, 24, .6);
        overflow-y: auto;
        box-sizing: border-box;
    }
    .recruit-band-close {
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 2;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        color: #101418;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        display: none;
    }
    .recruit-band-close[hidden] {
        display: none;
    }
    /* Bottom sheet: full chieu ngang, truot tu day man hinh len. */
    .recruit-detail-page .recruit-application-band.is-popup .recruit-application {
        width: 100%;
        max-width: none;
        max-height: 90dvh;
        margin: 0;
        padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px));
        border-radius: 20px 20px 0 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-sizing: border-box;
        animation: recruit-sheet-up .28s ease-out;
    }
    @keyframes recruit-sheet-up {
        from { transform: translateY(100%); }
        to { transform: none; }
    }
    @media (prefers-reduced-motion: reduce) {
        .recruit-detail-page .recruit-application-band.is-popup .recruit-application {
            animation: none;
        }
    }
    .recruit-detail-page .recruit-application-band .recruit-application h2 {
        color: #101418;
        font-size: 22px;
        line-height: 28px;
    }
    .recruit-detail-page .recruit-application-band .recruit-form-subtitle {
        margin-bottom: 16px;
        color: #4b5260;
        font-size: 14px;
        line-height: 20px;
    }
    .recruit-detail-page .recruit-application-band .recruit-application label {
        margin: 16px 0 8px;
        color: #18181b;
        font-size: 14px;
        font-weight: 500;
    }
    .recruit-detail-page .recruit-application-band .recruit-application input:not([type=checkbox]):not([type=file]) {
        height: 44px;
        padding: 0 12px;
        border-color: #e4e4e7;
        border-radius: 8px;
        font-size: 14px;
        box-sizing: border-box;
    }
    .recruit-detail-page .recruit-application-band .recruit-application input[type=date] {
        background-color: #fff;
        color-scheme: light;
    }
    .recruit-application .recruit-date-input {
        position: relative;
        width: 100%;
        height: 44px;
        min-width: 0;
        overflow: hidden;
        border: 1px solid #e4e4e7;
        border-radius: 8px;
        background: #fff;
        box-sizing: border-box;
    }
    .recruit-application .recruit-date-input input[type=date] {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        padding: 0 34px 0 12px;
        border: 0;
        background: transparent;
        color: transparent;
        color-scheme: light;
        box-sizing: border-box;
    }
    .recruit-application .recruit-date-input input[type=date] {
        opacity: 0;
    }
    .recruit-application .recruit-date-input input[type=date]::-webkit-calendar-picker-indicator {
        opacity: 0;
    }
    .recruit-application .recruit-date-placeholder,
    .recruit-application .recruit-date-icon {
        position: absolute;
        z-index: 3;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }
    .recruit-application .recruit-date-placeholder {
        display: block;
        left: 12px;
        color: #71717a;
        font-size: 14px;
    }
    .recruit-application .recruit-date-input:focus-within {
        border-color: #0866ff;
        box-shadow: 0 0 0 1px #0866ff;
    }
    .recruit-application .recruit-date-input.is-empty .recruit-date-placeholder {
        color: #71717a;
    }
    .recruit-application .recruit-date-input:not(.is-empty) .recruit-date-placeholder {
        color: #20252b;
    }
    .recruit-application .recruit-date-icon {
        display: block;
        right: 12px;
        width: 16px;
        height: 16px;
        stroke: #18181b;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
    }
    .recruit-detail-page .recruit-application-band .recruit-form-row {
        grid-template-columns: 1fr 1fr;
        gap: 11px;
    }
    .recruit-detail-page .recruit-application-band .recruit-upload {
        gap: 6px;
        margin: 16px 0;
        padding: 18px 16px;
        border: 1.5px dashed #ffb38a;
        border-radius: 12px;
        background: #fff4ec;
        font-size: 15px;
    }
    .recruit-detail-page .recruit-application-band .recruit-upload small {
        color: #8b919b;
        font-size: 13px;
        line-height: 18px;
    }
    .recruit-detail-page .recruit-application-band .recruit-consent {
        gap: 10px;
        margin: 0;
        color: #4b5260;
        font-size: 13px;
        line-height: 19px;
    }
    .recruit-detail-page .recruit-application-band .recruit-consent input {
        width: 20px;
        height: 20px;
    }
    .recruit-detail-page .recruit-application-band .recruit-application > .recruit-button {
        min-height: 50px;
        margin-top: 16px;
        font-size: 15px;
    }
    .recruit-detail-page .recruit-application-band .recruit-application > .recruit-button i {
        left: 6px;
        width: 38px;
        height: 38px;
        margin: 0;
    }

    /* ===== CHI TIET TUYEN DUNG: phuc loi - nam ngang vuot duoc (Figma 3361:12774) =====
       careers.js chia trang 3 the va an phan con lai bang .is-hidden; tren mobile hien het de vuot, an nut mui ten. */
    .recruit-detail-page .recruit-perks-heading {
        margin: 8px 0 16px;
    }
    .recruit-detail-page .recruit-perks-heading .recruit-heading {
        padding-left: 10px;
        border-left-width: 4px;
        color: #1d2126;
        font-size: 22px;
        font-weight: 700;
        line-height: 28px;
    }
    .recruit-detail-page .recruit-perks-controls {
        display: none;
    }
    .recruit-detail-page .recruit-perks {
        display: flex;
        gap: 12px;
        margin: 0 -20px 28px;
        padding: 0 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .recruit-detail-page .recruit-perks::-webkit-scrollbar {
        display: none;
    }
    .recruit-detail-page .recruit-perks[data-benefits-track] [data-benefit-card],
    .recruit-detail-page .recruit-perks[data-benefits-track] [data-benefit-card].is-hidden {
        display: flex;
    }
    .recruit-detail-page .recruit-perks .recruit-panel {
        flex: none;
        flex-direction: column;
        gap: 10px;
        width: 240px;
        padding: 16px;
        border-color: #eceff2;
        border-radius: 16px;
        scroll-snap-align: start;
        box-sizing: border-box;
    }
    .recruit-detail-page .recruit-perks i {
        width: 44px;
        height: 44px;
        margin: 0;
        border-radius: 12px;
    }
    .recruit-detail-page .recruit-perks b {
        color: #1d2126;
        font-size: 16px;
        font-weight: 700;
        line-height: 22px;
    }
    .recruit-detail-page .recruit-perks p {
        margin: 0;
        color: #4b5260;
        font-size: 14px;
        line-height: 21px;
    }

    /* ===== CHI TIET TUYEN DUNG: co chu noi dung (Figma 3361:12802) + vi tri khac (3361:12885) ===== */
    .recruit-detail-page .recruit-body .recruit-heading {
        margin: 0 0 14px;
        color: #1d2126;
        font-size: 22px;
        font-weight: 700;
        line-height: 28px;
    }
    .recruit-detail-page .recruit-body section {
        margin-bottom: 24px;
    }
    .recruit-detail-page .recruit-body {
        color: #4b5260;
        font-size: 15px;
        line-height: 24px;
    }
    .recruit-detail-page .recruit-body ul > li {
        margin: 14px 0;
    }
    .recruit-detail-page .recruit-body strong,
    .recruit-detail-page .recruit-body b {
        color: #1d2126;
    }
    .recruit-detail-page .recruit-submit-note {
        gap: 12px;
        margin-top: 0;
        padding: 16px;
        border-radius: 16px;
        background: #fff4ec;
    }
    .recruit-detail-page .recruit-note-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    .recruit-detail-page .recruit-submit-note b {
        color: #1d2126;
        font-size: 15px;
        line-height: 22px;
    }
    .recruit-detail-page .recruit-submit-note p {
        margin-top: 4px;
        font-size: 14px;
        line-height: 21px;
    }

    .recruit-detail-page .recruit-related h2 {
        margin-bottom: 16px;
        color: #1d2126;
        font-size: 20px;
        font-weight: 700;
        line-height: 26px;
    }
    .recruit-detail-page .recruit-related > a:not(.recruit-button) {
        gap: 14px;
        padding: 16px 0;
    }
    .recruit-detail-page .recruit-related b {
        color: #1d2126;
        font-size: 15px;
        font-weight: 700;
        line-height: 20px;
    }
    .recruit-detail-page .recruit-related small {
        gap: 4px 20px;
        margin-top: 6px;
        color: #8b919b;
        font-size: 13px;
    }
    .recruit-detail-page .recruit-related small span {
        font-size: 13px;
    }
    .recruit-detail-page .recruit-related .recruit-button {
        font-size: 15px;
        line-height: 24px;
    }

    /* ===== CHI TIET DICH VU: bang gia 2 cot (Figma 3361:14080) =====
       Script trong service.blade them .price-stack + danh dau o don gia.
       Cot 1 = moi cot tru don gia (xep chong, tieu de cua cot dau), cot 2 = don gia.
       !important de de len style inline cua bang nhap tu CMS. */
    /* Bang luon nam gon trong chieu rong man hinh (de len min-width inline cua bang). */
    :is(#pricing, .service-page-body) table.price-stack {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
        overflow: visible;
    }
    :is(#pricing, .service-page-body) table.price-stack :is(thead, tbody) {
        display: block;
        width: 100%;
    }
    /* Cot 1 rong gap doi cot 2; chu dai thi xuong dong, khong cuon ngang. */
    :is(#pricing, .service-page-body) table.price-stack tr {
        display: grid;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }
    :is(#pricing, .service-page-body) table.price-stack :is(th, td),
    :is(#pricing, .service-page-body) table.price-stack :is(th, td) * {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    :is(#pricing, .service-page-body) table.price-stack :is(th, td) {
        display: block;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
        grid-column: 1;
        border: 0 !important;
        white-space: normal !important;
        text-align: left !important;
    }
    :is(#pricing, .service-page-body) table.price-stack th {
        padding: 14px 16px !important;
    }
    :is(#pricing, .service-page-body) table.price-stack .price-stack-hidden {
        display: none;
    }
    :is(#pricing, .service-page-body) table.price-stack td {
        padding: 2px 0 2px 16px !important;
    }
    :is(#pricing, .service-page-body) table.price-stack td.price-stack-first {
        padding-top: 14px !important;
    }
    :is(#pricing, .service-page-body) table.price-stack td.price-stack-last {
        padding-bottom: 14px !important;
    }
    :is(#pricing, .service-page-body) table.price-stack td.price-stack-first {
        color: #101418;
        font-size: 15px;
        font-weight: 700;
        line-height: 22px;
    }
    :is(#pricing, .service-page-body) table.price-stack td:not(.price-stack-first):not(.price-stack-price):not(.price-stack-time) {
        color: #5b636b;
        font-size: 13px;
        line-height: 19px;
    }
    :is(#pricing, .service-page-body) table.price-stack td.price-stack-price {
        font-size: 18px;
        line-height: 24px;
    }
    :is(#pricing, .service-page-body) table.price-stack .price-stack-price,
    :is(#pricing, .service-page-body) table.price-stack .price-stack-time {
        grid-column: 2;
        text-align: right !important;
    }
    :is(#pricing, .service-page-body) table.price-stack .price-stack-price {
        grid-row: 1 / span 20;
    }
    :is(#pricing, .service-page-body) table.price-stack td.price-stack-price {
        padding: 14px 16px 14px 12px !important;
    }
    /* Co cot thoi gian: gia o hang 1, thoi gian ngay duoi. */
    :is(#pricing, .service-page-body) table.price-stack tr:has(.price-stack-time) .price-stack-price {
        grid-row: 1;
    }
    :is(#pricing, .service-page-body) table.price-stack tr:has(.price-stack-time) td.price-stack-price {
        padding-bottom: 4px !important;
    }
    :is(#pricing, .service-page-body) table.price-stack td.price-stack-time {
        grid-row: 2 / span 19;
        padding: 0 16px 14px 12px !important;
        color: #5b636b;
        font-size: 13px;
        line-height: 19px;
    }
    :is(#pricing, .service-page-body) table.price-stack tbody tr + tr {
        border-top: 1px solid #e9edf1;
    }
}