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

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

/*
 * Homepage category mosaic — MOBILE. The template shows every tile's overlay
 * inline on mobile; instead reveal the overlay only for the tile scrolled to the
 * viewport centre (`.is-center` is set by child-theme.js). Overrides the
 * template's always-visible mobile rule (style.css `.m-cat .tile__hover`).
 *
 * VSXTM-36: khôi phục cơ chế .is-center theo yêu cầu khách (giống bản gốc
 * trước khi VSXTM-33 m3 nới chiều cao tile). Rule "5 tile luôn hiển thị" ở
 * cuối file cũng đã được gỡ.
 */
@media (max-width: 768px) {
    .m-cat .tile__hover {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(46px) !important;
        /* VSXTM-54: giảm độ đậm nền ô danh mục về 80% để lộ ảnh phía sau nhiều hơn */
        background: rgb(12 11 8 / 80%) !important;
    }
    .m-cat .tile.is-center .tile__hover {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

/*
 * Inline directional arrows (↗ U+2197, → etc.) default to colour-emoji
 * presentation on some systems (notably macOS), showing a blue boxed icon.
 * Force text presentation so they render as clean monochrome glyphs that
 * inherit the link colour and can be rotated/animated by the template CSS.
 */
.ar,
.news__more span,
.nfeat__btn span,
.jcard__cta .ar,
.thv__more span,
.svc-card__more,
.sh-enter {
    font-variant-emoji: text;
}

/*
 * Related-products strip on the single service/solution page. These rules live
 * page-scoped in template/solution-detail.html's inline <style>; the WP build
 * loads CSS externally, so mirror them here (reuses the products .pgrid/.ptile).
 */
.relprod {
    margin-top: 54px;
}
.relprod__title {
    font-weight: 300;
    font-size: 24px;
    letter-spacing: .01em;
    margin: 0 0 22px;
    color: var(--on-dark, #fff);
}
.article__lead {
    font-size: 1.1em;
    font-weight: 500;
    opacity: .92;
}

/*
 * Products archive (PLP) advanced-filter toggle caret. Without an explicit
 * size the inline <svg> (viewBox only) renders at the SVG default box and
 * dominates the "BỘ LỌC NÂNG CAO" panel. Match template/products.html's
 * .afilter__chev (16px); flex-basis stops it stretching in the flex toggle.
 */
.afilter__chev {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

/*
 * Contact Form 7 forms adopt the design's .cform / .cta__form layout.
 * CF7 wraps each control in <span class="wpcf7-form-control-wrap"> and appends a
 * <div class="wpcf7-response-output">, which the static template markup didn't have.
 */
.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 subscribe form: keep the email + submit on one inline row (the .cta__form
   wrapper is flex, but its child is the CF7 <form>, so make that flex too). */
.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 8px;
}

/*
 * CF7 renders its submit as <input type="submit">, so the generic `.cform input`
 * / `.cta__form input` field rules (higher specificity than the button classes)
 * hijack it into looking like a text field. Restore the design buttons: the
 * contact submit is the gold pill (.btn--add), the CTA submit is the ghost link
 * (.hero__link). Selectors carry two classes so they beat `.cform input`.
 */
.cform .wpcf7-submit,
.contact-grid .cform .wpcf7-submit {
    display: inline-block;
    width: auto;
    background: var(--gold, #C9A227);
    color: var(--ink, #111);
    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, #e0b84a);
}
/*
 * Task 322 m6 — "Đăng ký" (CTA cuối trang) phải giống hệt "Xem thêm" ở banner
 * đầu trang chủ (.hero__link[data-i18n="hero.readmore"]): viền vàng, bo góc,
 * gold sweep-fill khi hover, kèm mũi tên chéo (.ar, rotate -45deg). CF7 render
 * submit thành <input>, phần tử replaced không nhận ::before/::after, nên
 * .ar được bọc là <span> riêng ngay sau [submit] trong form template (form id
 * 64) và style theo cụm .cta__submit bên dưới thay vì style thẳng lên input.
 */
/*
 * Task 323 m4 — khach yeu cau xoa hoan toan vien (border), anh nen va padding
 * cua lop khung bao ngoai nut ĐĂNG KÝ (.cta__submit, dung o Task 322 m6). Bo
 * border, border-radius, padding va sweep-fill ::before (do la "nen" cua khung)
 * — .cta__submit gio chi con la flex wrapper vo hinh cho chu + mui ten, khong
 * con khung/hop bao quanh. Bo luon hover color-swap (ink) vi no chi co tac dung
 * khi co nen vang quet qua; giu nguyen hieu ung mui ten truot khi hover (.ar).
 */
/*
 * Task 323 m5 — khach yeu cau nut DANG KY co width tu dong theo noi dung
 * (fit-content / inline-flex), khong duoc dai/du khong gian. .cta__submit da
 * la inline-flex + flex:0 0 auto (t322 m6) nen tren thuc te da fit noi dung;
 * khai bao width:fit-content tuong minh de khop dung yeu cau va tranh bi
 * .cta__form input{flex:1} (style.css:348, ap dung len moi input ke ca nut
 * submit) keo gian neu rule flex:0 0 auto sau nay bi doi/mat specificity.
 */
/*
 * Task 323 m6 — khach yeu cau GIU NGUYEN trang thai Normal (chua hover) cua
 * khung nut: vien mong mau gold/cam dat (var(--gold), giong .hero__link.hero__link
 * chuan toan site), nen trong suot va chu trang (var(--on-dark)). M4 truoc do
 * da bo het border/bg cua .cta__submit nen o normal state nut hien khong con
 * khung gi ca — khoi phuc lai vien+nen+mau chu cho DUNG rieng trang thai normal
 * o day. KHONG dung lai sweep-fill/doi mau khi hover (m4 da chu dong bo doi
 * do, khong thuoc pham vi muc 6) nen hover giu nguyen chi hieu ung mui ten
 * truot (.ar) nhu hien tai.
 */
/*
 * Task 325 m1 — khach yeu cau thu nho nut DANG KY (qua to so voi o email ben
 * canh). Ha padding 11px 24px -> 8px 18px va font-size chu 16px -> 13px (giu
 * nguyen letter-spacing/uppercase). .wpcf7 va .cta__form van width:100% (Task
 * 324 m3) nen o email (flex:1) tu hap thu phan rong nut nho lai, hang van khop
 * dung diem ket thuc duong ke vang, khong lech nhu Task 324 da fix.
 */
/*
 * Task 325 m2 — khach yeu cau khoang cach nho giua nut DANG KY va duong ke
 * vang phia duoi (.cta__form border-bottom, style.css:347). Do o email cao
 * hon nut (padding 14px 0 vs nut 8px 18px sau m1) va .wpcf7-form dang
 * align-items:center, nut dang duoc can giua theo chieu cao hang cua o email
 * — hang cao hon nut khong nhieu nen khe ho day chi con ~2px, nhin nhu nut
 * dinh sat vao duong ke. Them margin-bottom cho nut: margin-box cua nut lon
 * hon margin-box o email nen no tro thanh phan tu cao nhat, keo ca hang gian
 * ra dung bang margin-box do — nut dung ep vao day margin-box (0 margin-top),
 * nen khoang trong margin-bottom la khe ho THAT giua vien duoi nut va duong
 * ke, khong con phu thuoc canh giua may rui. Khong dung padding-bottom cho
 * .cta__form (se doi ca chieu cao hang o email lan duong ke, ngoai pham vi
 * muc nay) va khong dong den margin-left/padding ngang (giu nguyen diem ket
 * thuc da khop o Task 324).
 */
/*
 * Task 325 m3 — khach yeu cau nut DANG KY co hieu ung chuyen mau (hover) giong
 * het nut "Xem them" o banner trang chu (.hero__link.hero__link, style.css:1726
 * — gold sweep-fill quet tu trai sang qua ::before skewX, doi mau chu sang ink).
 * Task 323 m4/m6 truoc do chu dong TAT sweep-fill tren chinh input (chi giu hieu
 * ung mui ten truot) vi luc do khach chi yeu cau bo khung/nen input long ben
 * trong; nay chuyen sweep-fill sang ve tren khung NGOAI .cta__submit (vi input
 * con ::before da bi tat display:none o duoi) de dat hieu ung dung nhu banner.
 */
/*
 * Task 326 m1 — khach tiep tuc yeu cau thu nho nut DANG KY (CTA trang chu).
 * Giam them tu muc da dat o Task 325: padding 8px 18px -> 6px 14px, gap
 * 9px -> 6px, font-size cua .wpcf7-submit 13px -> 11px; mobile padding
 * 7px 12px -> 5px 10px giu ty le tuong ung. Khong dong den mau/vien/hover
 * (ngoai pham vi muc nay).
 */
/*
 * Task 326 m2 — khach yeu cau giam khoang cach nut DANG KY vs duong ke vang
 * phia duoi (.cta__form border-bottom, template/assets/css/style.css:347).
 * Sau khi Task 326 m1 thu nho padding/font cua nut, margin-bottom:6px dat o
 * Task 325 m2 khong con du: nut co khung vien rieng (border 1px + padding
 * 6px) nen mep duoi khung nhin rat gan duong ke (~7px, gan nhu dinh vao) —
 * khac voi o email (chi la text, khong khung, ap sat duong ke la dung thiet
 * ke). Tang margin-bottom 6px -> 14px de tao khoang ho ro rang giua khung
 * nut va duong ke, verify bang Playwright screenshot truoc/sau. Khong dong
 * den margin-left/padding/mau/vien/hover (ngoai pham vi muc nay).
 */
.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, #D89A4E);
    border-radius: 4px;
    background: transparent;
    color: var(--on-dark, #fff);
    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, #D89A4E);
    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, #111);
}
.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;
}
/*
 * Task 323 m3 — input tự mang class .hero__link nên bị .hero__link.hero__link
 * (style.css, !important, sync nút toàn site) đè border+padding RIÊNG lên chính
 * input, thắng rule reset .wpcf7-submit ở trên (rule đó không có !important nên
 * thua bất kể thứ tự/specificity). Hệ quả: input tự vẽ 1 khung viền ôm sát mỗi
 * chữ "ĐĂNG KÝ", còn .ar rơi ra ngoài khung đó (dù vẫn nằm trong khung ngoài
 * .cta__submit) — nhìn như 2 khung lồng nhau, mũi tên "trôi" bên ngoài khung chữ.
 * Ép !important để hạ input về phẳng — .cta__submit trở thành khung viền DUY
 * NHẤT bọc chung chữ + mũi tên, giống hệt .hero__link ở banner (1 phần tử, 1
 * khung). Tắt luôn ::before sweep-fill riêng của input (để lại của .cta__submit
 * quét trọn khung ngoài, không lệch pha 2 lớp khi hover).
 */
/*
 * Task 324 m3 — khach yeu cau nut DANG KY qua to, thu nho de diem ket thuc
 * nut khop diem ket thuc duong ke vang phia duoi (.cta__form border-bottom,
 * style.css:347). Nguyen nhan: rule goc .cta__form input{min-width:200px}
 * (style.css:348, danh cho o email trong template HTML tinh) bi CF7 render
 * dinh luon vao <input type=submit> cua nut (CF7 wrap moi input trong
 * .cta__form), ep nut rong toi thieu 200px du chu DANG KY ngan hon nhieu
 * -> nut + input email tran qua 480px cua .cta__form, thanh ra tran het qua
 * ca diem ket thuc duong ke vang. Selector nay (.cta__form .cta__submit
 * .wpcf7-submit, 0,3,0) da thang specificity rule goc (0,1,1) nen chi can
 * reset min-width la nut tu co lai kich thuoc theo noi dung that.
 */
.cta__form .cta__submit .wpcf7-submit {
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    min-width: 0 !important;
}

/*
 * Task 324 m3 (tiep) — sau khi bo min-width leak, nut van lech ~69px so voi
 * diem ket thuc duong ke vang. Nguyen nhan 2: style.css "N. Forms" gop
 * .cta__form chung selector voi .cform/.contact__form va ap padding:clamp(20-32px)
 * !important cho ca 3 — .cform/.contact__form la form-panel co khung/nen (dung
 * padding), nhung .cta__form la hang ngang mong chi co border-bottom (style.css:347
 * khong khai bao padding). Padding lech nay keo noi dung vao trong trong khi
 * duong ke vang van ve o mep ngoai (border-bottom nam ngoai padding-box) ->
 * nut khong the nao cham mep duong ke du co thu nho toi dau. Bo padding rieng
 * cho .cta__form (scope .cta .cta__form de khong dung toi .cform/.contact__form),
 * khoi phuc dung thiet ke goc cua hang CTA nay.
 */
.cta .cta__form {
    padding: 0 !important;
}

/*
 * Task 324 m3 (tiep 2) — o email van thua ~37px so voi phan con lai cua hang
 * (480 - margin16 - nut) vi CF7 boc input trong <span class=wpcf7-form-control-wrap>
 * (wrap moi la flex item that su, .cta__form .wpcf7-form-control-wrap{flex:1}).
 * <input> ben trong chi la block con cua span do, KHONG phai flex item truc tiep
 * nen flex:1 khai bao thang len input (style.css:348, danh cho cau truc HTML
 * tinh input=flex-item-truc-tiep) bi bo qua o ban WordPress — input giu nguyen
 * do rong tu nhien theo HTML attribute size=40 (~313px) va TRAN ra ngoai wrap
 * da co flex-grow dung. Ep input width:100% de no thuc su lap day wrap (wrap
 * da tu co-giãn dung theo flex), nho vay hang input+nut vua khop 480px, khong
 * con tran qua diem ket thuc duong ke vang o bat ky breakpoint nao.
 */
.cta__form .wpcf7-form-control-wrap input {
    width: 100% !important;
}

/*
 * Task 324 m3 (tiep 4) — .wpcf7 (div bao ngoai CF7 tu render) la flex-item
 * DUY NHAT cua .cta__form nhung flex-grow mac dinh la 0, nen no khong bao gio
 * tu gian ra lap day 480px — no chi to theo dung noi dung ben trong. Khi noi
 * dung (o email + nut) nho hon 480px thi hang bi HUT ngan lai, ket thuc TRUOC
 * diem ket thuc duong ke vang (undershoot); khi noi dung to hon 480px thi chi
 * co the co lai toi min-content, van co the TRAN qua duong ke (bug goc cua muc
 * nay). Ep width:100% de .wpcf7 luon khop dung 480px cua .cta__form — o email
 * (da width:100% cua wrap flex:1 o buoc truoc) se tu hap thu phan du/thieu,
 * dam bao hang luon ket thuc dung tai diem ket thuc duong ke vang o moi kich
 * thuoc man hinh, khong con phai can chinh padding/margin nut theo tung mock.
 */
.cta__form .wpcf7 {
    width: 100%;
}

/*
 * Task 324 m3 (tiep 3) — o email co san mot day min-width:200px hop ly (danh
 * cho usability, style.css:348, khong thuoc pham vi sua nut nen giu nguyen).
 * Duoi 768px, .cta__form chi con 350px (container mobile), 200px do da chiem
 * gan het hang, khung nut ĐĂNG KÝ neu giu nguyen padding/margin desktop
 * (11px 24px + margin-left 16px) se lai tran qua diem ket thuc duong ke vang.
 * Thu nho nut xuong dung chuan nut mobile toan site (padding 9px 16px, giong
 * .hero__link o breakpoint nay) va giam margin-left de nut vua du cho o email
 * giu nguyen min-width usability cua no.
 */
/* Task 325 m1 (tiep) — thu nho dong bo o mobile: padding 9px 16px -> 7px 12px. */
@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);
}

/*
 * Task 322 m1 — mega-menu card strip: style.css (Task VSXTM-15, loaded before
 * this file but marked !important) forces justify-content:center on the
 * horizontally-scrollable .mega__track, which an !important declaration always
 * wins over regardless of load order — so the `safe center` fallback below
 * never actually applied. Centered flex content leaves the FIRST card short of
 * the left edge and the LAST card with leftover space past its right edge.
 * Force flex-start (with !important, to actually beat style.css) so the strip
 * is always flush against the left edge, matching the client's request.
 */
@media (min-width: 1025px) {
    .mega--cards .mega__track {
        justify-content: flex-start !important;
    }
}

/* Product "báo giá" popup — CF7 form adopts the .cn-field modal styling. */
.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;
}

/* Task 320 mục 17 — PDP 2-cột (ảnh trái / nội dung phải) fix chiều cao bằng
 * nhau: cột nội dung dài hơn cột ảnh (do bảng thông số), khiến dòng "Xem đầy
 * đủ thông số" tụt xuống dưới mép ảnh. Stretch 2 cột bằng nhau + gallery kéo
 * giãn full chiều cao cột, dots đưa vào overlay đáy ảnh (không chiếm thêm
 * chiều cao) để mép dưới ảnh trùng đúng vị trí dòng "Xem đầy đủ thông số".
 */
@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, rgba(8,8,10,.55), rgba(8,8,10,0));
    }
}

