/*
 * Child theme main stylesheet
 * Page-specific or component-specific CSS should live here first.
 */

/* =========================================================
   HOMEDOOR - FULL LIGHT THEME OVERRIDES
   Giữ nguyên khối biến hệ thống này để bảo vệ giao diện sáng
   ========================================================= */
:root {
    --ink:            #FFFFFF !important;
    --ink-2:          #F8F9FA !important;
    --ink-3:          #F1F3F5 !important;
    --on-dark:        #111111 !important;
    --on-dark-muted:  rgba(0,0,0,0.75) !important;
    --on-dark-faint:  rgba(0,0,0,0.55) !important;
    --line-soft:      rgba(0,0,0,0.08) !important;
    --line-mid:       rgba(0,0,0,0.15) !important;
    --gold:           #E2554A !important;
    --gold-light:     #F47C73 !important;

    /* CÁC BIẾN MỚI TẠO TỪ MÃ MÀU NGOÀI ROOT CỦA CHILD THEME */
    --hd-black-soft:  #0a0a0c;
    --hd-gray-900:    #171717;
    --hd-gray-800:    #2b2b2b;
    --hd-gray-700:    #333333;
    --hd-gray-600:    #444444;
    --hd-gray-500:    #666666;
    --hd-gray-400:    #888888;
    --hd-gray-300:    #aaaaaa;
    --hd-gray-200:    #cccccc;
    --hd-gray-100:    #e0e0e0;
    --hd-gray-50:     #ebebeb;
    --hd-gray-25:     #eeeeee;

    --hd-red:         #e60012;
    --hd-red-hover:   #cc0010;
    --hd-red-active:  #a31e1e;
    
    --hd-blue:        #0068ff;
    --hd-blue-hover:  #0054cc;

    --hd-bg-err:      #fff3f3;
    --hd-gold-dark:   #D89A4E;
    --hd-gold-alt:    #C9A227;
    --hd-gold-alt-light: #e0b84a;

    /* Nhóm giá trị RGBA */
    --hd-overlay-dark:  rgba(12, 11, 8, 0.8);
    --hd-overlay-modal: rgba(10, 9, 6, 0.78);
    --hd-overlay-img:   rgba(8, 8, 10, 0.55);
    --hd-ink-overlay:   rgba(21, 20, 15, 0.35);
    
    --hd-msg-warn-bg:   rgba(216, 154, 78, 0.12);
    --hd-msg-err-bg:    rgba(207, 46, 46, 0.12);
    --hd-msg-err-border: rgba(207, 46, 46, 0.8);
    --hd-msg-ok-bg:     rgba(46, 160, 67, 0.14);
    --hd-msg-ok-border: rgba(46, 160, 67, 0.8);

    --hd-white-3:       rgba(255, 255, 255, 0.03);
    --hd-white-5:       rgba(255, 255, 255, 0.05);
    --hd-white-6:       rgba(255, 255, 255, 0.06);
    --hd-white-10:      rgba(255, 255, 255, 0.1);
    --hd-white-12:      rgba(255, 255, 255, 0.12);
    --hd-white-20:      rgba(255, 255, 255, 0.2);
    --hd-white-30:      rgba(255, 255, 255, 0.3);
    --hd-white-40:      rgba(255, 255, 255, 0.4);
    --hd-white-60:      rgba(255, 255, 255, 0.6);
    --hd-white-70:      rgba(255, 255, 255, 0.7);
    --hd-white-88:      rgba(255, 255, 255, 0.88);
    --hd-white-90:      rgba(255, 255, 255, 0.9);
    --hd-white-95:      rgba(255, 255, 255, 0.95);
    --hd-white-98:      rgba(255, 255, 255, 0.98);

    --hd-black-10:      rgba(0, 0, 0, 0.1);
    --hd-black-15:      rgba(0, 0, 0, 0.15);
    --hd-black-50:      rgba(0, 0, 0, 0.5);
    --hd-black-70:      rgba(0, 0, 0, 0.7);
    --hd-black-90:      rgba(0, 0, 0, 0.9);

    --hd-gold-5:        rgba(216, 154, 78, 0.05);
    --hd-gold-6:        rgba(216, 154, 78, 0.06);
    --hd-gold-8:        rgba(216, 154, 78, 0.08);
    --hd-gold-45:       rgba(216, 154, 78, 0.45);
    --hd-gold-55:       rgba(216, 154, 78, 0.55);

    --hd-red-5:         rgba(226, 85, 74, 0.05);
    --hd-red-30:        rgba(229, 0, 18, 0.3);
    
    --hd-gold-line:     rgba(236, 198, 119, 0.24);
}

.mona-about-page {
    display: block;
}

/*
 * Homepage category mosaic — MOBILE.
 */
@media (max-width: 768px) {
    .m-cat .tile__hover {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(46px) !important;
        background: var(--hd-overlay-dark) !important;
    }
    .m-cat .tile.is-center .tile__hover {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

.ar,
.news__more span,
.nfeat__btn span,
.jcard__cta .ar,
.thv__more span,
.svc-card__more,
.sh-enter {
    font-variant-emoji: text;
}

.relprod {
    margin-top: 54px;
}
.relprod__title {
    font-weight: 300;
    font-size: 24px;
    letter-spacing: .01em;
    margin: 0 0 22px;
    color: var(--on-dark);
}
.article__lead {
    font-size: 1.1em;
    font-weight: 500;
    opacity: .92;
}

.afilter__chev {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.cform .wpcf7-form-control-wrap {
    display: block;
}
.cform .wpcf7-response-output {
    margin: 12px 0 0;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 6px;
}
.cta__form .wpcf7-form {
    display: flex;
    align-items: center;
    width: 100%;
}
.cta__form .wpcf7-form-control-wrap {
    flex: 1;
    min-width: 180px;
}
.cta__form .wpcf7-response-output {
    flex-basis: 100%;
    margin: 8px 0 0;
    font-size: 13px;
}
.wpcf7-spinner {
    margin: 0 0 0 -10px;
}

.cform .wpcf7-submit,
.contact-grid .cform .wpcf7-submit {
    display: inline-block;
    width: auto;
    background: var(--gold);
    color: var(--ink);
    border: none;
    border-radius: 999px;
    padding: 15px 32px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .25s var(--ease, ease);
}
.cform .wpcf7-submit:hover,
.contact-grid .cform .wpcf7-submit:hover {
    background: var(--gold-light);
}

.cta__form .cta__submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    width: fit-content;
    margin-left: 16px;
    margin-bottom: 14px;
    padding: 6px 14px;
    border: 1px solid var(--gold);
    border-radius: 4px;
    background: transparent;
    color: var(--on-dark);
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: color .35s var(--ease, ease);
}
.cta__form .cta__submit::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -25%;
    width: 0;
    height: 100%;
    background: var(--gold);
    z-index: -1;
    transform: skewX(-45deg);
    transform-origin: left center;
    transition: width .8s var(--ease, ease);
}
.cta__form .cta__submit:hover::before {
    width: 160%;
}
.cta__form .cta__submit:hover {
    color: var(--ink);
}
.cta__form .cta__submit .wpcf7-submit {
    flex: 0 0 auto;
    width: auto;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.cta__form .cta__submit .wpcf7-submit {
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    min-width: 0 !important;
}

.cta .cta__form {
    padding: 0 !important;
}

.cta__form .wpcf7-form-control-wrap input {
    width: 100% !important;
}

.cta__form .wpcf7 {
    width: 100%;
}

@media (max-width: 768px) {
    .cta__form .cta__submit {
        margin-left: 12px;
        padding: 5px 10px;
    }
}
.cta__form .cta__submit .wpcf7-submit::before {
    display: none !important;
}
.cta__form .cta__submit .ar {
    display: inline-block;
    transform: rotate(-45deg);
    transition: transform .3s var(--ease, ease);
    font-variant-emoji: text;
}
.cta__form .cta__submit:hover .ar {
    transform: rotate(-45deg) translateX(4px);
}

@media (min-width: 1025px) {
    .mega--cards .mega__track {
        justify-content: flex-start !important;
    }
}

.cn-modal .wpcf7-form-control-wrap {
    display: block;
}
.cn-modal .wpcf7-submit {
    width: 100%;
    margin-top: 8px;
}
.cn-modal .wpcf7-response-output {
    margin: 10px 0 0;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 6px;
}

@media (min-width: 901px) {
    .pdp__main {
        align-items: start;
    }
    .gallery {
        align-self: auto;
        display: flex;
        flex-direction: column;
    }
    .gallery__main {
        flex: 0 0 auto;
        aspect-ratio: 1 / 1;
        min-height: 0;
    }
    .gallery__dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin-top: 0;
        z-index: 2;
        padding-top: 30px;
        padding-bottom: 14px;
        background: linear-gradient(to top, var(--hd-overlay-img), transparent);
    }
}

.polacc{display:flex;flex-direction:column;gap:14px;margin:8px 0 8px;}
.polacc__item{border:1px solid var(--hd-white-12);border-radius:14px;background:var(--hd-white-3);overflow:hidden;}
.polacc__head,.polacc__link{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;cursor:pointer;list-style:none;color:var(--ink);font-weight:600;font-size:clamp(15px,1.4vw,18px);
  text-decoration:none;transition:background .2s ease;}
.polacc__head::-webkit-details-marker{display:none;}
.polacc__item:hover{border-color:var(--hd-gold-45);}
.polacc__head:hover,.polacc__link:hover{background:var(--hd-gold-6);}
.polacc__item.is-current{border-color:var(--hd-gold-55);background:var(--hd-gold-5);}
.polacc__name{flex:1;}
.polacc__chev{width:20px;height:20px;flex:0 0 20px;color:var(--hd-gold-dark);transition:transform .25s ease;}
.polacc__item[open] .polacc__chev{transform:rotate(180deg);}
.polacc__body{padding:4px 22px 22px;border-top:1px solid var(--hd-white-8);margin-top:0;}
.polacc__body>h2{margin-top:22px;}
.polacc__body>p:first-child{margin-top:14px;}

@media (max-width: 1024px) {
    .catbar {
        padding: 8px 6px;
    }
    .catbar__head {
        padding: 4px 8px 6px;
    }
    .catbar__list {
        gap: 6px;
    }
    .catbar__item {
        padding: 6px 12px;
        font-size: 13px;
    }
}

.m-cat .t1 .thv__more,
.m-cat .t2 .thv__more {
    padding: 0 22px;
    height: 24px;
}

.thv__more .ar {
    display: inline-block;
    transform: rotate(-45deg);
    transition: transform .3s var(--ease);
}
.thv__more:hover .ar {
    transform: rotate(-45deg) translateX(4px);
}

.lang a {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .03em;
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--on-dark-muted);
    text-decoration: none;
    line-height: normal;
    transition: all .25s var(--ease);
}
.lang a.is-active {
    background: var(--gold);
    color: var(--ink);
}
@media (max-width: 768px) {
    .lang a { padding: 5px 7px; font-size: 11px; }
}

.hero .hero__arrow,
.projslider .hero__arrow {
    width: 35px !important;
    height: 35px !important;
    background: var(--hd-ink-overlay);
    border: 1px solid var(--line-mid);
    opacity: 1;
}
.hero .hero__arrow svg,
.projslider .hero__arrow svg {
    width: 22px !important;
    height: 22px !important;
}
.hero:hover .hero__arrow,
.projslider:hover .hero__arrow { opacity: 1; }
.hero .hero__arrow:hover,
.projslider .hero__arrow:hover {
    background: var(--gold);
    color: var(--ink);
    border-color: var(--gold);
}
.hero .hero__arrow.prev,
.projslider .hero__arrow.prev { left: 20px !important; }
.hero .hero__arrow.next,
.projslider .hero__arrow.next { right: 20px !important; }
@media (max-width: 768px) {
    .hero .hero__arrow,
    .projslider .hero__arrow,
    .fwslider__arrow {
        width: 31px !important;
        height: 31px !important;
    }
    .hero .hero__arrow svg,
    .projslider .hero__arrow svg,
    .fwslider__arrow svg {
        width: 16px !important;
        height: 16px !important;
    }
    .hero .hero__arrow.prev,
    .projslider .hero__arrow.prev,
    .fwslider__arrow.prev { left: 14px !important; }
    .hero .hero__arrow.next,
    .projslider .hero__arrow.next,
    .fwslider__arrow.next { right: 14px !important; }
}

@media (min-width: 769px) {
    .m-cat .tile .thv__more {
        padding: 10px 20px !important;
    }
}