/*
 * Terms/Policy accordion (.polacc*) — the static template/terms.html carried
 * this styling in a page-scoped <style id="vcn-polacc"> block that never made
 * it into the WP theme, so .polacc__chev (and the rest of the accordion) had
 * no rules at all: the inline <summary> SVG rendered at its unconstrained
 * default box, blowing up into a giant icon on every item. Ported verbatim
 * from template/terms.html so /terms/ and the other policy pages match.
 */
.polacc{display:flex;flex-direction:column;gap:14px;margin:8px 0 8px;}
.polacc__item{border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.03);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:#fff;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:rgba(216,154,78,.45);}
.polacc__head:hover,.polacc__link:hover{background:rgba(216,154,78,.06);}
.polacc__item.is-current{border-color:rgba(216,154,78,.55);background:rgba(216,154,78,.05);}
.polacc__name{flex:1;}
.polacc__chev{width:20px;height:20px;flex:0 0 20px;color:#D89A4E;transition:transform .25s ease;}
.polacc__item[open] .polacc__chev{transform:rotate(180deg);}
.polacc__body{padding:4px 22px 22px;border-top:1px solid rgba(255,255,255,.08);margin-top:0;}
.polacc__body>h2{margin-top:22px;}
.polacc__body>p:first-child{margin-top:14px;}

/*
 * Task 321 mục 15 — /products/ Bộ lọc sản phẩm (catbar danh mục): nút quá to,
 * khoảng trắng thừa giữa/quanh các nút trên mobile/tablet (template style.css
 * @media max-width:1024px cho .catbar__item padding:12px 14px). Thu gọn
 * padding nút + khoảng đệm quanh khối để dãy nút lọc gọn hơn.
 */
@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;
    }
}

/*
 * Task 322 mục 4 — Trang chủ, khối #products (mosaic Indoor/Outdoor bên trái).
 * t1/t2 (Indoor/Outdoor) cao gấp đôi t3-t5 nên nút ".thv__more" khi hover có
 * đủ chỗ giữ padding:11px 22px gốc (~45px cao); ở t3-t5 (tile thấp hơn) cùng
 * nút bị flexbox tự co lại còn ~24px do overflow:auto trên .tile__hover.
 * Cố định padding/height cho nút ở t1/t2 để bằng đúng kích thước đang hiển thị
 * ở khung bên phải (t3-t5), thay vì phụ thuộc chỗ trống còn lại của tile.
 */
.m-cat .t1 .thv__more,
.m-cat .t2 .thv__more {
    padding: 0 22px;
    height: 24px;
}

/*
 * Task 322 mục 5 — Trang chủ, khối category tiles (#products): nút "Read More"
 * (.thv__more) đang thiếu mũi tên. t291m3 trước đó ẩn hẳn .ar ("bỏ arrow icons")
 * khi đồng bộ viền gold với .hero__link. Khách yêu cầu MỌI nút xem thêm có mũi
 * tên chéo lên phải giống banner trang chủ (.hero__link .ar: rotate(-45deg)) —
 * hiện lại .ar ở đây và dùng đúng góc xoay/hiệu ứng hover đó cho đồng bộ.
 */
.thv__more .ar {
    display: inline-block;
    transform: rotate(-45deg);
    transition: transform .3s var(--ease);
}
.thv__more:hover .ar {
    transform: rotate(-45deg) translateX(4px);
}

/*
 * t327 — switcher ngôn ngữ đổi từ <button> (live DOM-swap) sang <a> (điều hướng
 * URL /en/ /cn/ của mona-multilingual). style.css chỉ style `.lang button`
 * (dòng ~97, ~447) nên mirror đúng bộ rule đó cho `.lang a` ở đây.
 */
.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; }
}

/*
 * VSXTM-33 m1 — Đồng bộ kích cỡ nút chuyển slide theo chuẩn Heritage Gallery
 * (.fwslider, 48x48, svg 22px, left/right 26px). Trước đó .hero .hero__arrow
 * (banner đầu) và .projslider .hero__arrow (dự án tiêu biểu) bị override nhỏ
 * xuống 34x34 (svg 14) trên PC và 15x15 / 30x30 trên mobile — quá nhỏ so với
 * banner Heritage. Ép lại theo chuẩn fwslider.
 */