.cta .cta__form { position: relative; }
.cta__form .wpcf7-response-output {
    position: absolute !important;
    top: calc(100% + 14px) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    line-height: 1.5;
    color: var(--on-dark);
    background: var(--hd-msg-warn-bg);
    border: 1px solid var(--gold) !important;
    border-radius: 4px;
    box-sizing: border-box;
    flex: initial;
}
.cta__form .wpcf7 form.invalid .wpcf7-response-output,
.cta__form .wpcf7 form.unaccepted .wpcf7-response-output,
.cta__form .wpcf7 form.spam .wpcf7-response-output,
.cta__form .wpcf7 form.aborted .wpcf7-response-output,
.cta__form .wpcf7 form.failed .wpcf7-response-output {
    background: var(--hd-msg-err-bg);
    border-color: var(--hd-msg-err-border) !important;
}
.cta__form .wpcf7 form.sent .wpcf7-response-output {
    background: var(--hd-msg-ok-bg);
    border-color: var(--hd-msg-ok-border) !important;
}
@media (max-width: 768px) {
    .cta__form .wpcf7-response-output {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
}

.projvids .projvid.is-playing .projvid__play {
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.projvids .projvid .projvid__play {
    transition: opacity .3s ease;
}

.vg-play {
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.vg-play svg {
    width: 20px !important;
    height: 20px !important;
    fill: var(--ink);
    color: var(--ink);
    padding: 11px;
    background: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 50%;
    box-sizing: content-box;
    margin-left: 3px;
    transform: translate(-50%, -50%) scale(1);
    transition: background .3s ease, transform .25s ease, border-color .3s ease;
}
.vg-card:hover .vg-play svg,
.vg-play:hover svg,
.vg-play:focus-visible svg {
    background: var(--red-accent-hover);
    border-color: var(--red-accent-hover);
    transform: translate(-50%, -50%) scale(1.08);
}
@media (max-width: 640px) {
    .vg-play svg {
        padding: 10px;
    }
}

.page-service .article {
    max-width: none !important;
    margin: 0 !important;
}

@media (min-width: 1025px) {
    .site-header .mega--cards {
        box-shadow:
            -128px 0 0 0 var(--ink-2),
            128px 0 0 0 var(--ink-2),
            0 30px 80px -30px var(--hd-black-70) !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
    }
}

@media (max-width: 640px) {
    .footer__col--acc > h4:has(> a)::after {
        content: "" !important;
    }
}

@media (max-width: 768px) {
    .m-cat .tile.t1 {
        height: 380px !important;
    }
}

@media (min-width: 769px) {
    .gallery {
        align-self: flex-start !important;
    }
    .gallery__main {
        aspect-ratio: 1 / 1 !important;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .gallery__main img,
    .gallery__main video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }
}

@media (min-width: 769px) {
    .pinfo .pinfo__name {
        margin-top: 6px !important;
        margin-bottom: 10px !important;
    }
    .pinfo .pinfo__desc {
        margin-bottom: 16px !important;
    }
    .pinfo .buybox {
        margin: 14px 0 !important;
        padding: 14px 0 !important;
    }
    .pinfo .pspecs {
        margin-top: 16px !important;
        padding-top: 16px !important;
        gap: 12px 12px !important;
    }
    .pinfo .pinfo__specs {
        margin-top: 16px !important;
        padding-top: 12px !important;
    }
    .pinfo .pinfo__spectab th,
    .pinfo .pinfo__spectab td {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        line-height: 1.35 !important;
    }
    .btn-buy.btn-contact-now {
        border-radius: 999px !important;
    }
}

@media (max-width: 768px) {
    nav.toc .toc__inner {
        padding: 12px 5px 14px !important;
    }
    nav.toc .toc__title {
        margin-bottom: 10px !important;
        display:none;
    }
    nav.toc ul {
        padding-left: 0 !important;
    }
    nav.toc a {
        margin-left: 0 !important;
        padding-left: 12px !important;
    }
    nav.toc a.lvl3 {
        padding-left: 26px !important;
    }
}

.pcat-desc {
    max-width: 960px;
    margin: 14px 0 28px;
    color: var(--on-dark-muted);
    font-size: 15px;
    line-height: 1.7;
}
.pcat-desc p {
    margin: 0 0 14px;
}
.pcat-desc p:last-child {
    margin-bottom: 0;
}
.pcat-desc h2,
.pcat-desc h3,
.pcat-desc h4 {
    color: var(--on-dark);
    font-weight: 500;
    letter-spacing: .01em;
    margin: 22px 0 10px;
    line-height: 1.3;
}
.pcat-desc h2 { font-size: 22px; }
.pcat-desc h3 { font-size: 18px; }
.pcat-desc h4 { font-size: 16px; }
.pcat-desc a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s ease;
}
.pcat-desc a:hover {
    color: var(--gold-light);
}
.pcat-desc ul,
.pcat-desc ol {
    margin: 0 0 14px;
    padding-left: 22px;
}
.pcat-desc ul li,
.pcat-desc ol li {
    margin-bottom: 6px;
}
.pcat-desc img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 8px 0;
}
.pcat-desc blockquote {
    margin: 14px 0;
    padding: 10px 16px;
    border-left: 3px solid var(--gold);
    background: var(--hd-white-3);
    font-style: italic;
}
@media (max-width: 768px) {
    .pcat-desc {
        font-size: 14.5px;
        margin: 10px 0 22px;
    }
    .pcat-desc h2 { font-size: 19px; }
    .pcat-desc h3 { font-size: 16px; }
}

@media (min-width: 1025px) {
    .m-cat {
        grid-auto-rows: 350px !important;
    }
}

@media (min-width: 1025px) {
    .m-cat .thv__more {
        height: 30px !important;
        min-height: 30px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 30px !important;
    }
}

.search-modal:not(.is-open) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.site-header .icon-btn,
.site-header .nav__search-btn.icon-btn {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

.nav__search-ph {
    flex: 1;
    font-size: 13px;
    font-weight: 300;
    opacity: 0.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    pointer-events: none;
}

input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    font-size:18px;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html {
    scrollbar-color: rgba(216, 154, 78, .6) var(--hd-black-60);
    scrollbar-width: thin;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--hd-black-60);
}
::-webkit-scrollbar-thumb {
    background: rgba(216, 154, 78, .5);
    border-radius: 6px;
    border: 2px solid var(--hd-black-60);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(216, 154, 78, .8);
}

.pagehero--simple {
    padding: 90px 0 40px;
    background: linear-gradient(180deg, var(--hd-gold-8) 0%, transparent 100%);
    border-bottom: 1px solid var(--hd-white-6);
}
.pagehero--simple .pagehero__in {
    position: relative;
    z-index: 1;
}
.pagehero--simple .pagehero__crumb {
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--on-dark-muted);
    margin-bottom: 14px;
}
.pagehero--simple .pagehero__crumb a {
    color: inherit;
    text-decoration: none;
}
.pagehero--simple .pagehero__crumb a:hover {
    color: var(--gold);
}
.pagehero--simple .pagehero__crumb span {
    margin: 0 8px;
}
.pagehero--simple .pagehero__title {
    font-size: 40px;
    font-weight: 300;
    letter-spacing: .01em;
    margin: 0;
    color: var(--on-dark);
}
.page-default__band {
    padding: 44px 0 90px;
}
.page-article {
    max-width: 960px;
    margin-left: 0;
    margin-right: auto;
    color: var(--hd-white-88);
    font-size: 15.5px;
    line-height: 1.75;
}
.page-article p {
    margin: 0 0 16px;
}
.page-article p:last-child { margin-bottom: 0; }
.page-article h2,
.page-article h3,
.page-article h4 {
    color: var(--gold);
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.3;
    margin: 32px 0 14px;
}
.page-article h2 { font-size: 24px; }
.page-article h3 { font-size: 19px; }
.page-article h4 { font-size: 16px; }
.page-article h2:first-child,
.page-article h3:first-child,
.page-article h4:first-child { margin-top: 0; }
.page-article a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.page-article a:hover { color: var(--gold-light); }
.page-article ul,
.page-article ol {
    margin: 0 0 16px;
    padding-left: 24px;
}
.page-article ul li,
.page-article ol li {
    margin-bottom: 8px;
}
.page-article img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 12px 0;
}
.page-article blockquote {
    margin: 18px 0;
    padding: 12px 18px;
    border-left: 3px solid var(--gold);
    background: var(--hd-white-3);
    font-style: italic;
}
.page-article pre {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: transparent;
    padding: 0;
    margin: 0 0 16px;
    white-space: pre-wrap;
    word-break: break-word;
    color: inherit;
}
@media (max-width: 768px) {
    .pagehero--simple { padding: 60px 0 24px; }
    .pagehero--simple .pagehero__title { font-size: 28px; }
    .page-default__band { padding: 28px 0 60px; }
    .page-article { font-size: 15px; }
    .page-article h2 { font-size: 20px; }
    .page-article h3 { font-size: 17px; }
}

@media (max-width: 1024px) {
    .site-header ~ .main .hero,
    .main.page-home .hero,
    .hero {
        height: 100svh !important;
        min-height: 100svh !important;
    }
    .hero .slide.is-active .slide__bg {
        animation: none !important;
        transform: none !important;
    }
    .hero .slide__bg {
        transition: none !important;
        will-change: auto !important;
    }
}

.vg-card .hovervid,
.vg-card__media video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    background: var(--hd-black-soft);
}

@media (max-width: 640px) {
    .search-modal__panel {
        padding-top: 56px !important;
    }
    .search-modal__close {
        top: 12px !important;
        right: 12px !important;
        z-index: 2;
    }
    .search-modal__form {
        padding-right: 4px;
    }
}

@media (max-width: 768px) {
    .sh-enter {
        padding: 2.9px 9.6px !important;
        gap: 5.1px !important;
    }
    .sh-card__title {
        margin-bottom: 0 !important;
    }
    .sh-card__loc {
        margin-bottom: 0 !important;
    }
    .sh-card__body {
        padding: 10px 20px !important;
    }
}

.pinfo__desc-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 0 0.3em;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--gold);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: normal;
    cursor: pointer;
    transition: color .2s ease;
    vertical-align: baseline;
}
.pinfo__desc-more::after {
    content: "»";
    font-size: 14px;
    transition: transform .25s ease;
}
.pinfo__desc-more:hover {
    color: var(--gold-light);
}
.pinfo__desc-more:hover::after {
    transform: translateX(3px);
}
.pinfo-desc-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.pinfo-desc-modal.is-open {
    display: flex;
}
.pinfo-desc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--hd-overlay-modal);
    backdrop-filter: blur(4px) saturate(120%);
}
.pinfo-desc-modal__panel {
    position: relative;
    width: 100%;
    max-width: 860px;
    max-height: 82vh;
    overflow-y: auto;
    background: var(--ink-2);
    border: 1px solid var(--line-mid);
    border-radius: 14px;
    padding: 32px 34px 28px;
    box-shadow: 0 30px 90px -30px rgba(var(--black-rgb), .9);
    color: var(--on-dark);
}
.pinfo-desc-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    color: var(--on-dark);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background .2s ease;
}
.pinfo-desc-modal__close:hover {
    background: var(--hd-white-8);
    color: var(--gold);
}
.pinfo-desc-modal__title {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--gold);
}
.pinfo-desc-modal__body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--on-dark-muted);
    word-break: break-word;
}
.pinfo-desc-modal__body p {
    margin: 0 0 14px;
    padding: 0 !important;
}
.pinfo-desc-modal__body p:last-child {
    margin-bottom: 0;
}
.pinfo-desc-modal__body h3, .pinfo-desc-modal__body h4 {
    font-weight: 600;
    line-height: 1.3;
    margin: 20px 0 10px;
    color: var(--on-dark);
}
.pinfo-desc-modal__body strong {
    font-weight: 600;
    color: var(--ink);
}
.pinfo-desc-modal__body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0;
}
body.pinfo-desc-open {
    overflow: hidden;
}
@media (max-width: 640px) {
    .pinfo-desc-modal { padding: 16px; }
    .pinfo-desc-modal__panel { padding: 24px 20px 20px; max-height: 88vh; }
    .pinfo-desc-modal__title { font-size: 17px; }
    .pinfo-desc-modal__body { font-size: 14.5px; }
}

.gallery__main { position: relative; overflow: hidden; }
.gallery__main .gallery__video {
    position: absolute;
    inset: 0;
    display: none;
    background: var(--hd-black-soft);
    z-index: 1;
}
.gallery__main .gallery__video video,
.gallery__main .gallery__video iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border: 0;
}
.gallery__main.is-video img#galleryMain { visibility: hidden; }
.gallery__main.is-video .gallery__video { display: block; }
.gallery__main.is-video .gallery__nav { z-index: 3; }