.hero .hero__arrow,
.projslider .hero__arrow {
    width: 48px !important;
    height: 48px !important;
    background: rgba(21, 20, 15, .35);
    border: 1px solid rgba(236, 198, 119, .24);
    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, #D89A4E);
    color: var(--ink, #111);
    border-color: var(--gold, #D89A4E);
}
.hero .hero__arrow.prev,
.projslider .hero__arrow.prev { left: 26px !important; }
.hero .hero__arrow.next,
.projslider .hero__arrow.next { right: 26px !important; }
@media (max-width: 768px) {
    /* VSXTM-119: Thu nhỏ nút chuyển slide trên mobile */
    .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; }
}

/*
 * VSXTM-33 m2 — Gấp đôi padding cho nút "Xem thêm" (.thv__more) ở các tile
 * danh mục đèn (Indoor/Outdoor/Decorative/Smart/Custom Lighting) trên bảng
 * PC. Padding gốc 11px 22px -> 22px 44px. Không áp dụng mobile.
 */
@media (min-width: 769px) {
    .m-cat .tile .thv__more {
        padding: 22px 44px !important;
    }
}

/*
 * VSXTM-33 m3 / VSXTM-36 — Đã ROLLBACK toàn bộ chỉnh hiển thị 5 tile category
 * trên mobile theo yêu cầu khách (VSXTM-36): trở về hiển thị mặc định của
 * bản mẫu — ảnh nền + nhãn nhỏ ở góc, panel chỉ mở cho tile .is-center do
 * child-theme.js gán khi cuộn tới. Cơ chế .is-center đã được khôi phục ở
 * đầu file (rule .m-cat .tile__hover mobile).
 */

/*
 * VSXTM-33 m4 — Form CTA cuối trang (Get a free lighting consultation):
 * (a) Chuyển khung thông báo xác nhận gửi mail thành công (.wpcf7-response-output)
 *     từ vị trí bên cạnh nút Đăng ký xuống DƯỚI đường kẻ vàng (border-bottom
 *     của .cta__form).
 * (b) Giới hạn width khung thông báo bằng width .cta__form (không vượt độ dài
 *     đường kẻ vàng — max-width 480px, mobile theo container).
 * (c) Text mail_sent_ok đổi tiếng Việt qua CF7 messages (DB postmeta form ID 64).
 * (d) Responsive mobile.
 */
.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, #fff);
    background: rgba(216, 154, 78, .12);
    border: 1px solid var(--gold, #D89A4E) !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: rgba(207, 46, 46, .12);
    border-color: rgba(207, 46, 46, .8) !important;
}
.cta__form .wpcf7 form.sent .wpcf7-response-output {
    background: rgba(46, 160, 67, .14);
    border-color: rgba(46, 160, 67, .8) !important;
}
@media (max-width: 768px) {
    .cta__form .wpcf7-response-output {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
}

/*
 * VSXTM-37 — 3-video band trang chủ (.projvids .projvid): ẩn nút play đỏ
 * (.projvid__play) trên khung ĐANG PHÁT (class .is-playing set từ JS), giữ
 * ẩn caption khi video chạy để nhìn sạch. Khung chưa/đã ngừng phát vẫn giữ
 * nút play + caption bình thường để khách có thể tap phát bất cứ lúc nào.
 */
.projvids .projvid.is-playing .projvid__play {
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.projvids .projvid .projvid__play {
    transition: opacity .3s ease;
}

/*
 * VSXTM-39 — Trang Video Gallery (/gioi-thieu/video-cong-ty/): các nút Play
 * (.vg-play) hiện tại chỉ là tam giác trắng đè cả khung do template mới bỏ
 * <span> con (CSS gốc .vg-play span chỉ áp cho cấu trúc cũ). Style lại SVG
 * thành hình tròn đỏ #E2554A 64px giống hệt nút .projvid__play ở band 3
 * video trang chủ; giữ nguyên button phủ toàn khung để click mở modal video.
 */
.vg-play {
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.vg-play svg {
    width: 26px !important;
    height: 26px !important;
    fill: #fff;
    color: #fff;
    padding: 11px; /* VSXTM-60: giảm từ 19px */
    background: #E2554A;
    border: 1px solid #E2554A;
    border-radius: 50%;
    box-sizing: content-box;
    margin-left: 3px;
    /* VSXTM-40: Style.css gốc đặt .vg-play svg position:absolute top:50% left:50%
       transform:translate(-50%,-50%) để căn giữa button. Rule hover trước đó
       ghi đè transform bằng scale(1.08) → mất translate → nút nhảy sang góc
       trái-trên. Ép giữ nguyên translate ở cả state normal + hover, chỉ đổi
       scale khi hover. */
    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: #d04638;
    border-color: #d04638;
    transform: translate(-50%, -50%) scale(1.08);
}
@media (max-width: 640px) {
    .vg-play svg {
        padding: 15px;
    }
}

/*
 * VSXTM-42 — Trang chi tiết Giải pháp (single-service, body class .page-service).
 * Template dùng chung class .article với single news (news detail) — rule gốc
 * style.css đặt `.article { max-width: 820px; margin: 0 auto }` để bài viết dài
 * dễ đọc, nhưng ở trang Giải pháp làm nội dung bị hẹp và dồn giữa trong khi
 * breadcrumb + strip sản phẩm liên quan phía dưới vẫn full container 1200px.
 * Nới về full container để khớp chiều rộng trang chi tiết Dự án (.jbody ~1136px
 * trong container 1200 padding 32). CHỈ áp dụng cho .page-service — không đụng
 * single-news (.page-news / single.php) nơi 820px là hợp lý cho đọc bài.
 */
.page-service .article {
    max-width: none !important;
    margin: 0 !important;
}

/*
 * VSXTM-46 / VSXTM-47 — Mega menu header (.mega--cards): nới rộng khung nền
 * (background) ra sát mép cuối logo và đầu chữ "EN" của bộ đổi ngôn ngữ.
 * Nội dung bên trong GIỮ NGUYÊN vị trí.
 *
 * Cách CHẮC CHẮN (VSXTM-47 fix): tăng padding-left/right của .mega--cards để
 * background gốc TỰ TRẢI RỘNG THÊM, đồng thời bù nội dung về vị trí cũ bằng
 * margin âm trên .mega__slider. Không dùng ::after / isolation vì một số
 * trình duyệt / stacking context có thể render pseudo z-index âm không đúng.
 * Chỉ áp dụng PC ≥1025px.
 */
@media (min-width: 1025px) {
    /* VSXTM-59: tăng gấp 4 khoảng đệm 2 bên giữa mép nền menu và nội dung.
       Base VSXTM-53: khoảng đệm 36px mỗi bên = 16px padding trong .mega--cards +
       20px extension của box-shadow. Mục tiêu 4×36 = 144px mỗi bên → cần
       extension = 144 - 16 = 128px mỗi bên. Nội dung (mega__slider) giữ nguyên
       vị trí; chỉ nền phình rộng ra. */
    .site-header .mega--cards {
        box-shadow:
            -128px 0 0 0 var(--ink-2),
            128px 0 0 0 var(--ink-2),
            0 30px 80px -30px rgba(0, 0, 0, .8) !important;
        /* VSXTM-69: gỡ 2 đường viền mảnh vàng nhạt (rgba(236,198,119,.18)) mà
           base template đặt ở cạnh trên/dưới của khung mega menu. */
        border-top: 0 !important;
        border-bottom: 0 !important;
    }
}

/*
 * VSXTM-55 — Footer accordion (mobile): khôi phục mũi tên xổ xuống cho 4 mục
 * Giới thiệu / Giải pháp / Sản phẩm / Dịch vụ & Hỗ trợ.
 *
 * Base template style.css (@media max-width:640px) có rule
 *   .footer__col--acc > h4:has(> a)::after { content:none; }
 * với ý đồ "h4 chỉ là link điều hướng, không toggle → ẩn mũi tên".
 * Nhưng ở site này CẢ 4 h4 của footer đều wrap <a> (h4>a) đồng thời VẪN
 * đóng vai trò toggle accordion (click bung sub-links). Rule trên khiến
 * người xem không thấy dấu hiệu bung → khôi phục mũi tên bằng cách bật
 * lại content của ::after (các thuộc tính width/height/border/rotate của
 * mũi tên vẫn được base rule .footer__col--acc > h4::after giữ nguyên).
 */
@media (max-width: 640px) {
    .footer__col--acc > h4:has(> a)::after {
        content: "" !important;
    }
}

/*
 * VSXTM-58 — Homepage category mosaic (.m-cat .tile.t1 = Indoor Lighting) MOBILE:
 * ô Indoor có 14 sub-item (2 cột × 7 hàng) → nội dung dài ~372px, vượt
 * chiều cao mặc định 280px của tile → nút "Xem thêm →" bị cắt.
 *
 * Nới cao MẶC ĐỊNH riêng ô Indoor lên 380px (thừa ~8px để thoáng) trên
 * mobile, giữ nguyên bố cục các mục con + nút Xem thêm đứng sau danh sách,
 * không đụng 4 ô còn lại (t2..t5) và desktop.
 */
@media (max-width: 768px) {
    .m-cat .tile.t1 {
        height: 380px !important;
    }
}

/*
 * VSXTM-62 — Trang chi tiết sản phẩm (/products/<slug>/):
 *   1) Ảnh chính .gallery__main về tỉ lệ 1:1 (giữ chiều dài, rút chiều cao).
 *   2) Cột thông tin bên phải (.pinfo) hiện cao ~795px do các block cộng
 *      margin/padding lớn. Rút gọn khoảng cách để tổng chiều cao khớp với
 *      chiều cao ảnh mới (~677px): giảm margin quanh .buybox, khoảng cách
 *      trên .pspecs và .pinfo__specs, thu gọn padding hàng của bảng thông
 *      số kỹ thuật.
 *   3) Nút "Liên hệ báo giá" (.btn-buy.btn-contact-now) đang bo 4px (kế thừa
 *      rule .btn--add,.btn-buy,.btn-dl--primary trong template style.css).
 *      Ép border-radius 999px để bo tròn hoàn toàn như nút Zalo.
 * Áp desktop ≥769px (giao diện mobile giữ layout gốc).
 */
@media (min-width: 769px) {
    /* VSXTM-80: ép ảnh sản phẩm VUÔNG tuyệt đối trên MỌI viewport PC.
       Base template có .gallery { align-self: stretch } + .gallery__main
       { flex: 1 1 auto } khiến ảnh bị kéo cao theo cột thông tin bên phải
       (đặc biệt sau khi có nút Xem thêm/modal làm pinfo dài ra). Ép
       align-self: flex-start và flex: 0 0 auto để ảnh dùng đúng
       aspect-ratio 1/1 bất kể chiều cao cột phải. */
    .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;
    }
}
/*
 * VSXTM-146 — PC ≥ 901px: gallery giữ tỉ lệ 1:1 (từ VSXTM-80 ở 769px+), KHÔNG kéo giãn.
 * Cột phải (pinfo) bị giới hạn max-height = chiều cao gallery bằng JS (check() function).
 * Ảnh dùng object-fit:cover trong khung vuông — không bị méo.
 */
@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;
    }
}

/*
 * VSXTM-64 — Trang chi tiết Giải pháp (/solutions/<slug>/) MOBILE:
 * Mục lục (.toc) được thiết kế cho bố cục sidebar máy tính, .toc a có
 *   margin-left: -22px; padding-left: 20px
 * để link tràn ra trái + có border-left màu gold làm chỉ dẫn active.
 * Trên mobile khi bung accordion, container không có padding tương ứng
 * nên chữ ("MỤC LỤC", "Nội dung h2", "nội dung h3") dính sát mép trái
 * màn hình. Thêm padding cho .toc__inner và reset offset link/title/list
 * để nội dung nằm gọn trong khung.
 */
@media (max-width: 768px) {
    nav.toc .toc__inner {
        padding: 12px 18px 14px !important;
    }
    nav.toc .toc__title {
        margin-bottom: 10px !important;
    }
    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;
    }
}