.gallery__dots .gallery__dot--video {
    display: block;
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    background: var(--gold);
    border: 1px solid var(--gold);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}
.gallery__dots .gallery__dot--video:hover,
.gallery__dots .gallery__dot--video.is-active {
    background: var(--gold);
    transform: scale(1.15);
}

.gallery__play-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    padding: 0;
    background: var(--gold);
    border: 0;
    border-radius: 50%;
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 8px 24px -6px rgba(var(--black-rgb), .5);
    transition: background .25s ease, transform .25s ease;
}
.gallery__play-center svg {
    width: 24px;
    height: 24px;
    margin-left: 3px;
    fill: currentColor;
}
.gallery__play-center:hover {
    background: var(--red-accent-hover);
    transform: translate(-50%, -50%) scale(1.08);
}
.gallery__main.is-video .gallery__play-center { display: inline-flex; }
.gallery__main.is-video.is-playing .gallery__play-center { display: none; }

.pdp__main .pinfo {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.pdp__main .pinfo > * { flex: 0 0 auto; }
.pdp__main .pinfo__specs { margin-top: 16px !important; padding-top: 0 !important; }
.pdp__main .pinfo .pspecs { margin: 10px 0 !important; padding: 10px 0 0 !important; }
.pdp__main .pinfo .buybox { margin: 5px 0 !important; padding: 5px 0 !important; }
.pdp__main .pinfo__desc { margin-bottom: 8px !important; }
.pdp__main .pinfo__highlights { font-size: 14px;}

@media (min-width: 901px) {
    .pdp__main .pinfo__specs {
        flex: 1 1 auto !important;
        overflow: visible;
        min-height: 0;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .pdp__main .pinfo__specs-table-wrap {
        flex: 1 1 auto;
        overflow: hidden;
        min-height: 0;
    }
    .pdp__main .pinfo__specs .pinfo__specs-more { display: none; }
    .pdp__main .pinfo__specs.has-overflow .pinfo__specs-more {
        display: block;
        position: static;
        padding: 8px 0 4px;
        flex: 0 0 auto;
    }
}
@media (max-width: 900px) {
    #ptab-btn-specs,
    #ptab-specs { display: none !important; }
    .pinfo__specs-more { display: none !important; }
}

.pinfo__price { margin: 8px 0 12px; font-size: 15px; font-weight: 500; }
.pinfo__price .price-label { color: var(--ink); font-weight: 300; }
.pinfo__price .price-value { color: var(--gold); font-weight: 600; }

@media (max-width: 640px) {
    .pinfo .btn-buy,
    .pinfo .btn-contact-now,
    .btn-buy.btn-contact-now {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        padding: 11px 24px !important;
        font-size: 13px !important;
        letter-spacing: normal !important;
        text-transform: none !important;
        border: 1px solid var(--gold) !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: var(--ink) !important;
        transition: background .25s ease, color .25s ease !important;
    }
    .pinfo .btn-buy:hover,
    .pinfo .btn-contact-now:hover,
    .btn-buy.btn-contact-now:hover {
        background: var(--gold) !important;
        color: var(--on-dark) !important;
    }
}

.cform .wpcf7-submit.wpcf7-submit,
.contact-grid .cform .wpcf7-submit.wpcf7-submit,
input.wpcf7-submit.btn--add {
    display: inline-block !important;
    width: auto !important;
    padding: 5px 10px !important;
    background: linear-gradient(115deg, var(--gold) 50%, transparent 50%) right center / 260% 100% no-repeat !important;
    color: var(--on-dark) !important;
    border: 1px solid var(--gold) !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background-position .8s cubic-bezier(.22,.61,.36,1), color .35s cubic-bezier(.22,.61,.36,1) !important;
}
.cform .wpcf7-submit.wpcf7-submit:hover,
.contact-grid .cform .wpcf7-submit.wpcf7-submit:hover,
input.wpcf7-submit.btn--add:hover {
    background-position: left center !important;
    color: var(--on-dark) !important;
    border-color: var(--gold) !important;
}

.article__meta { margin-bottom: 0 !important; }
.art-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 0;
    border-top: 0 !important;
    border-bottom: 1px solid var(--hd-white-10);
}

.cta__title {
    font-size: clamp(16px, 2.4vw, 32px) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}
@media (max-width: 480px) {
    .cta__title {
        font-size: clamp(14px, 4.6vw, 22px) !important;
    }
}

.page-projects .pmasonry {
    display: block !important;
    column-count: 3 !important;
    column-gap: 20px !important;
    grid-template-columns: unset !important;
    grid-auto-flow: unset !important;
    gap: initial !important;
}
.page-projects .pmasonry .jcard {
    display: inline-block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    grid-column: unset !important;
    grid-row: unset !important;
    margin: 0 0 20px !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}
.page-projects .pmasonry .jcard img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    display: block !important;
}
@media (max-width: 900px) {
    .page-projects .pmasonry { column-count: 2 !important; }
}
@media (max-width: 560px) {
    .page-projects .pmasonry { column-count: 1 !important; }
}

.page-projects .pmasonry.pmasonry--rr3 {
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
    column-count: unset !important;
    columns: unset !important;
}
.page-projects .pmasonry.pmasonry--rr3 .pmasonry__col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}
.page-projects .pmasonry.pmasonry--rr3 .pmasonry__col .jcard {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    break-inside: unset !important;
    page-break-inside: unset !important;
}
@media (max-width: 900px) {
    .page-projects .pmasonry.pmasonry--rr3 {
        display: block !important;
        column-count: 2 !important;
        column-gap: 20px !important;
        gap: unset !important;
    }
    .page-projects .pmasonry.pmasonry--rr3 .pmasonry__col {
        display: contents !important;
    }
    .page-projects .pmasonry.pmasonry--rr3 .pmasonry__col .jcard {
        display: inline-block !important;
        margin: 0 0 20px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}
@media (max-width: 560px) {
    .page-projects .pmasonry.pmasonry--rr3 {
        column-count: 1 !important;
    }
}

.pmasonry .jcard.is-hidden { display: none !important; }

@media (max-width: 720px) {
    .page-projects .pagehero {
        min-height: auto !important;
        height: auto !important;
        padding: 0 !important;
        position: relative !important;
        display: block !important;
    }
    .page-projects .pagehero > img {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: contain !important;
    }
    .page-projects .pagehero__in {
        position: static !important;
        padding: 8px 16px !important;
        background: var(--hd-black-soft) !important;
    }
    .page-projects .pagehero__crumb {
        color: var(--hd-white-70) !important;
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }
    .page-projects .pagehero__title {
        color: var(--ink) !important;
        font-size: 18px !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        text-align:center;
    }

    .page-projects .jcard { display: flex !important; flex-direction: column !important; background: var(--hd-black-soft) !important; overflow: hidden !important; border-radius: 8px !important; }
    .page-projects .jcard > img { position: static !important; width: 100% !important; height: auto !important; display: block !important; }
    .page-projects .jcard .jcard__ov { display: none !important; }
    .page-projects .jcard::after { display: none !important; }
    .page-projects .jcard .jcard__txt {
        position: static !important;
        display: block !important;
        padding: 10px 12px !important;
        background: transparent !important;
        opacity: 1 !important;
        color: var(--ink) !important;
    }
    .page-projects .jcard .jcard__tag {
        display: inline-block !important;
        color: var(--gold) !important;
        font-size: 11px !important;
        letter-spacing: .12em !important;
        text-transform: uppercase !important;
        margin-bottom: 4px !important;
    }
    .page-projects .jcard .jcard__name {
        display: block !important;
        color: var(--ink) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }
    .page-projects .jcard .jcard__loc {
        display: block !important;
        color: var(--hd-white-70) !important;
        font-size: 12px !important;
        margin-top: 2px !important;
    }
}

.entry-content h2, .article h2, .tpl-content h2, .pinfo-desc-modal__body h2 {
    color: var(--gold) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    margin: 24px 0 12px !important;
}
.entry-content ul, .article ul, .tpl-content ul, .pinfo-desc-modal__body ul {
    list-style: disc !important;
    padding-left: 24px !important;
    margin: 12px 0 !important;
}
.entry-content ol, .article ol, .tpl-content ol, .pinfo-desc-modal__body ol {
    list-style: decimal !important;
    padding-left: 24px !important;
    margin: 12px 0 !important;
}
.entry-content li, .article li, .tpl-content li, .pinfo-desc-modal__body li {
    display: list-item !important;
    margin-bottom: 6px !important;
    line-height: 1.6 !important;
    color: var(--on-dark-muted);
    font-size: 14px;
}

.mega--cards .mcard[style*="--mcard-img"]::before {
    background-image: var(--mcard-img) !important;
}

.fwslider__viewport {
    aspect-ratio: 2 / 1 !important;
    height: auto !important;
}
.mona-about-page .altrow__media,
.mona-about-page .about-intro__media,
.altrow__media,
.about-intro__media {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
}

.pmasonry {
    columns: 3;
    column-gap: var(--gap);
    padding-bottom: 64px;
    display: block;
}
.pmasonry .jcard {
    display: block;
    break-inside: avoid;
    margin-bottom: var(--gap);
}
@media (max-width: 1024px) {
    .pmasonry { columns: 2; }
}
@media (max-width: 600px) {
    .pmasonry { columns: 1; }
}

nav.toc ul,
nav.toc ul li {
    list-style: none !important;
}
nav.toc ul {
    padding-left: 0 !important;
    margin: 0 !important;
}
nav.toc ul li {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .tile__play, .projvid__play, .vplay, .vg-play span, .vg-card__play, .vidcard__play {
        width: 38px !important;
        height: 38px !important;
    }
}

@media (max-width: 1024px) {
    .nav.is-open .nav__link {
        width: 100%;
        padding: 12px 28px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 1024px) {
    .nav.is-open .nav__item:has(> .nav__chev-btn) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }
    .nav.is-open .nav__item:has(> .nav__chev-btn) > .nav__link {
        flex: 1 !important;
        width: auto !important;
    }
    .nav.is-open .nav__item:has(> .nav__chev-btn) > .mega {
        flex: 0 0 100% !important;
    }
    .nav__chev-btn {
        display: none;
    }
    .nav.is-open .nav__chev-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 80px !important;
        padding: 0 5px !important;
        flex-shrink: 0 !important;
        background: transparent !important;
        border: 0 !important;
        cursor: pointer !important;
        color: inherit !important;
        opacity: 0.8 !important;
    }
    .nav__chev-btn .chev {
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
        transition: transform .3s var(--ease, ease) !important;
    }
    .nav__item.is-expanded .nav__chev-btn .chev {
        transform: rotate(180deg) !important;
    }
}

.nart__ex {
    font-size: 14px !important;
}

@media (max-width: 768px) {
    .page-job .jhero {
        height: auto;
        aspect-ratio: 2 / 1;
    }
}

.pagehero--has-banner {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}
.page-default .page-default__band {
    padding-top: 24px !important;
}

.relsvc .pgrid .ptile {
    aspect-ratio: unset;
    display: flex;
    flex-direction: column;
    height: auto;
    border-radius: 8px;
    overflow: hidden;
}
.relsvc .pgrid .ptile img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    flex: 0 0 auto;
    transition: transform .8s var(--ease, ease);
}
.relsvc .pgrid .ptile:hover img {
    transform: scale(1.05);
}
.relsvc .pgrid .ptile .ptile__label {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    color: var(--on-dark);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    padding: 10px 14px 14px;
    letter-spacing: .01em;
}
.relsvc .pgrid .ptile::after {
    display: none !important;
}

.pcat--category .pgrid .ptile { display: block !important; }
.pcat__loadmore-wrap { text-align: center; margin: 28px 0 8px; }
.pcat__loadmore {
    display: inline-flex; align-items: center; gap: 8px;
    appearance: none; cursor: pointer; font: inherit;
    font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
    color: var(--hd-gold-alt); background: none;
    border: 1px solid var(--hd-gold-alt); border-radius: 6px; padding: 7px 18px;
    transition: background .25s var(--ease, ease), color .25s var(--ease, ease);
}
.pcat__loadmore:hover { background: var(--hd-gold-alt); color: var(--on-dark); }
.pcat__loadmore-arr { width: 12px; height: 12px; }
.pcat--category.is-expanded .pgrid .ptile { display: block !important; }