/*
 * VSXTM-66 — Trang danh mục sản phẩm (/product-category/<slug>/): hiển thị
 * phần Miêu tả danh mục dạng bài viết SEO ngay dưới tiêu đề. Định dạng
 * kiểu bài viết: đoạn văn thoáng, tiêu đề nhỏ có nhấn màu, link gold.
 */
.pcat-desc {
    max-width: 960px;
    margin: 14px 0 28px;
    color: var(--on-dark-muted, rgba(255, 255, 255, .78));
    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, #fff);
    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, #D89A4E);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s ease;
}
.pcat-desc a:hover {
    color: var(--gold-light, #e5b56d);
}
.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, #D89A4E);
    background: rgba(255, 255, 255, .03);
    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; }
}

/*
 * VSXTM-67 — Trang chủ, section .m-cat (5 ô danh mục dưới banner) DESKTOP:
 * Base template style.css đặt grid-auto-rows:300px → t3/t4/t5 (span 1 row)
 * = 300px; t1/t2 (span 2 rows) = 610px. Ô t3/t4/t5 chứa 8 sub-item nên khi
 * hover, nội dung cao 313px vượt khung 300px → xuất hiện thanh cuộn dọc.
 *
 * Nâng grid-auto-rows lên 350px trên desktop (≥1025px) → t3/t4/t5 = 350px
 * (đủ chỗ 8 mục + nút Xem thêm, hết cuộn), t1/t2 = 350×2+gap ≈ 710px (giữ
 * tỉ lệ mosaic không lệch). Tablet/mobile giữ nguyên (media query cũ trong
 * template style.css).
 */
@media (min-width: 1025px) {
    .m-cat {
        grid-auto-rows: 350px !important;
    }
}

/*
 * VSXTM-68 — Trang chủ, section .m-cat: chuẩn hoá nút "Xem thêm →"
 * (.thv__more) ở CẢ 5 ô về đúng dáng nút của ô Indoor Lighting (46px cao,
 * dáng thanh gọn). Base template có padding 22px 44px → ở ô ngắn
 * (Decor/Smart/Custom) nút cao 67px, còn ô cao (Indoor/Outdoor) do flex ép
 * co xuống ~46px. Force chiều cao 46px + padding dọc 0 + căn giữa flex.
 */
@media (min-width: 1025px) {
    .m-cat .thv__more {
        height: 46px !important;
        min-height: 46px !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 46px !important;
    }
}

/*
 * VSXTM-70 — Đồng bộ hiển thị Windows ↔ iOS/macOS.
 *
 * 1) Thanh tìm kiếm (.search-modal): base template dùng visibility:hidden +
 *    opacity:0. Chrome/Edge Windows đôi khi vẫn render panel modal (lỗi
 *    khách báo: "Tìm kiếm" bung ra đè lên EN/VI/中文). Bổ sung display:none
 *    dứt khoát khi modal chưa .is-open để mọi trình duyệt cùng ẩn cứng.
 *
 * 2) Icon-btn tìm kiếm (.icon-btn / .nav__search-btn): ép kích thước cố định
 *    40×40 với flex: 0 0 auto để Chrome Windows không nới rộng theo layout
 *    flex của .actions/header.
 *
 * 3) Reset thanh input[type="search"] xoá nút X native + tab-decoration của
 *    WebKit/Blink Windows (Chromium Windows đôi khi hiển thị khác Mac).
 *
 * 4) Font smoothing đồng bộ (Windows Chrome mặc định không có antialias mềm
 *    như Mac) — bật -webkit-font-smoothing + -moz-osx-font-smoothing để chữ
 *    hai OS trông tương đương.
 *
 * 5) Scrollbar tối cho toàn site (Windows Chrome mặc định trắng, Mac ẩn).
 */

/* 1) Search modal — ẩn cứng khi chưa mở */
.search-modal:not(.is-open) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 2) Icon-btn cố định kích thước */
.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;
}

/* VSXTM-120 — text gợi ý mờ trong mobile nav search button */
.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;
}

/* 3) Reset input[type="search"] cross-OS */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}
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;
}

/* 4) Font smoothing đồng bộ */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 5) Scrollbar tối cho Windows Chrome (Mac giữ scrollbar overlay mặc định) */
html {
    scrollbar-color: rgba(216, 154, 78, .6) rgba(15, 14, 10, .6);
    scrollbar-width: thin;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: rgba(15, 14, 10, .6);
}
::-webkit-scrollbar-thumb {
    background: rgba(216, 154, 78, .5);
    border-radius: 6px;
    border: 2px solid rgba(15, 14, 10, .6);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(216, 154, 78, .8);
}

/*
 * VSXTM-71 — Trang tĩnh mặc định (page.php child): pagehero đơn giản +
 * khối .page-article kiểu bài viết. Font mềm, đoạn văn thoáng, tiêu đề
 * nhấn màu vàng gold, danh sách/blockquote/hình theo article style.
 * Cũng ép chuẩn hoá <pre> nội dung (dán từ Google Translate) → wrap text
 * bình thường, không còn dạng monospace tràn ngang.
 */