.wp-caption.aligncenter {
    width: 100% !important;
    max-width: 810px;
    margin: 0 auto !important;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

.wp-caption.aligncenter img {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.wp-caption.aligncenter .wp-caption-text {
    width: 100%;
    margin: 8px auto 0;
    text-align: center;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .wp-caption.aligncenter {
        width: 100% !important;
        max-width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .wp-caption.aligncenter img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}


.acf-fields>.acf-tab-wrap .acf-tab-group li.active a{display:none;}
/* ====================================================
   STICKY SIDEBAR (BÁM LỀ PHẢI)
==================================================== */
.sticky-sidebar {
    position: fixed;
    right: 0;
    bottom: 10%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: -2px 2px 10px rgba(var(--black-rgb),0.1);
}

.sticky-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30px; 
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s;
}

.sticky-zalo {
    background-color: var(--hd-red);
    color: var(--ink);
    padding: 8px 0;
}
.sticky-zalo:hover {
    background-color: var(--hd-red-hover); 
    color: var(--ink);
}
.sticky-zalo svg {
    width: 22px;
    height: 22px;
    margin-bottom: 10px;
}

.sticky-text {
    font-size: 14px;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.sticky-top {
    background-color: var(--hd-text-light);
    color: var(--ink);
    padding: 7px 0;
}
.sticky-top:hover {
    background-color: var(--hd-text-light);
}
.sticky-top svg {
    width: 26px;
    height: 20px;
}

html {
    scroll-behavior: smooth;
}

/* =========================================================
   HOMEDOOR - FULL LIGHT THEME (BẢN GOM GỌN, GIỮ NGUYÊN LOGIC GỐC)
   ========================================================= */

/* 2. BASE, HEADER & MENU */
body, main, .plp, .pdp, .footer, .pfilter, .subnav, .secnav, .abmenu, .catbar, .fbar, .page-article, .article__body {
    color: var(--on-dark) !important;
}

.pfilter{
    background: var(--ink-2) !important;
}

body .site-header, body .site-header.is-scrolled { 
    background-color: var(--hd-white-98) !important; 
    border-bottom: 1px solid var(--hd-border-soft) !important; 
}
body .site-header .nav__link, body .site-header .icon-btn, body .site-header .lang a { 
    color: var(--on-dark) !important; 
    text-shadow: none !important; 
}
body .site-header .nav__link:hover, body .site-header .icon-btn:hover, body .site-header .lang a:hover { color: var(--gold) !important; }
body .site-header .nav__link.is-active::after { background-color: var(--gold) !important; }
body .lang a.is-active { background-color: var(--gold) !important; color: var(--ink) !important; border-color: var(--gold) !important; }

@media (min-width: 1025px) {
    body.home .site-header:not(.is-scrolled), body:has(.pagehero) .site-header:not(.is-scrolled), body:has(.hero) .site-header:not(.is-scrolled) {
        background-color: transparent !important; border-bottom-color: transparent !important;
    }
    body.home .site-header:not(.is-scrolled) .nav__link, body.home .site-header:not(.is-scrolled) .icon-btn, body.home .site-header:not(.is-scrolled) .lang a,
    body:has(.pagehero) .site-header:not(.is-scrolled) .nav__link, body:has(.pagehero) .site-header:not(.is-scrolled) .icon-btn, body:has(.pagehero) .site-header:not(.is-scrolled) .lang a,
    body:has(.hero) .site-header:not(.is-scrolled) .nav__link, body:has(.hero) .site-header:not(.is-scrolled) .icon-btn, body:has(.hero) .site-header:not(.is-scrolled) .lang a {
        color: var(--ink) !important; text-shadow: none !important;
    }
}

@media (max-width: 1024px) {
    body .site-header, body.home .site-header:not(.is-scrolled), body:has(.pagehero) .site-header:not(.is-scrolled), body:has(.hero) .site-header:not(.is-scrolled) {
        background-color: var(--ink) !important; border-bottom: 1px solid var(--hd-border-soft) !important;
    }
    .nav.is-open { background-color: var(--ink) !important; }
    body .site-header .nav__link, body .site-header .icon-btn, body .site-header .lang a, body .nav.is-open .nav__link { 
        color: var(--on-dark) !important; text-shadow: none !important; 
    }
    body .nav-toggle::before, body .nav-toggle.is-open::before { color: var(--on-dark) !important; }
    .nav.is-open .mega-sub__links a, .nav.is-open .mega--simple a, .nav.is-open .mega__group-links a { color: var(--hd-text-main) !important; }
    .nav.is-open .mega-sub__links a:hover, .nav.is-open .mega--simple a:hover { color: var(--gold) !important; }
}

.mega--cards, .mega__panel { background-color: var(--ink) !important; border-color: var(--line-soft) !important; }
.mega__group-title { color: var(--gold) !important;  }
.mega__group-links a { color: var(--hd-text-main) !important; }
.mega__group-links a:hover { color: var(--gold) !important; }
body .mega--cards .mega__arrow, body .mega__arrow { background-color: var(--ink) !important; border: 1px solid var(--hd-border-strong) !important; color: var(--on-dark) !important; box-shadow: 0 4px 10px var(--hd-black-8) !important; }
body .mega--cards .mega__arrow:hover, body .mega__arrow:hover { background-color: var(--gold) !important; border-color: var(--gold) !important; color: var(--ink) !important; }

/* 3. CHỮ TRÊN ẢNH HERO / SLIDER / CATEGORY */
.hero .slide__title, .hero .slide__sector, .hero .hero__link, .pagehero__title, .pagehero__crumb, .pagehero__crumb a, .pagehero__crumb span,
.tile__label, .tile__sub, .thv__title, .thv__col span, .thv__item, .jcard__name, .jcard__tag, .jcard__ov-name, .jcard__ov-meta, .jcard__ov-meta b,
.jhero__name, .jhero__tag, .mcard__label, .sh-card__title, .projvid__cap, .projslide__title, .projslide__tag, .cta__title, .cta__sub, body .pfeature__overlay.pfeature__overlay * {
    color: var(--ink) !important;
    text-shadow: none !important; 
}

.hero .hero__link:hover { background-color: var(--ink) !important; color: var(--on-dark) !important;  }
.mcard.is-current .mcard__label, .mcard:hover .mcard__label { color: var(--ink) !important; text-shadow: 0 1px 3px var(--hd-black-50) !important; } 
body .projslide .hero__link, body .projslide a.hero__link { color: var(--ink) !important; border: 1px solid var(--ink) !important; background-color: transparent !important; }
body .projslide .hero__link:hover, body .projslide a.hero__link:hover { background-color: var(--gold) !important; border-color: var(--gold) !important; color: var(--on-dark) !important; }

/* 4. KHỐI THẺ (CARD) */
.ncard, .geo-card, .cind, .cap, .subbrand, .svc-card, .dl-card, .wcard, .used, .summary, .order-card, .feat { background-color: var(--ink-2) !important; border: 1px solid var(--hd-border-soft) !important; box-shadow: 0 2px 10px rgba(var(--black-rgb),0.03) !important; }
.ncard:hover, .geo-card:hover { background-color: var(--ink) !important;  }
.ncard__title, .ncard__date, .svc-card h3, .dl-card__title, .warranty__body h2, .altrow h3, .article__title, .nfeat__heading, .nfeat__title, .jbody h2, .page-article h2, .pinfo__name, .geo-card__country, .geo-card__row, .feat h3, .feat p { color: var(--on-dark) !important; }
.warranty__body p, .altrow p, .jbody p, .article__body p, .page-article p, .pinfo__desc { color: var(--hd-text-main) !important; }
@media (max-width: 768px) {
    body .page-projects .jcard.jcard { background-color: var(--ink-2) !important; border: 1px solid var(--hd-border-soft) !important; }
    body .page-projects .jcard.jcard .jcard__name, body .page-projects .jcard.jcard .jcard__loc, body .page-projects .jcard.jcard .jcard__txt { color: var(--on-dark) !important; text-shadow: none !important; }
}

/* 5. NÚT BẤM (BUTTONS) & MXH */
.btn-zalo { background-color: var(--hd-blue) !important; border: none !important; color: var(--ink) !important; }
.btn-zalo:hover { background-color: var(--hd-blue-hover) !important; }
.btn-zalo svg, .btn-zalo i, .btn-zalo path { fill: var(--ink) !important; color: var(--ink) !important; }

.hero__arrow, .projslider__arrow, .gallery__nav { background-color: rgba(var(--black-rgb),0.3) !important; border: 1px solid var(--hd-white-50) !important; color: var(--ink) !important; }
.hero__arrow:hover, .projslider__arrow:hover, .gallery__nav:hover { background-color: var(--hd-black-70) !important; border-color: var(--ink) !important; }

.gallery__dots button, .hero__dots button, .projslider__dots button { border: 1px solid var(--hd-border-strong) !important; background-color: transparent !important; }
.gallery__dots button.is-active, .hero__dots button.is-active, .projslider__dots button.is-active { background-color: var(--gold) !important; border-color: var(--gold) !important; }

.hero__link.hero__link .btn--add, .btn-buy, .btn-dl--primary, .sh-enter, .news__more, .jcard__cta, .btn--ghost-line, .thv__more, .nfeat__btn, .btn-dl--ghost { border: 1px solid var(--gold) !important; color: var(--ink) !important; background-color: var(--gold) !important; }
.hero__link.hero__link:hover, .btn--add:hover, .btn-buy:hover, .btn-dl--primary:hover, .sh-enter:hover, .news__more:hover, .jcard__cta:hover, .btn--ghost-line:hover, .thv__more:hover, .nfeat__btn:hover, .btn-dl--ghost:hover { background-color:var(--ink) !important;   color: var(--on-dark)  !important; }
@media (max-width: 640px) {
 body .hero__link.hero__link ,   body .pinfo .btn-buy.btn-contact-now, body .btn-buy.btn-contact-now.btn-contact-now { background-color: transparent !important; color: var(--gold) !important; border-color: var(--gold) !important; }
body .hero__link.hero__link ,     body .pinfo .btn-buy.btn-contact-now:hover, body .btn-buy.btn-contact-now.btn-contact-now:hover { background-color: var(--gold) !important; color: var(--ink) !important; }
}

/* Share MXH (Gộp từ Fix bổ sung) */
body .art-share { border-bottom: 1px solid var(--hd-border-soft) !important; color: var(--on-dark) !important; }
body .art-share span { color: var(--on-dark) !important; }
body .art-share a { color: var(--on-dark) !important; border-color: var(--hd-border-strong) !important; background-color: transparent !important; }
body .art-share a i, body .art-share a svg { color: var(--on-dark) !important; fill: currentColor !important; }
body .art-share a:hover { background-color: var(--gold) !important; border-color: var(--gold) !important; color: var(--ink) !important; }
body .art-share a:hover i, body .art-share a:hover svg { color: var(--ink) !important; }

/* 6. FORMS, CTA & INPUTS (Gộp từ Base và Fix bổ sung) */
.cform label, .wpcf7-response-output, .cn-field label { color: var(--hd-gray-700) !important; }
.wpcf7-response-output { font-weight: 500 !important; }
input, textarea, select, body .cform select, body .nfilter select, .cform input, .cform textarea, .cta__form input, .coupon input, .qty input, .afilter .affield, .cn-modal input, .cn-modal textarea, .cn-modal select {
    color: var(--on-dark) !important; background-color: var(--ink) !important; border: 1px solid var(--hd-border-strong) !important;
}
input::placeholder, textarea::placeholder { color: var(--hd-text-faint) !important; opacity: 1 !important; }
input:focus, textarea:focus, select:focus {  outline: none !important; }
body .cn-field.cn-field input[readonly] { background-color: var(--hd-bg-light) !important; color: var(--hd-text-main) !important; }

/* Form CTA */
body .cta__form { border-bottom: none !important; }
body .cta__form .wpcf7-form { display: flex !important; align-items: flex-start !important; gap: 12px !important; }
body .cta__form .cta__submit, body .cta__form .wpcf7-submit, body .cta__form .wpcf7-form-control-wrap { margin: 0 !important; }
body .cta__form input[type="email"], body .cta__form input { height: 48px !important; line-height: 48px !important; padding: 0 16px !important; box-sizing: border-box !important; border-radius: 4px !important; width: 100% !important; background-color: var(--ink) !important; color: var(--on-dark) !important; border: 1px solid var(--hd-border-strong) !important; }

/* Form Submit Buttons */
body .cform .wpcf7-submit, body .contact-grid .cform .wpcf7-submit, body input.wpcf7-submit.btn--add, body .cta__submit, body .cn-modal__dialog .wpcf7-submit, body .cn-modal__dialog .cn-submit, body .cta .hero__link {
    height: 48px !important; min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 24px !important; box-sizing: border-box !important; border-radius: 4px !important;
    background-color: var(--on-dark) !important; background-image: none !important; color: var(--ink) !important; border: 1px solid var(--on-dark) !important;
}
body .cform .wpcf7-submit:hover, body .contact-grid .cform .wpcf7-submit:hover, body input.wpcf7-submit.btn--add:hover, body .cta__submit:hover, body .cn-modal__dialog .wpcf7-submit:hover, body .cn-modal__dialog .cn-submit:hover, body .cta .hero__link:hover {
    background-color: var(--gold) !important; color: var(--ink) !important; border-color: var(--gold) !important;
}
@media (max-width: 640px) {
    body .cta__form .wpcf7-form { flex-direction: column !important; gap: 16px !important; }
    body .cta__form .cta__submit, body .cta__form .wpcf7-submit, body .cta .hero__link { width: 100% !important; }
}

/* Checkbox */
body .padv__opt input { border: 1.5px solid var(--hd-text-light) !important; background-color: var(--ink) !important; }
body .padv__opt input:checked { background-color: var(--gold) !important; border-color: var(--gold) !important; }
body .padv__opt input:checked::after { border-color: var(--ink) !important; }
body .padv__opt input:focus-visible { outline: 2px solid var(--gold) !important; }

/* 7. MODALS VÀ POPUP */
.search-modal__panel, .pinfo-desc-modal__panel, .vg-modal__panel, body .cn-modal.cn-modal .cn-modal__dialog { background-color: var(--ink) !important; border-color: var(--hd-border-strong) !important; }
.search-modal__backdrop { background-color: var(--hd-white-90) !important; }
.search-modal__input, .search-modal__close, .pinfo-desc-modal__close, .vg-modal__close, body .cn-modal__close.cn-modal__close { color: var(--on-dark) !important; background-color: transparent !important; }
.search-modal__close:hover, .pinfo-desc-modal__close:hover, .vg-modal__close:hover, body .cn-modal__close.cn-modal__close:hover { color: var(--gold) !important; }
.search-modal__label, .search-modal__suggest a { color: var(--hd-text-main) !important; border-color: var(--hd-border-strong) !important; }
.search-modal__suggest a:hover { color: var(--gold) !important; border-color: var(--gold) !important; background-color: var(--hd-bg-light) !important; }
.pinfo-desc-modal__title, .pinfo-desc-modal__body h3, .pinfo-desc-modal__body h4, body .cn-modal__title.cn-modal__title { color: var(--gold) !important; }
.pinfo-desc-modal__body, .pinfo-desc-modal__body p, .pinfo-desc-modal__body li, .pinfo-desc-modal__body strong, body .cn-modal__dialog.cn-modal__dialog *, body .cn-modal__sub.cn-modal__sub { color: var(--hd-text-dark) !important; }

/* 8. CHI TIẾT SẢN PHẨM & LỌC */
.subnav a, .secnav a, .pfilter__btn, .catbar__item { color: var(--hd-text-muted) !important; }
.subnav a.is-active, .secnav a.is-active, .pfilter__btn.is-active, .catbar__item.is-active { background-color: var(--gold) !important; color: var(--ink) !important; }
.svctab:hover, .dl-tab:hover, .vg-cat:hover, .opt:hover { background-color: var(--ink-3) !important; color: var(--gold) !important; border-color: var(--gold) !important; }
.subnav a.is-active, .svctab.is-active, .dl-tab.is-active, .vg-cat.is-active { color: var(--ink) !important; background-color: var(--gold) !important; }
body .ptabs__tab.ptabs__tab { color: var(--hd-text-muted) !important; }
body .ptabs__tab.ptabs__tab:hover { color: var(--on-dark) !important; }
body .ptabs__tab.ptabs__tab.is-active { background-color: var(--gold) !important; color: var(--ink) !important; }
body .pfilter__btn:not(.is-active):hover { color: var(--gold) !important; background-color: transparent !important; }

body .pinfo__highlights.pinfo__highlights, body .pinfo__highlights.pinfo__highlights *, body .pinfo__highlights.pinfo__highlights li, .pinfo .pspecs, .pinfo .pspecs * { color: var(--on-dark) !important;  border-color: var(--hd-border-soft) !important; }
body .pinfo__scroll-area .pdesc-tab__body, body .pinfo__scroll-area .pdesc-tab__body *, body .pinfo__specs-table-wrap .pinfo__spectab th, body .pinfo__specs-table-wrap .pinfo__spectab td, .spec-table th, .spec-table td, .pinfo__spectab th, .pinfo__spectab td { color: var(--on-dark) !important; border-bottom: 1px solid var(--hd-border-soft) !important; }
.price-label, .pinfo__price small { color: var(--hd-text-main) !important; }
.opt { color: var(--on-dark) !important; border: 1px solid var(--hd-border-strong) !important; }
.opt:hover { border-color: var(--on-dark) !important; }
.opt.is-active { color: var(--gold) !important; border-color: var(--gold) !important; }
.variant__label { color: var(--hd-text-muted) !important; opacity: 1 !important; }

body .plist__table.plist__table th, body .plist__table.plist__table td, body .padv.padv *, body .plist__empty.plist__empty { color: var(--on-dark) !important; }
body .plist__table tbody tr:hover td { background-color: var(--ink-3) !important; }
body .plist__detailrow.plist__detailrow *, body .pd-spec.pd-spec th, body .pd-spec.pd-spec td { color: var(--on-dark) !important; }

.afilter, .afilter *, .fgroup__title, .fopt, .fopt *, .afilter__clear { color: var(--on-dark) !important; }
.afilter__head { background-color: var(--hd-bg-light) !important; }
body .pfaq.pfaq .pfaq__q, body .pfaq.pfaq .pfaq__a-inner { color: var(--on-dark) !important; }
body .pfaq.pfaq .pfaq__q:hover, body .pfaq.pfaq .pfaq__q[aria-expanded="true"] { color: var(--gold) !important; }

/* 9. MỤC LỤC, CHIA SẺ VÀ PHÂN TRANG */
nav.toc a { color: var(--hd-text-main) !important; }
nav.toc a:hover, nav.toc a.is-active { color: var(--gold) !important; border-left-color: var(--gold) !important; }
nav.toc .toc__title { color: var(--gold) !important; }
nav.toc, nav.toc *, .toc__inner, .toc__inner *, #ez-toc-container * { color: var(--on-dark) !important; }

.share-row span { color: var(--on-dark) !important; }
.share-row a { color: var(--on-dark) !important; border-color: var(--hd-border-strong) !important; background-color: transparent !important; }
.share-row a:hover { background-color: var(--gold) !important; color: var(--ink) !important; border-color: var(--gold) !important; }
.nshare, .nfeat__share, .nart-wrap .nshare { background-color: var(--ink-3) !important; border: 1px solid var(--hd-border-strong) !important; color: var(--on-dark) !important; }
.nshare:hover, .nfeat__share:hover, .nart-wrap .nshare:hover { background-color: var(--gold) !important; color: var(--ink) !important; border-color: var(--gold) !important; }
.nshare__menu { background-color: var(--ink) !important; border: 1px solid var(--hd-border-soft) !important; box-shadow: 0 10px 30px rgba(var(--black-rgb),0.1) !important; }
.nshare__menu a, .nshare__menu button { color: var(--hd-text-dark) !important; }
.nshare__menu a:hover, .nshare__menu button:hover { background-color: var(--hd-red-5) !important; color: var(--gold) !important; }

.pcat__loadmore { color: var(--gold) !important; border-color: var(--gold) !important; }
.pcat__loadmore:hover { background-color: var(--gold) !important; color: var(--ink) !important; }
.page-numbers { color: var(--on-dark) !important; border: 1px solid var(--hd-border-strong) !important; }
.page-numbers.current, .page-numbers:hover { background-color: var(--gold) !important; color: var(--ink) !important; border-color: var(--gold) !important; }

/* 10. BREADCRUMB, LOGO, ĐIỀU KHOẢN */
.breadcrumb span, .pagehero__crumb span, .jmeta__k, .article__cat, .nart__date, .article__meta { color: var(--ink) !important; opacity: 1 !important; }
.map-embed iframe { filter: none !important; }
.marquee__track span { color: var(--on-dark) !important; opacity: 0.8 !important; }
.logos__row .logo img, .cind__logos .clogo img { filter: invert(1) grayscale(1) !important; opacity: 0.8 !important; }
.logos__row .logo:hover img, .cind__logos .clogo:hover img { filter: invert(1) grayscale(0) !important; opacity: 1 !important; }

.polacc__head, .polacc__link { color: var(--on-dark) !important; background-color: var(--ink-2) !important; border: 1px solid var(--line-soft) !important; }
.polacc__body, .polacc__body h2, .polacc__body p, .polacc__body li { color: var(--hd-text-main) !important; }
.polacc__item.is-current { background-color: var(--hd-red-5) !important; }

/* 11. FOOTER */
.footer { background-color: var(--ink-2) !important; border-top: 1px solid var(--line-soft) !important; }
.footer__top, .footer__bottom { border-color: var(--line-soft) !important; }
.footer p, .footer__col a, .footer__contact li, .footer__bottom p, .footer__bottom nav a { color: var(--hd-text-main) !important; }
.footer__col h4, .footer__col a:hover { color: var(--gold) !important; }

/* =========================================================
   BẢN VÁ LỖI (PATCH) BỔ SUNG: TƯƠNG PHẢN TAB, POPUP, BỘ LỌC
   ========================================================= */

/* 1. THANH LIÊN HỆ BÁO GIÁ KHI CUỘN (TẠO NỀN TRẮNG, ĐỔ BÓNG PHÂN CÁCH) */
body .pinfo-sticky, 
body .pdp-sticky, 
body .sticky-add-to-cart, 
body .pinfo__sticky,
body .product-sticky-bar {
    background-color: var(--ink) !important;
    box-shadow: 0 -4px 15px rgba(var(--black-rgb),0.08) !important; 
    z-index: 9999 !important;
}

/* 2. LÀM NỔI BẬT KHU VỰC TAB VÀ BỘ LỌC THÔNG SỐ (BACKGROUND GHI SÁNG) */

body .pinfo__specs-table-wrap
 {
    background-color: var(--ink-2) !important; 
    padding: 10px !important;
}

body .pinfo__scroll-area
 {
    background-color: var(--ink) !important; 
    border: 1px solid var(--hd-border-soft) !important;
 border: 0px solid var(--hd-border-soft) !important;
    padding: 10px !important;
}
.ptabs__bar{
    border-bottom: 1px solid rgba(var(--white-rgb), 0.86) !important;
}

.pinfo__scroll-area{
    scrollbar-color:var(--gold) var(--ink-2) !important;
}
body .ptabs {
    background-color: var(--ink-2) !important; 
    border-radius: 2px !important;
    padding: 15px !important;
}

body .pdesc-tab
{
    background-color: var(--ink-2) !important; 
    border: 1px solid var(--hd-border-soft) !important;
    border-radius: 2px !important;
    padding: 15px !important;
}

/* 3. FIX POPUP BÁO GIÁ: NÚT "GỬI YÊU CẦU" ĐỔI SANG MÀU CAM/ĐỎ ĐỂ KÍCH CLICK, CHỮ TRẮNG */
body .cn-modal__dialog .wpcf7-submit, 
body .cn-modal__dialog .cn-submit,
body .pinfo-desc-modal__panel .wpcf7-submit {
    color: var(--ink) !important; 
    background-color: var(--gold) !important; 
    border-color: var(--gold) !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}
body .cn-modal__dialog .wpcf7-submit:hover, 
body .cn-modal__dialog .cn-submit:hover,
body .pinfo-desc-modal__panel .wpcf7-submit:hover {
    background-color: var(--on-dark) !important; 
    border-color: var(--on-dark) !important;
    color: var(--ink) !important; 
}

/* 4. TRANG SẢN PHẨM: BỘ LỌC KHI ẤN VÀO (ACTIVE) CHUYỂN SANG NỀN GHI, CHỮ ĐEN */
body .pfilter__btn.is-active, 
body .catbar__item.is-active,
body .opt.is-active,
body .fopt.is-active,
body .afilter .active > a {
    background-color: var(--hd-border-soft) !important; 
    color: var(--hd-text-main) !important; 
    border-color: var(--hd-border-strong) !important; 
}

/* Fix riêng cho hover bộ lọc (tránh bị lẫn lộn màu khi chưa active) */
body .pfilter__btn:hover, 
body .catbar__item:hover,
body .opt:hover {
    background-color: var(--ink-3) !important;
    color: var(--on-dark) !important;
}

/* =========================================================
   FIX 5: BỘ LỌC DROPDOWN & CHECKBOX SANG NỀN GHI
   ========================================================= */

/* 1. Xử lý Dropdown xổ xuống (Thẻ Select ở danh mục, lọc giá...) */
body select, 
body .nfilter select, 
body .pfilter select,
body .orderby {
    background-color: var(--ink-2) !important;
    color: var(--on-dark) !important;
    border: 1px solid var(--hd-border-strong) !important;
}
body select:focus {
    background-color: var(--hd-border-soft) !important;
    border-color: var(--on-dark) !important;
}
body select option {
    background-color: var(--ink) !important;
    color: var(--on-dark) !important;
}

/* 2. Xử lý bộ lọc thông số trong trang chi tiết (Class: padv__opt) */
body .padv__opt {
    padding: 6px 10px !important; 
    margin-bottom: 2px !important;
    color: var(--on-dark) !important; 
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

/* Khi di chuột vào bộ lọc */
body .padv__opt:hover {
    background-color: var(--ink-3) !important;
}

/* KHI ĐƯỢC TÍCH CHỌN (ACTIVE) -> CHUYỂN NỀN GHI CHỮ ĐẬM */
body .padv__opt:has(input:checked) {
    background-color: var(--hd-border-soft) !important;
    font-weight: 600 !important;
}

/* Tinh chỉnh lại ô vuông checkbox cho tone-sur-tone với nền ghi */
body .padv__opt input {
    border-color: var(--hd-text-light) !important;
}
body .padv__opt input:checked {
    background-color: var(--on-dark) !important; 
    border-color: var(--on-dark) !important;
}
body .padv__opt input:checked::after {
    border-color: var(--ink) !important; 
}

/* Fix tiêu đề nhóm bộ lọc (Màu Vàng/Đỏ cho dễ nhìn) */
body .padv__gtitle {
    color: var(--gold) !important;
    font-size: 12px !important;
    border-bottom: 1px solid var(--hd-border-soft) !important;
    padding-bottom: 6px !important;
    margin-bottom: 8px !important;
}


/* 2. MỤC LỤC BÀI VIẾT (TIN TỨC, GIẢI PHÁP) - BO KHUNG, TẠO NỀN */
#ez-toc-container, 
body .toc {

    padding: 10px 10px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 12px rgba(var(--black-rgb),0.03) !important;
}
#ez-toc-container .ez-toc-title, 
body .toc .toc__title {
    color: var(--gold) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--hd-border-soft) !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;

}



/* 2. ÉP LỖI FORM VỀ NỀN HỒNG - CHỮ ĐỎ (Xử lý Contact Form 7 bản mới) */
body div.wpcf7 form .wpcf7-response-output,
body div.wpcf7-validation-errors,
body .wpcf7 form.invalid .wpcf7-response-output,
body .wpcf7 form.failed .wpcf7-response-output {
    background-color: var(--hd-bg-err) !important; 
    color: var(--gold) !important; 
    border: 1.5px solid var(--gold) !important;
    border-radius: 6px !important;
    padding: 10px 10px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}
/* Text báo lỗi ngay dưới từng ô input (VD: Vui lòng điền trường này) */
body span.wpcf7-not-valid-tip {
    color: var(--gold) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: block !important;
    margin-top: 5px !important;
}

/* Tách giãn khoảng cách giữa Chữ và Icon mũi tên cho thoáng mắt */
body .cta__submit, body .cta_hero_readmore, body .hero.readmore, body .hero .readmore, body .hero__link, body .thv__more, body .contactNowBtn, body .btn-contact-now, body .submit, body .wpcf7-submit, body .cn-submit, body .btn--add, body .btn-buy, body .btn-dl--primary, body .sh-enter, body .news__more, body .jcard__cta, body .btn--ghost-line, body .nfeat__btn, body .btn-dl--ghost {
    gap: 8px !important; 
}

/* Thêm trạng thái Focus cho người dùng bàn phím */
body .cta__submit:focus-visible, body .thv__more:focus-visible, body .btn-contact-now:focus-visible, body .wpcf7-submit:focus-visible {
    outline: 2px solid var(--on-dark) !important;
    outline-offset: 2px !important;
}

/* TẮT HIỆU ỨNG LƯỚT TRÊN MOBILE - Tránh kẹt trạng thái hover trên màn cảm ứng */
@media (hover: none) {
    body .cta__submit::after, body .cta_hero_readmore::after, body .hero.readmore::after, body .hero .readmore::after, body .hero__link::after, body .thv__more::after, body .contactNowBtn::after, body .btn-contact-now::after, body .submit::after, body .wpcf7-submit::after, body .cn-submit::after, body .btn--add::after, body .btn-buy::after, body .btn-dl--primary::after, body .sh-enter::after, body .news__more::after, body .jcard__cta::after, body .btn--ghost-line::after, body .nfeat__btn::after, body .btn-dl--ghost::after {
        display: none !important;
    }
    
    body .cta__submit:active, body .thv__more:active, body .btn-contact-now:active, body .wpcf7-submit:active {
        background-color: var(--hd-red-active) !important; 
        color: var(--ink) !important;
        border-color: var(--hd-red-active) !important;
    }
}


/* ====================================================
   CSS KHỐI LIÊN HỆ CHUẨN CDN LIGHT (XẾP DỌC)
==================================================== */
footer.footer .footer__info {
    width: 320px; 
}

/* Ép từng cụm liên hệ thành xếp dọc (Label trên, Value dưới) */
footer.footer .footer__contact li {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    margin-bottom: 0px;
}

/* Định dạng dòng 1: Icon + Tiêu đề */
footer.footer .contact-label {
    display: flex;
    flex-direction: row !important; 
    align-items: center !important;
    width: auto; 
    gap: 10px;
    color: var(--hd-gray-700); 
    font-size: 16px;
    padding: 0;
    margin-bottom: 8px; 
}

/* Định dạng Icon đen */
footer.footer .contact-label svg {
    width: 20px;
    height: 20px;
    color: var(--hd-gray-700); 
}

/* Định dạng dòng 2: Nội dung liên hệ */
footer.footer .contact-value {
    padding-left: 0; 
    font-size: 15px;
    line-height: 1.5;
}

/* SĐT và Email màu đỏ chuẩn CDN */
footer.footer .contact-value.text-red,
footer.footer .contact-value.text-red a {
    color: var(--hd-red); 
    text-decoration: none;
    font-weight: 500 !important;
}
footer.footer .contact-value.text-red a:hover {
    color: var(--hd-red-hover);
}

/* Địa chỉ màu xám nhạt hơn */
footer.footer .contact-value.text-gray {
    color: var(--hd-text-faint);
    font-size:13px;
}
/* ====================================================
   CSS KHỐI BOTTOM (THƯƠNG HIỆU & COPYRIGHT) - CHUẨN CDN
==================================================== */
/* 1. Dàn ngang 2 khối Trái (Brands, Copy) - Phải (Social, Nav) */
footer.footer .footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; 
    padding-top: 20px;
}

/* 2. Ép khối trái xếp dọc (Brands nằm trên, Copyright nằm dưới) */
footer.footer .footer__bottom-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 3. Khối Thương hiệu (Solutions & Phụ kiện) */
footer.footer .footer__brands {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 12px; 
}

/* 4. Nút đỏ tạo hình thẻ Tag cắt góc mũi tên (Thay cho "Station group") */
footer.footer .brand-tag {
    background-color: var(--hd-red); 
    color: var(--ink);
    padding: 4px 16px 4px 12px; 
    font-size: 13px;
    font-weight: 500;

    /* Dùng Clip-path cắt góc nhọn bên phải chuẩn xác */
    clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
    border-radius: 3px 0 0 3px;
}

/* 5. Link "PHỤ KIỆN" */
footer.footer .footer__brands a {
    color: var(--hd-gray-700);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;

    transition: color 0.3s ease;
}
footer.footer .footer__brands a:hover {
    color: var(--hd-red);
}

/* 6. Dòng Copyright */
footer.footer .footer__copyright p,
footer.footer .footer__copyright span {
    color: var(--hd-gray-600) !important;
    font-size: 13px !important;
    text-transform: uppercase !important; 
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.5px;
    line-height: 1.5;
}



@media (min-width: 992px) {
    /* ====================================================
       ÉP SIDEBAR DANH MỤC - BẢN REPLICA CDN (CHỈ PC)
    ==================================================== */
    /* 1. ÉP CHIỀU RỘNG VÀ KHUNG BAO NGOÀI */
    aside.catbar {
        width: 220px !important; 
        min-width: 220px !important;
        flex: 0 0 220px !important; 
        background: var(--ink-2) !important; 
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin-bottom: 20px !important;
    }

    /* 2. TIÊU ĐỀ: Thu gọn padding, chữ sắc nét */
    aside.catbar .catbar__head {
        background: var(--hd-red) !important;
        color: var(--ink) !important; 
        padding: 4px 16px !important; 
        margin: 0 !important;
        font-size: 14.5px !important; 
        font-weight: 600 !important;
        text-transform: uppercase !important;
        text-align: left !important;
        letter-spacing: 0.5px !important;
    }

    /* 3. VÙNG CHỨA DANH MỤC: Triệt tiêu mọi khoảng hở */
    aside.catbar .catbar__list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 4. ĐƯỜNG CHỈ (DIVIDER) & FONT CHỮ */
    aside.catbar .catbar__item {
        padding: 8px 10px !important;
        background: var(--ink-2) !important; 
        color: var(--hd-gray-700) !important;
        font-size: 14px !important;
        font-weight:400 !important; 
        border-bottom: 1px solid var(--ink) !important; 
        border-radius: 0 !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
        transition: none !important; 
    }

    aside.catbar .catbar__item:last-child {
        border-bottom: none !important;
    }

    /* 5. HIỆU ỨNG HOVER & ACTIVE (Khối màu chìm) */
    aside.catbar .catbar__item:hover,
    aside.catbar .catbar__item.is-active {
        background: var(--hd-gray-50) !important; 
        color: var(--hd-red) !important;
        font-weight: 600 !important;
    }
}


/* ====================================================
   ÉP BỐ CỤC LƯỚI CHA (TRÁNH SIDEBAR BỊ LỌT THỎM)
==================================================== */
@media (min-width: 1025px) {
    .plp-wrap {
        display: flex !important;
        align-items: flex-start !important;
        gap: 30px !important;
    }
    .plp-wrap .plp__list {
        flex: 1 !important;
        min-width: 0 !important; 
    }
}






/* Layout chia 2 cột cho Hero Project */
.project-split-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 30px;
    margin-bottom: 60px;
    align-items: flex-start;
}

/* Cột thông tin bên trái */
.project-split__info {
    flex: 0 0 320px;
    max-width: 320px;
}

.project-split__title {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 40px;
    line-height: 1.2;
}

/* Định dạng các dòng Meta (Bảng dữ liệu) */
.project-split__meta {
    border-top: 1px solid var(--hd-border-mid);
}

.meta-row {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--hd-border-mid);
    font-size: 14px;
}