.pagehero--simple {
    padding: 90px 0 40px;
    background: linear-gradient(180deg, rgba(216, 154, 78, .08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.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, rgba(255, 255, 255, .6));
    margin-bottom: 14px;
}
.pagehero--simple .pagehero__crumb a {
    color: inherit;
    text-decoration: none;
}
.pagehero--simple .pagehero__crumb a:hover {
    color: var(--gold, #D89A4E);
}
.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, #fff);
}
.page-default__band {
    padding: 44px 0 90px;
}
.page-article {
    max-width: 960px;
    /* VSXTM-72: căn thẳng lề trái với tiêu đề trang (không auto-center) */
    margin-left: 0;
    margin-right: auto;
    color: var(--on-dark, rgba(255, 255, 255, .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, #D89A4E);
    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, #D89A4E);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.page-article a:hover { color: var(--gold-light, #e5b56d); }
.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, #D89A4E);
    background: rgba(255, 255, 255, .03);
    font-style: italic;
}
/* Cứu <pre> dán từ Google Translate / clipboard: chuyển về wrap text
   như đoạn văn bình thường (nếu vẫn còn trong DB cũ). */
.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; }
}

/*
 * VSXTM-74 — Sửa 2 lỗi mobile:
 *
 * 1) Banner trang chủ (.hero): base template dùng `height: 100dvh` (dynamic
 *    viewport). Trên mobile khi cuộn thanh địa chỉ trình duyệt tự thu/hiện
 *    → viewport height thay đổi → banner co giãn theo → giật/nhảy/thu nhỏ.
 *    Ép `height: 100svh` (small viewport) — cố định theo chiều cao khi URL
 *    bar HIỆN → không đổi khi cuộn. Đồng thời tắt animation vcnHeroZoom
 *    (Ken Burns) trên mobile để bỏ hiệu ứng "thu nhỏ nhẹ".
 *
 * 2) Trang Video Company (.vg-card <video>): thẻ video `preload="metadata"`
 *    không tự render frame đầu trên iOS Safari + Android Chrome → card đen.
 *    JS trong child-theme.js (fallback: inline hook) sẽ seek video tới 0.1s
 *    khi loadedmetadata để buộc render frame đầu. Kèm CSS `object-fit:cover`
 *    dự phòng nếu video chưa load được frame.
 */
@media (max-width: 1024px) {
    .site-header ~ .main .hero,
    .main.page-home .hero,
    .hero {
        height: 100svh !important;
        min-height: 100svh !important;
    }
    /* Tắt Ken Burns zoom trên mobile để hết cảm giác "thu nhỏ nhẹ" */
    .hero .slide.is-active .slide__bg {
        animation: none !important;
        transform: none !important;
    }
    /* Ổn định video: không transition transform khi vuốt */
    .hero .slide__bg {
        transition: none !important;
        will-change: auto !important;
    }
}
/* Video thumbnails ở trang Company Video */
.vg-card .hovervid,
.vg-card__media video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    background: #0a0a0c;
}

/*
 * VSXTM-75 — Search modal MOBILE: nút X đóng (position:absolute top:12 right:12)
 * đang chồng lên nút "TÌM KIẾM" (.search-modal__submit) ở cuối dòng form khi
 * viewport hẹp. Tăng padding-top cho .search-modal__panel để form nằm hẳn
 * dưới vùng nút X, đồng thời chừa margin-right cho form để nút submit không
 * đè lên nút X trong trường hợp form cực rộng.
 */
@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;
    }
}

/*
 * VSXTM-76 — Trang Showroom trực tuyến MOBILE:
 * Thu gọn khu VIRTUAL SHOWROOM theo đúng thông số khách yêu cầu.
 * - Nút "Enter tour" (.sh-enter): padding 9.9px/21.6px → 2.9px/9.6px,
 *   gap 8.1px → 5.1px.
 * - Tiêu đề "VCN Lighting Experience Center" (.sh-card__title):
 *   margin-bottom 14px → 0.
 * - Dòng địa điểm "Ho Chi Minh City, VN" (.sh-card__loc):
 *   margin-bottom 8px → 0.
 * Chỉ áp desktop KHÔNG đụng.
 */
@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;
    }
    /* VSXTM-77: thu gọn padding khung chứa 2 dòng chữ + nút Enter tour
       từ 28px 30px xuống 10px 20px trên mobile */
    .sh-card__body {
        padding: 10px 20px !important;
    }
}

/*
 * VSXTM-79 — Trang chi tiết sản phẩm: nút "Xem thêm" + popup hiện đầy đủ
 * mô tả sản phẩm khi mô tả > 150 ký tự (đoạn .pinfo__desc bị cắt còn 150
 * ký tự + "…").
 */
.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, #D89A4E);
    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, #e5b56d);
}
.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: rgba(10, 9, 6, .78);
    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, #181610);
    border: 1px solid var(--line-mid, rgba(255, 255, 255, .12));
    border-radius: 14px;
    padding: 32px 34px 28px;
    box-shadow: 0 30px 90px -30px rgba(0, 0, 0, .9);
    color: var(--on-dark, #fff);
}
.pinfo-desc-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    color: var(--on-dark, #fff);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background .2s ease;
}
.pinfo-desc-modal__close:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--gold, #D89A4E);
}
.pinfo-desc-modal__title {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--gold, #D89A4E);
}
.pinfo-desc-modal__body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--on-dark, rgba(255, 255, 255, .88));
    word-break: break-word;
}
.pinfo-desc-modal__body p {
    margin: 0 0 14px;
}
.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, #fff);
}
.pinfo-desc-modal__body strong {
    font-weight: 600;
    color: #fff;
}
.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; }
}

/*
 * VSXTM-81 — Video sản phẩm gộp CHUNG khung ảnh (không tách 2 hàng).
 * .gallery__main chứa cả <img> và .gallery__video (video). Mặc định ảnh
 * hiện, video ẩn. Khi .gallery__main có class .is-video → ảnh ẩn, video
 * hiện. Dot đầu tiên trong .gallery__dots có class .gallery__dot--video
 * để chuyển sang video (biểu tượng ▶).
 */
.gallery__main { position: relative; overflow: hidden; }
.gallery__main .gallery__video {
    position: absolute;
    inset: 0;
    display: none;
    background: #0a0a0c;
    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; }
/* VSXTM-85 — Dot chọn slide video ĐỒNG NHẤT với các dot ảnh khác:
 * chấm tròn màu đồng nhỏ, không icon. Kích cỡ/màu theo dot ảnh của theme.
 */
.gallery__dots .gallery__dot--video {
    display: block;
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    background: var(--gold, #D89A4E);
    border: 1px solid var(--gold, #D89A4E);
    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, #D89A4E);
    transform: scale(1.15);
}

/*
 * VSXTM-83/84 — Nút play tròn đỏ CHÍNH GIỮA khung ảnh sản phẩm.
 * VSXTM-84 — nút CHỈ hiện khi user đang ở slide video (.is-video) và
 * video CHƯA phát. Bấm nút → video phát → nút ẩn. Ở slide ẢNH thì nút cũng ẩn.
 */
.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: #E2554A;
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .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: #d04638;
    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; }

/*
 * VSXTM-89 — .pinfo là flex column để kiểm soát thứ tự các khối. Chiều cao
 * tự co giãn theo nội dung (content-driven), KHÔNG dùng margin-top:auto để
 * đẩy .pinfo__specs xuống đáy (VSXTM-141: gây khoảng trắng lớn giữa icon
 * và bảng thông số). Thông số nằm ngay sau khối phía trên (icon/CTA/mô tả).
 */
.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: 10px 0 !important; padding: 10px 0 !important; }
.pdp__main .pinfo__desc { margin-bottom: 8px !important; }
.pdp__main .pinfo__highlights { margin: 0 0 4px !important; font-size: 14px; }
/*
 * VSXTM-144 — Khối Thông số kỹ thuật tự co giãn theo không gian còn lại.
 * PC (≥ 901px): flex: 1 1 auto lấp đầy phần còn lại của cột phải; overflow:hidden
 *   cắt nội dung vượt. JS phát hiện overflow: có overflow → hiện link + tab bên dưới;
 *   không overflow → link ẩn, tab bên dưới ẩn (không trùng lặp nội dung).
 * VSXTM-147 — Link dùng position:absolute bottom:0 để luôn hiện ở mép dưới khung
 *   bất kể nội dung dài bao nhiêu; gradient mờ phía trên tránh bảng đè lên chữ link.
 * Mobile (≤ 900px): overflow visible (thông số hiện đầy đủ), ẩn tab Thông số kỹ thuật.
 */
@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;
    }
    /* Phần bảng thông số co giãn & cắt overflow; link nằm ngoài vùng cắt */
    .pdp__main .pinfo__specs-table-wrap {
        flex: 1 1 auto;
        overflow: hidden;
        min-height: 0;
    }
    /* Link ẩn theo mặc định; JS thêm .has-overflow khi nội dung vượt → hiện */
    .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) {
    /* Mobile: ẩn tab Thông số kỹ thuật bên dưới (tránh trùng với khối thông số trên) */
    #ptab-btn-specs,
    #ptab-specs { display: none !important; }
    /* Mobile: không cần link "Xem đầy đủ" vì thông số đã hiện full */
    .pinfo__specs-more { display: none !important; }
}
/* VSXTM-117: giá sản phẩm — "Giá từ" trắng + số vàng gold */
.pinfo__price { margin: 8px 0 12px; font-size: 15px; font-weight: 500; }
.pinfo__price .price-label { color: #fff; font-weight: 300; }
.pinfo__price .price-value { color: var(--gold, #D89A4E); font-weight: 600; }

/*
 * VSXTM-89/91 — Nút "Liên hệ báo giá" (.btn-buy.btn-contact-now) ở MOBILE
 * phải KHỚP đúng phong cách bản PC: bo tròn dạng viên thuốc (border-radius
 * 999px), CHỮ THƯỜNG "Liên hệ báo giá" (text-transform:none), letter-spacing
 * bình thường, viền vàng chữ trắng nền trong suốt. Chỉ khác duy nhất:
 * chiều rộng full theo container để dễ bấm trên điện thoại.
 */
@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, #D89A4E) !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: #fff !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, #D89A4E) !important;
        color: var(--ink, #111) !important;
    }
}

/*
 * VSXTM-87 — Nút "Gửi liên hệ" trang Liên hệ có hiệu ứng nền vàng quét từ
 * trái sang phải khi hover + chữ đổi màu tương phản (giống .hero__link ở
 * trang chủ). Vì <input type="submit"> là replaced element không hỗ trợ
 * ::before, dùng background linear-gradient + background-position animate.
 * Selector nhân đôi class để thắng specificity rule cũ (bg vàng đầy) đang
 * đè lên input.
 */
.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: 11px 24px !important;
    background: linear-gradient(115deg, var(--gold, #D89A4E) 50%, transparent 50%) right center / 260% 100% no-repeat !important;
    color: #fff !important;
    border: 1px solid var(--gold, #D89A4E) !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: .14em !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(--ink, #111) !important;
    border-color: var(--gold, #D89A4E) !important;
}

/*
 * VSXTM-93 — Trang chi tiết tin tức: bỏ khoảng cách dưới của .article__meta
 * (ngày tháng) và bỏ kẻ ngang phía TRÊN khối chia sẻ (.art-share) để cụm
 * chia sẻ nằm sát ngay dưới dòng ngày tháng.
 */
.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 rgba(255, 255, 255, .1);
}

/*
 * VSXTM-97 — CTA title trang chủ "Đăng ký nhận tư vấn miễn phí":
 * giảm cỡ chữ và co giãn theo màn hình để LUÔN hiển thị TRÊN 1 DÒNG
 * ở mọi thiết bị (PC, tablet, mobile). Font tối đa 32px, tối thiểu 16px.
 */
.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;
    }
}

/*
 * VSXTM-113 — Trang Dự án + Lĩnh vực dự án: layout masonry Pinterest thật —
 * 3 cột CHẠY ĐỘC LẬP, mỗi item giữ tỉ lệ ảnh gốc (ngang/dọc/vuông), item xếp
 * dọc trong từng cột nối tiếp nhau tạo so le tự nhiên; KHÔNG ép các item cùng
 * hàng cao bằng nhau. Dùng CSS multi-column (column-count) — cách chuẩn cho
 * layout masonry hiện tại vẫn hoạt động khắp Chrome/Safari/Firefox.
 * (Sửa lại từ VSXTM-112 dùng CSS Grid row-first — Grid ép cùng-hàng-cao-bằng
 * nhau nên item ảnh thấp bị hở khoảng trống bên dưới.)
 */
.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; }
}

/*
 * VSXTM-114 — Trang Dự án + Lĩnh vực dự án: round-robin 3 cột.
 * PHP chia sẵn dự án thành 3 nhóm (#1,#4,#7… | #2,#5,#8… | #3,#6,#9…),
 * mỗi nhóm trong 1 <div class="pmasonry__col"> riêng → flexbox giữ 3 cột
 * chạy độc lập, ảnh giữ tỉ lệ gốc, so le tự nhiên, không ép cùng hàng cao bằng.
 * Tablet ≤900px: pmasonry__col dùng display:contents → item rơi vào column-count:2.
 */
.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;
    }
}

/*
 * VSXTM-98 — Tracking: các CTA đã gán data-track riêng. Không cần CSS thêm,
 * event bắn qua JS trong child-theme.js (window.dataLayer.push).
 */

/*
 * VSXTM-100 — Fix bộ lọc dự án: khi user click tab (Hotel/Residential/...),
 * JS gốc gán class .is-hidden cho card không match. Nhưng .is-hidden trước
 * đây không có rule display:none, và khi chuyển .pmasonry sang column-count
 * (VSXTM-98) thì các card is-hidden vẫn chiếm chỗ trong cột → tưởng như filter
 * không hoạt động. Ép display:none để loại khỏi flow columns.
 */
.pmasonry .jcard.is-hidden { display: none !important; }

/*
 * VSXTM-100 — Section đầu trang Dự án (banner .pagehero) trên MOBILE bị cụt
 * nội dung: chiều cao cố định + ảnh cover crop → khách chỉ thấy 1 phần ảnh,
 * tiêu đề đè lên ảnh. Fix: cho ảnh full-width height auto, padding thoáng
 * cho tiêu đề + breadcrumb đọc rõ.
 */