.meta-key {
    color: var(--hd-text-faint);
    width: 35%;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.meta-val {
    color: var(--on-dark);
    width: 65%;
    text-align: left;
    font-weight: 500;
}

/* Cột hình ảnh bên phải */
.project-split__media {
    flex: 1;
    min-width: 0; 
}

.project-split__media img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Responsive cho mobile */
@media (max-width: 991px) {
    .project-split-hero {
        flex-direction: column-reverse;
        gap: 20px;
    }
    .project-split__info {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Responsive Mobile & Fix lỗi viền đứt đoạn */
@media (max-width: 991px) {
    /* Ép đảo ngược thứ tự: Đưa khối Ảnh (đang ở dưới) lên trên khối Chữ */
    .project-split-hero {
        display: flex !important;
        flex-direction: column-reverse !important; 
        gap: 20px !important;
    }
    
    .project-split__media {
        width: 100% !important;
        margin-bottom: 5px !important;
    }

    .project-split__info {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}






/* 1. ĐẶT LẠI MỎ NEO CHO JAVASCRIPT HOẠT ĐỘNG */
.site-header .nav__item {
    position: relative !important;
}

/* 2. ĐỔ NỀN GHI NGUYÊN KHỐI, BÁM ĐÚNG MÉP TEXT NGANG */
.site-header .mega.mega--cards {
    position: absolute !important;
    top: 100% !important; 
    left: var(--mega-left) !important;
    width: var(--mega-width) !important;
    
    background-color: var(--ink-3) !important; 
    box-sizing: border-box !important; 
    
    /* LỆNH QUAN TRỌNG: Nới lề trái/phải 40px để 2 nút mũi tên có không gian đứng, không đâm vào ảnh */
    padding: 25px 40px !important; 
    
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 15px 35px rgba(var(--black-rgb),0.1) !important;
    border-top: 1px solid var(--hd-border-mid) !important;
}

/* 3. TẨY SẠCH NỀN CỦA CÁC KHUNG BÊN TRONG */
.site-header .mega__slider {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* 4. CHỈNH KHOẢNG CÁCH ẢNH MÀ KHÔNG LÀM CHẾT SLIDER */
.site-header .mcard {
    background: transparent !important;
    border: none !important;
    
    /* Dùng padding thay vì margin để tạo khoảng cách đều 10px mà không phá vỡ tính toán width của JS */
    padding: 0 10px !important; 
    
    /* TUYỆT ĐỐI KHÔNG DÙNG flex: 1 HAY width: 100% Ở ĐÂY */
}

/* Xóa bỏ mảng trắng thừa thãi dưới dòng chữ sản phẩm */
.site-header .mcard__label {
    background: transparent !important;
}

/* ĐỒNG BỘ MÀU NỀN CHO KHỐI DANH MỤC CON (MEGA PANEL) BÊN DƯỚI */
.site-header .mega__panel {
    background-color: transparent !important; 
    box-shadow: none !important; 
    border: none !important; 
    
    /* Có thể thêm chút khoảng cách trên dưới cho đẹp nếu khối này bị dí sát vào ảnh */
    padding-top: 15px !important; 
}

/* Đề phòng các thẻ bọc bên trong panel cũng bị gán nền trắng từ theme gốc */
.site-header .mega__panel > div,
.site-header .mega__panel ul {
    background-color: transparent !important;
}

/* BỔ SUNG 1: ÉP VÙNG CLICK CỦA CHỮ NỔI LÊN TRÊN CÙNG VÀ MỞ RỘNG TỐI ĐA */
.site-header .nav__link {
    position: relative !important;
    z-index: 9999 !important; 
    display: block !important; 
}

/* BỔ SUNG 2: KHỐI NỀN GHI PHẢI CHỊU NẰM DƯỚI THẺ CHỮ */
.site-header .mega.mega--cards {
    z-index: 9990 !important; 
    
    position: absolute !important;
    top: 100% !important; 
    left: var(--mega-left) !important;
    width: var(--mega-width) !important;
}








/* ========================================================
   PHẦN 1: GIAO DIỆN MÀN HÌNH ĐEN OVERLAY (CHUẨN PC & MOBILE)
   ======================================================== */
.site-header .bm-menu-btn { position: relative !important; z-index: 99999 !important; background: var(--hd-red) !important; color: var(--ink) !important; border: none !important; border-radius: 50% !important; width: 44px !important; height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; margin-left: 15px !important; padding: 0 !important; transition: transform 0.3s ease, background 0.3s ease !important; }
.site-header .bm-menu-btn svg { width: 20px; height: 20px; }
.site-header .bm-menu-btn:hover { transform: scale(1.05) !important; background: var(--hd-red-hover) !important; }

.hd-overlay-menu { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: var(--on-dark) !important; z-index: 999999 !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; overflow-y: auto !important; padding: 12vh 0 50px 0 !important; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.hd-overlay-menu.is-active { opacity: 1; visibility: visible; }

.hd-overlay-close { position: fixed !important; top: 40px !important; right: 40px !important; background: var(--hd-red) !important; border: none !important; border-radius: 50% !important; width: 50px !important; height: 50px !important; color: var(--ink) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 9999999 !important; box-shadow: 0 4px 15px var(--hd-red-30) !important; transition: all 0.3s ease !important; }
.hd-overlay-close svg { width: 24px; height: 24px; stroke: var(--ink); }
.hd-overlay-close:hover { transform: scale(1.1) !important; background: var(--hd-red-hover) !important; }

.hd-overlay-inner { width: 100%; max-width: 1400px; margin: auto; display: grid; grid-template-columns: 300px 1fr 350px; gap: 80px; align-items: flex-start; padding: 0 40px; }
.hd-overlay-brand { display: flex; justify-content: flex-start; }
.overlay-logo-img { width: 100%; max-width: 250px; height: auto; filter: brightness(0) invert(1) !important; opacity: 0.15 !important; transition: 0.3s; pointer-events: none; }

.hd-overlay-nav { padding-left: 40px; border-left: 1px solid var(--hd-white-5); }
.hd-main-links { list-style: none; padding: 0; margin: 0; }
.hd-main-links li { margin-bottom: 22px; }
.hd-main-links a { color: var(--ink) !important; font-size: 35px !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: none !important; transition: color 0.3s ease, padding-left 0.3s ease !important; display: inline-block; letter-spacing: -1px; }
.hd-main-links a:hover { color: var(--hd-red) !important; padding-left: 12px !important; }
.hd-main-links form, .hd-main-links input, .hd-main-links button, .hd-main-links .nav_search-m { display: none !important; }

.hd-overlay-info { padding-top: 10px; }
.info-block { margin-bottom: 35px; }
.info-block h4 { color: var(--hd-gray-400) !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 15px !important; }
.overlay-address { color: var(--hd-gray-300) !important; font-size: 15px !important; line-height: 1.8 !important; margin: 0 !important; }
.overlay-address strong { color: var(--ink) !important; font-weight: 500 !important; }

.hd-overlay-social { display: flex; gap: 12px; margin-top: 30px; }
.hd-overlay-social a { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; background: var(--hd-gray-800) !important; color: var(--hd-gray-400) !important; border-radius: 50% !important; transition: all 0.3s ease !important; }
.hd-overlay-social a svg { width: 20px; height: 20px; }
.hd-overlay-social a:hover { background: var(--hd-red) !important; color: var(--ink) !important; transform: translateY(-3px) !important; }

@media (max-width: 1200px) {
.hd-overlay-inner { grid-template-columns: 250px 1fr 300px; gap: 40px; }
.hd-main-links a { font-size: 32px !important; }
}

@media (max-width: 991px) {
.hd-overlay-inner { grid-template-columns: 1fr; gap: 50px; text-align: center; }
.hd-overlay-brand { justify-content: center; }
.hd-overlay-nav { border-left: none; padding-left: 0; }
.hd-overlay-social { justify-content: center; }
.hd-main-links a:hover { padding-left: 0 !important; transform: scale(1.05); }
.hd-overlay-close { top: 20px !important; right: 20px !important; width: 40px !important; height: 40px !important; }
}

/* ========================================================
   PHẦN 2: CHỐNG ĐÈ CHỮ MENU MOBILE + TRẢ LẠI HIỆU ỨNG TRƯỢT JS
   ======================================================== */
@media (max-width: 1024px) {
.site-header .bm-menu-btn { display: none !important; }

.site-header .nav__item .mega,
.site-header .nav__item .mega.mega--cards,
.site-header .nav__item .sub-menu,
.site-header .nav__item .mega__panel,
.site-header .nav__item .mcard {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
width: 100% !important;
box-shadow: none !important;
background-color: transparent !important;
margin: 0 !important;
padding-left: 15px !important;
}

.site-header .nav__item { position: relative !important; }
}

@media (min-width: 1025px) {
.site-header .icon-btn.nav-toggle { display: none !important; }
}




/* 1. NỀN MỜ (Nhìn xuyên thấu website bên dưới) */
.search-modal__backdrop {
    background-color: var(--hd-black-70) !important; 
    opacity: 1 !important;
}

/* 2. MẢNG ĐEN TRÀN VIỀN (Chỉ chiếm 55% màn hình phía trên) */
.search-modal__panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important; 
    height: auto !important;
    min-height: 55vh !important; 
    background-color: var(--hd-gray-900) !important;
    padding: 12vh 20px 50px !important; 
    margin: 0 !important;
    border: none !important;      
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
}

/* Ép khung nội dung (Form + Gợi ý) nằm giữa, rộng tối đa 1000px */
.search-modal__form,
.search-modal__suggest {
    width: 100% !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3. NÚT ĐÓNG (X) - Bám cố định góc phải trên cùng */
.search-modal__close {
    position: fixed !important;
    top: 30px !important;
    right: 40px !important;
    background: var(--hd-white-10) !important;
    color: var(--ink) !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    z-index: 999 !important;
    font-size: 0 !important; 
    transition: 0.3s !important;
}
.search-modal__close:hover {
    background: var(--hd-white-20) !important;
}
.search-modal__close svg, .search-modal__close i {
    font-size: 20px !important;
    width: 24px !important; 
    height: 24px !important;
}

/* 4. KHUNG NHẬP LIỆU - Xoá viền hộp, chỉ giữ gạch dưới */
.search-modal__form {
    position: relative !important;
    border: none !important;
    border-bottom: 1px solid var(--hd-white-20) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 40px !important;
    display: flex !important;
    align-items: center !important;
}

/* Ẩn kính lúp đỏ bên trái của theme gốc */
.search-modal__form > svg:first-child,
.search-modal__form > i:first-child,
.search-modal__form > img:first-child {
    display: none !important;
}

/* Định dạng chữ nhập vào */
.search-modal__form input {
    background: transparent !important;
    color: var(--ink) !important;
    font-size: 20px !important; 
    font-weight: 300 !important;
    padding: 10px 60px 20px 0 !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    outline: none !important;
}
.search-modal__form input::placeholder {
    color: var(--hd-white-30) !important;
}
.search-modal__form:focus-within {
    border-bottom: 1px solid var(--ink) !important;
}

/* NÚT SUBMIT (Chữ "TÌM KIẾM" đang lỗi) -> Ép thành icon kính lúp bên phải */
.search-modal__form button[type="submit"], 
.search-modal__form .search-btn {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    color: var(--ink) !important;
    border: none !important;
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 0 !important; 
    opacity: 0.5 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: unset !important;
}
.search-modal__form button[type="submit"]:hover,
.search-modal__form .search-btn:hover {
    opacity: 1 !important;
}
/* Thay thế bằng icon kính lúp chuẩn */
.search-modal__form button[type="submit"]::before, 
.search-modal__form .search-btn::before {
    content: "" !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='1.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* 5. ÉP TỪ KHÓA THÀNH HÀNG DỌC */
.search-modal__suggest {
    display: flex !important;
    flex-direction: column !important; 
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0 !important;
    border: none !important;
}

/* Tiêu đề "Từ khóa phổ biến" */
.search-modal__suggest > span,
.search-modal__suggest > div:first-child {
    color: var(--hd-white-40) !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    margin-bottom: 24px !important;
    letter-spacing: 1px !important;
    font-weight: 500 !important;
}

/* Thẻ link từ khóa */
.search-modal__suggest a {
    background: transparent !important;
    color: var(--ink) !important;
    font-size: 18px !important; 
    font-weight: 500 !important;
    padding: 0 !important;
    margin: 0 0 18px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    display: block !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: 0.3s !important;
}
.search-modal__suggest a:hover {
    color: var(--hd-gold-dark) !important; 
    padding-left: 5px !important;
}




/* Nền mờ 70% bên dưới */
.search-modal__backdrop { background-color: var(--hd-black-70) !important; opacity: 1 !important; }

/* Khung đen nửa màn hình trên */
.search-modal__panel { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; max-width: 100vw !important; min-height: 55vh !important; background: var(--hd-gray-900) !important; padding: 12vh 20px 50px !important; margin: 0 !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; }

/* Căn giữa cụm tìm kiếm */
.search-modal__form, .search-modal__suggest { width: 100% !important; max-width: 1000px !important; margin: 0 auto !important; }

/* Ô nhập từ khóa */
.search-modal__form { border: none !important; border-bottom: 1px solid var(--hd-white-20) !important; display: flex !important; margin-bottom: 40px !important; }
.search-modal__form input { background: transparent !important; color: var(--ink) !important; font-size: 20px !important; border: none !important; width: 100% !important; padding: 10px 50px 20px 0 !important; outline: none !important; font-weight: 300 !important; }
.search-modal__form input::placeholder { color: var(--hd-white-30) !important; }

/* Ẩn icon kính lúp cũ bên trái */
.search-modal__form > svg:first-child { display: none !important; }

/* Nút Đóng (X) */
.search-modal__close { position: fixed !important; top: 30px !important; right: 40px !important; background: var(--hd-white-10) !important; color: var(--ink) !important; border-radius: 50% !important; width: 48px !important; height: 48px !important; border: none !important; z-index: 9999 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.search-modal__close:hover { background: var(--hd-white-20) !important; }

/* Từ khóa phổ biến (Hàng dọc) */
.search-modal__suggest { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
.search-modal__suggest > span { color: var(--hd-white-40) !important; font-size: 13px !important; text-transform: uppercase !important; margin-bottom: 24px !important; }
.search-modal__suggest a { color: var(--ink) !important; font-size: 18px !important; font-weight: 500 !important; margin-bottom: 18px !important; text-decoration: none !important; transition: 0.3s !important; }
.search-modal__suggest a:hover { color: var(--hd-gold-dark) !important; padding-left: 5px !important; }

/* Ép logo trên Mobile */
@media (max-width: 768px) {
    .search-modal__close { top: 20px !important; right: 20px !important; width: 40px !important; height: 40px !important; }
}




/* menu mega cấp 2 Bỏ nền đen khi không có ảnh */
.mega .mcard {
    background-color: var(--ink-3) !important; 
}

/* Xóa lớp mờ tối đè lên ảnh */
.mega .mcard::before, 
.mega .mcard::after {
    background-color: transparent !important; 
    background-image: none !important;
}

/* Đổi màu chữ thành đen cho ô không có ảnh */
.mega .mcard:not([style*="--mcard-img"]) .mcard__label {
    color: var(--on-dark) !important;
    text-shadow: none !important;
}






/* ========================================================
   MEGA MENU - BẢN FINAL TOÀN DIỆN (PC CHUẨN MỰC)
   Giải pháp kẻ vạch bằng Toán học CSS (Xuyên suốt mọi ô trống)
   ======================================================== */

@media (min-width: 1025px) {
    /* 1. GỠ NEO CỦA MENU VÀ THIẾT LẬP GỐC TỌA ĐỘ */
    .site-header .nav__item:has(.mega--cards) { position: static !important; }
    
    /* 2. KHUNG MENU CHÍNH (WRAPPER) */
    .site-header .mega.mega--cards {
        padding: 0 !important; border-radius: 6px !important; box-shadow: 0 12px 45px rgba(var(--black-rgb),0.15) !important;
        position: absolute !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; 
        width: 100% !important; max-width: 1100px !important; 
        display: flex !important; flex-direction: column !important; background: transparent !important;
        top: calc(100% + 15px) !important; opacity: 0 !important; visibility: hidden !important; 
        pointer-events: none !important; transition: top 0.3s ease, opacity 0.3s ease, visibility 0.3s !important; z-index: 9999 !important;
    }
    .site-header .nav__item:hover .mega.mega--cards {
        top: 100% !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    }
    .site-header .mega.mega--cards::before {
        content: "" !important; position: absolute !important; top: -20px !important; left: 0 !important; right: 0 !important; height: 20px !important; background: transparent !important;
    }

    /* 3. LƯỚI MENU (GRID) - ĐẶT MỐC TỌA ĐỘ CHO VẠCH KẺ */
    .site-header .mega--cards .mega__track {
        display: grid !important; grid-template-columns: 280px repeat(3, 1fr) !important; grid-auto-rows: min-content !important; 
        width: 100% !important; margin: 0 !important; padding: 0 !important; background-color: var(--ink) !important; 
        column-gap: 0 !important; row-gap: 0 !important; border-radius: 6px 6px 0 0 !important; overflow: hidden !important;
        position: relative !important; 
        z-index: 1 !important;
    }
    .site-header .mega--cards .mega__track:has(> .mcard:last-child:nth-child(2)) { grid-template-columns: 280px 1fr !important; }
    .site-header .mega--cards .mega__track:has(> .mcard:last-child:nth-child(3)) { grid-template-columns: 280px repeat(2, 1fr) !important; }

    /* ========================================================
       CÔNG THỨC TOÁN HỌC VẼ VẠCH KẺ DỌC XUYÊN SUỐT
       ======================================================== */
    /* Vạch kẻ số 1 (Nằm giữa cột Trắng 1 và 2) */
    .site-header .mega--cards .mega__track::before {
        content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; 
        width: 1px !important; background-color: var(--hd-gray-50) !important; z-index: 99 !important; pointer-events: none !important;
        left: calc(280px + (100% - 280px) / 3) !important; 
    }
    /* Vạch kẻ số 2 (Nằm giữa cột Trắng 2 và 3) */
    .site-header .mega--cards .mega__track::after {
        content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; 
        width: 1px !important; background-color: var(--hd-gray-50) !important; z-index: 99 !important; pointer-events: none !important;
        left: calc(280px + ((100% - 280px) / 3) * 2) !important; 
    }

    /* Tự động điều chỉnh vạch kẻ nếu Menu chỉ có 2 cột Trắng */
    .site-header .mega--cards .mega__track:has(> .mcard:last-child:nth-child(3))::before { left: calc(280px + (100% - 280px) / 2) !important; }
    .site-header .mega--cards .mega__track:has(> .mcard:last-child:nth-child(3))::after { display: none !important; }
    
    /* Ẩn vạch kẻ nếu Menu chỉ có 1 cột Trắng */
    .site-header .mega--cards .mega__track:has(> .mcard:last-child:nth-child(2))::before,
    .site-header .mega--cards .mega__track:has(> .mcard:last-child:nth-child(2))::after { display: none !important; }


    /* 4. ĐỊNH DẠNG TỪNG CỘT (Đã xóa hết các border và ::after cũ) */
    .site-header .mega--cards .mcard {
        background-color: var(--ink) !important; border-radius: 0 !important; margin: 0 !important;
        padding: 20px 30px !important; min-height: 0 !important; height: 100% !important; box-sizing: border-box !important;
        display: flex !important; flex-direction: column !important; align-items: flex-start !important; 
        border: none !important; 
    }
    
    /* Cột xám */
    .site-header .mega--cards .mcard:first-child { background-color: var(--hd-gray-800) !important; grid-column: 1 / 2 !important; grid-row: 1 / 99 !important; }

    /* 5. ẢNH ĐẠI DIỆN NẰM TRÊN CÙNG */
    .site-header .mega--cards .mcard:first-child::before, .site-header .mega--cards .mcard:first-child img { display: none !important; background-image: none !important; }
    
    .site-header .mega--cards .mcard:not(:first-child)::before {
        content: "" !important; display: block !important; position: relative !important; inset: auto !important; order: 1 !important; 
        width: 100% !important; max-width: 160px !important; aspect-ratio: 16 / 8 !important; 
        background-image: var(--mcard-img) !important; background-size: cover !important; background-position: center !important;
        border-radius: 4px !important; margin: 0 0 15px 0 !important; transition: transform 0.3s ease !important;
    }
    .site-header .mega--cards .mcard:not(:first-child):not([style*="--mcard-img"])::before { display: none !important; }
    .site-header .mega--cards .mcard:not(:first-child):hover::before { transform: scale(1.03) !important; }

    /* 6. TYPOGRAPHY: TIÊU ĐỀ */
    .site-header .mega--cards .mcard__label {
        order: 2 !important; position: static !important; display: block !important;
        font-size: 16px !important; font-weight: 500 !important; color: var(--on-dark) !important;
        margin: 0 0 15px 0 !important; padding: 0 !important; white-space: normal !important; line-height: 1.4 !important; text-transform: none !important; text-shadow: none !important;
    }
    .site-header .mega--cards .mcard:first-child .mcard__label { color: var(--ink) !important; order: 1 !important; }

    /* 7. DANH SÁCH LINK CẤP CON */
    .site-header .mega--cards .mcard__sub {
        order: 3 !important; display: flex !important; flex-direction: column !important; position: static !important;
        opacity: 1 !important; visibility: visible !important; transform: none !important; padding: 0 !important; background: transparent !important; width: 100% !important;
    }
    .site-header .mega--cards .mcard__sub img { display: none !important; }
    .site-header .mega--cards .mcard__sub a {
        display: block !important; font-size: 14px !important; color: var(--hd-gray-600) !important; padding: 6px 0 !important; font-weight: 400 !important; white-space: normal !important; line-height: 1.5 !important; transition: color 0.2s ease !important;
    }
    .site-header .mega--cards .mcard:first-child .mcard__sub a { color: var(--ink) !important; font-weight: 600 !important; text-transform: uppercase !important; font-size: 12.5px !important; letter-spacing: 0.5px !important; }
    
    /* Hiệu ứng nổi bật khi rê chuột ở cột xám */
    .site-header .mega--cards .mcard:first-child .mcard__sub a:hover { color: var(--gold) !important; padding-left: 8px !important; }
    .site-header .mega--cards .mcard:not(:first-child) .mcard__sub a:hover { color: var(--gold) !important; padding-left: 0 !important; }

    /* 8. BOTTOM BAR */
    .site-header .mega--cards .mega__panel {
        display: flex !important; justify-content: flex-end !important; align-items: center !important; background-color: var(--hd-gray-800) !important; padding: 4px 30px !important; margin: 0 !important; border-top: none !important; width: 100% !important; box-sizing: border-box !important; border-radius: 0 0 6px 6px !important; 
    }
    .site-header .mega--cards .mega__panel .mega-view-all { color: var(--ink) !important; font-size: 13.5px !important; font-weight: 400 !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; transition: color 0.2s ease !important; }
    .site-header .mega--cards .mega__panel .mega-view-all:hover { color: var(--gold) !important; }
    .site-header .mega--cards .mega__panel .mega-view-all::after { content: "→" !important; font-size: 16px !important; display: inline-block !important; margin-left: 6px !important; transition: transform 0.2s ease !important; }
    .site-header .mega--cards .mega__panel .mega-view-all:hover::after { transform: translateX(4px) !important; }
}

/* Ẩn 2 vạch kẻ này trên Mobile để không bị đè vào chữ */
@media (max-width: 1024px) {
    .site-header .mega--cards .mega__track::before,
    .site-header .mega--cards .mega__track::after { display: none !important; }
}

/* ========================================================
   MOBILE (Dưới 1024px): BẢN FIX CHUYÊN SÂU TỪ DEV
   Đã fix lỗi dãn khoảng cách (gap) giữa các danh mục
   ======================================================== */
@media (max-width: 1024px) {
    /* 1. MỞ KHÓA MENU TỔNG & RESET KHOẢNG CÁCH */
    .site-header .mega.mega--cards,
    .site-header .mega.mega--cards .mega__slider,
    .site-header .mega.mega--cards .mega__track {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important; 
        gap: 0 !important; /* Reset gap nếu bị vướng grid PC */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. ÉP TỬ CỘT XÁM */
    .site-header .mega.mega--cards .mcard:first-child {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        position: absolute !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. HIỂN THỊ CỘT TRẮNG & FIX LỖI DÃN CHIỀU CAO */
    .site-header .mega.mega--cards .mcard:not(:first-child) {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        pointer-events: auto !important;
        height: auto !important; /* Xóa height: 100% từ PC để khối co lại vừa khít chữ */
        min-height: 0 !important;
    }

    /* 4. ĐỊNH DẠNG DANH MỤC CHA */
    .site-header .mega.mega--cards .mcard:not(:first-child) .mcard__label {
        display: block !important;
        color: var(--on-dark) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        padding: 10px 25px !important;
        margin: 0 !important;
        border-bottom: 1px solid var(--hd-gray-50) !important;
        text-transform: none !important;
        pointer-events: auto !important; 
        position: relative !important;
        z-index: 10 !important;
        line-height: 1.4 !important;
    }

    /* 5. DANH MỤC CON */
    .site-header .mega.mega--cards .mcard:not(:first-child) .mcard__sub {
        padding-left: 20px !important;
        background-color: var(--ink-2) !important;
        pointer-events: auto !important;
        margin: 0 !important;
        /* Vẫn để trống display để JS theme hoạt động (accordion) */
    }

    .site-header .mega.mega--cards .mcard:not(:first-child) .mcard__sub a {
        display: block !important;
        color: var(--hd-gray-600) !important;
        font-size: 14px !important;
        padding: 10px 15px !important;
        margin: 0 !important;
        border-bottom: 1px solid var(--hd-gray-50) !important;
        pointer-events: auto !important; 
        line-height: 1.4 !important;
    }
    .site-header .mega.mega--cards .mcard:not(:first-child) .mcard__sub a:last-child {
        border-bottom: none !important;
    }

    /* 6. DỌN SẠCH ẢNH VÀ ĐƯỜNG KẺ ẢO TỪ PC (Triệt tiêu khoảng trống thừa) */
    .site-header .mega.mega--cards .mcard:not(:first-child)::before,
    .site-header .mega.mega--cards .mcard:not(:first-child)::after,
    .site-header .mega.mega--cards .mega__track::before,
    .site-header .mega.mega--cards .mega__track::after,
    .site-header .mega.mega--cards .mcard img,
    .site-header .mega.mega--cards .mega__panel {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        background-image: none !important;
    }
}