@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: #05070d !important;
    }
    .page-projects .pagehero__crumb {
        color: rgba(255, 255, 255, .7) !important;
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }
    .page-projects .pagehero__title {
        color: #fff !important;
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin: 0 !important;
    }

    /*
     * VSXTM-101 — Card dự án trên mobile: ẨN overlay hover (.jcard__ov) và
     * text overlay tuyệt đối (.jcard__txt); thay bằng khối text mới nằm
     * DƯỚI ảnh, không đè lên. Vì mobile không có hover chuột, overlay đè
     * thường trực làm rối bố cục "sole" ở tab TẤT CẢ.
     */
    .page-projects .jcard { display: flex !important; flex-direction: column !important; background: #0f1014 !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; }
    /* VSXTM-116: Ẩn lớp gradient overlay (::after) trên mobile — lớp này che lên vùng text bên dưới ảnh gây chữ mờ */
    .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: #fff !important;
    }
    .page-projects .jcard .jcard__tag {
        display: inline-block !important;
        color: var(--gold, #D89A4E) !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: #fff !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }
    .page-projects .jcard .jcard__loc {
        display: block !important;
        color: rgba(255, 255, 255, .7) !important;
        font-size: 12px !important;
        margin-top: 2px !important;
    }
}

/*
 * VSXTM-104 — Editor content: thẻ H2 mặc định màu vàng gold trên FE + trong
 * TinyMCE editor admin. List (ul/ol) hiển thị đúng bullet/số, không mất khi
 * xuống dòng.
 */
.entry-content h2, .article h2, .tpl-content h2, .pinfo-desc-modal__body h2 {
    color: var(--gold, #D89A4E) !important;
    font-weight: 600 !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;
}

/*
 * VSXTM-106 — Cho phép admin đổi ảnh cột mega menu qua ACF.
 * NavMenu.php gán inline `--mcard-img: url('...')` vào .mcard khi admin upload
 * ảnh. CSS dưới đây đè background-image cho .mcard::before khi biến CSS này
 * có giá trị. Nếu KHÔNG có → dùng ảnh mặc định theo data-cat trong style.css
 * gốc (indoor/outdoor/decorative/smart/custom/pj-hotel/…).
 */
.mega--cards .mcard[style*="--mcard-img"]::before {
    background-image: var(--mcard-img) !important;
}

/*
 * VSXTM-109 — Chuẩn hoá tỉ lệ khung ảnh theo yêu cầu chị VCN.
 * (1) Dải slide full-width dưới khu Dự án ở trang chủ (.fwslider) — tỉ lệ 2:1
 *     (trước là clamp(280px,38vw,560px) → ~2.6:1, ảnh dẹt). Đưa aspect-ratio
 *     2/1 lên chính viewport để phần track ::before hero__slide__bg giữ nguyên
 *     cách phủ ảnh.
 * (2) Trang Giới thiệu: các khối ảnh .altrow__media + .about-intro__media về
 *     tỉ lệ 16:9 (trước ~4:3, hơi cao). Override .mona-about-page để chỉ áp
 *     dụng đúng trang Giới thiệu, không ảnh hưởng module khác nếu tái dùng.
 */
.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;
}

/*
 * VSXTM-113 — .pmasonry mặc định giữ column-count 3 (masonry Pinterest — cột
 * chạy độc lập, so le tự nhiên). Trước đây VSXTM-112 đổi sang CSS Grid
 * row-first nhưng grid ép cùng-hàng-cao-bằng nhau → khoảng trống ở ô ảnh
 * thấp. Rule .page-projects .pmasonry ở khối trên đã có !important đầy đủ,
 * khối này chỉ đảm bảo .pmasonry chung KHÔNG bị đè sang grid.
 */
.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; }
}

/*
 * Mục lục (.toc) — bỏ chấm tròn.
 *
 * Khối VSXTM-104 phía trên đặt `.article ul { list-style: disc !important;
 * padding-left: 24px !important }` cho nội dung soạn thảo. <nav class="toc">
 * lại nằm BÊN TRONG <article class="article"> (single-service.php,
 * single.php) nên rule đó bắt luôn cả <ul data-toc>: mục lục hiện bullet và
 * bị thụt vào 24px, lệch khỏi vạch gold chỉ mục đang xem của .toc a.
 *
 * Trả .toc về đúng thiết kế gốc trong template/assets/css/style.css
 * (`.toc ul { list-style: none }`). Dùng nav.toc để thắng specificity của
 * .article ul, và !important vì rule kia cũng !important.
 */
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;
}

/* VSXTM-119: Thu nhỏ nút play video trên mobile */
@media (max-width: 768px) {
    .tile__play, .projvid__play, .vplay, .vg-play span, .vg-card__play, .vidcard__play {
        width: 38px !important;
        height: 38px !important;
    }
}

/* VSXTM-119: Giảm padding menu dọc mobile/tablet */
@media (max-width: 1024px) {
    .nav.is-open .nav__link {
        width: 100%;
        padding: 13px 28px;
        font-size: 15px;
    }
}

/* VSXTM-123: Tách mũi tên nav thành <button> riêng, vùng bấm ≥44px */
@media (max-width: 1024px) {
    /* nav__item chứa link + chev-btn → flex row; mega xuống hàng dưới */
    .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;
    }
    /* Mega luôn chiếm toàn bộ chiều rộng, tự xuống hàng dưới link+button */
    .nav.is-open .nav__item:has(> .nav__chev-btn) > .mega {
        flex: 0 0 100% !important;
    }
    /* Button mũi tên: ẩn trên desktop (JS chỉ inject khi mobile), hiện khi nav mở */
    .nav__chev-btn {
        display: none;
    }
    .nav.is-open .nav__chev-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px !important;
        padding: 0 14px !important;
        flex-shrink: 0 !important;
        background: transparent !important;
        border: 0 !important;
        cursor: pointer !important;
        color: inherit !important;
        opacity: 0.8 !important;
    }
    /* Icon mũi tên 15px */
    .nav__chev-btn .chev {
        width: 15px !important;
        height: 15px !important;
        flex: 0 0 15px !important;
        transition: transform .3s var(--ease, ease) !important;
    }
    .nav__item.is-expanded .nav__chev-btn .chev {
        transform: rotate(180deg) !important;
    }
}

/* VSXTM-121: Giảm font-size mô tả bài tin tức từ 16px → 14px */
.nart__ex {
    font-size: 14px !important;
}

/* VSXTM-131 (1) — Tuyển dụng chi tiết: bỏ crop ảnh theo chiều rộng trên mobile.
 * .jhero cao clamp(420px,58vh,600px) = ~490px trên mobile, ép ảnh 1920×940
 * scale lên ~1000px rồi cắt 2 bên ~323px. Đưa về aspect-ratio 2/1 ≈ tỉ lệ
 * gốc của ảnh → không còn crop ngang. */
@media (max-width: 768px) {
    .page-job .jhero {
        height: auto;
        aspect-ratio: 2 / 1;
    }
}

/* VSXTM-131 (2) — Chính sách bảo hành: giảm khoảng trắng giữa breadcrumb và
 * nội dung khi trang có ảnh banner (class .pagehero--has-banner). */
.pagehero--has-banner {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}
.page-default .page-default__band {
    padding-top: 24px !important;
}

/* VSXTM-131 (3) — Giải pháp liên quan: thumbnail có title bên dưới.
 * Ghi đè .pgrid .ptile (overlay ẩn title đến khi hover) bằng layout
 * flex-column: ảnh trên, title luôn hiển thị bên dưới. */
.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, #fff);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    padding: 10px 14px 14px;
    letter-spacing: .01em;
}
.relsvc .pgrid .ptile::after {
    display: none !important;
}

/* VSXTM-131 (5) — Danh mục sản phẩm: hiện 20 sản phẩm mặc định, JS quản lý
 * show/hide từng batch 20 — reset CSS nth-child(n+6) của archive */
.pcat--category .pgrid .ptile { display: block !important; }
/* Nút "Xem thêm" cuối danh sách */
.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(--gold, #C9A227); background: none;
    border: 1px solid var(--gold, #C9A227); border-radius: 6px; padding: 7px 18px;
    transition: background .25s var(--ease, ease), color .25s var(--ease, ease);
}
.pcat__loadmore:hover { background: var(--gold, #C9A227); color: var(--ink, #111); }
.pcat__loadmore-arr { width: 12px; height: 12px; }
/* Khi "Xem tất cả" mở rộng → luôn hiện hết */
.pcat--category.is-expanded .pgrid .ptile { display: block !important; }