.hero-image.is-loaded{opacity:1!important}.page-header{background:var(--color-surface-alt,#f3f1ed);padding:9rem 0 4rem}.breadcrumb-nav{display:flex;gap:.6rem;margin-top:1rem}.content-page{padding:5rem 0}.content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}.content-card{border:1px solid #e4e0d8;padding:1.5rem;background:#fff}.content-card img,.content-cover{width:100%;height:auto;display:block;margin-bottom:1rem}.content-prose{max-width:850px;line-height:1.8}.content-detail{max-width:1000px}.project-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}.project-gallery img{width:100%;display:block}@media (max-width:767px){.content-grid,.project-gallery{grid-template-columns:1fr}.page-header{padding-top:7rem}.content-page{padding:3rem 0}.filter-list{display:flex;flex-wrap:wrap;gap:.5rem}.is-loading{opacity:.55;pointer-events:none}.form-message{margin-top:.75rem;min-height:1.5rem}}

/* Hero section — chế độ video nền (admin bật ở /home-sections, config.mode=video) */
.hero-section-video{position:relative}
.hero-video-wrap{position:relative;height:660px;overflow:hidden;background:#0d1712}
.hero-video-frame{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.78%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.hero-video-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,23,18,.35) 0%,rgba(13,23,18,.15) 45%,rgba(13,23,18,.45) 100%)}
@media (max-width:767px){.hero-video-wrap{height:420px}}
.filter-empty{padding:2rem 0;color:var(--color-text-muted,#7a7a7a);text-align:center}

/* Thanh gọi nhanh dính đáy trên điện thoại (tuỳ chọn, mặc định tắt): gọi / Zalo / nhận báo giá */
.mobile-cta{display:none}
@media (max-width:991.98px){
    .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:1040;display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:1px;background:#d7dedb;box-shadow:0 -4px 16px rgba(0,0,0,.12);padding-bottom:env(safe-area-inset-bottom)}
    .mobile-cta-link{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:6px 8px;background:#fff;color:#1b2b26;font-weight:700;font-size:14px;text-decoration:none}
    .mobile-cta-call{color:#0a7d4f}
    .mobile-cta-quote{background:var(--color-primary,#c8791f);color:#fff}
    /* Chỉ khi thanh gọi nhanh đang bật (Cấu hình → mobile_cta_enabled = 1) mới chừa chỗ đáy trang và ẩn cụm biểu tượng nổi;
       mặc định tắt: điện thoại dùng cụm biểu tượng liên hệ nổi giống bản máy tính. */
    body:has(.mobile-cta){padding-bottom:60px}
    body:has(.mobile-cta) .contact-dock{display:none}
    body:has(.mobile-cta) .back-to-top{bottom:72px}
}

/* Banner đồng ý cookie */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:1100;max-width:760px;margin:0 auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:16px 18px;background:#fff;border:1px solid #d7dedb;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.cookie-banner[hidden]{display:none}
.cookie-banner-body{flex:1 1 320px;min-width:0}
.cookie-banner-title{margin:0 0 4px;font-weight:700;color:#1b2b26}
.cookie-banner-text{margin:0;font-size:14px;line-height:1.5;color:#4a5651}
.cookie-banner-text a{color:var(--color-primary-dark,#379329);text-decoration:underline}
.cookie-banner-actions{display:flex;gap:10px;flex:0 0 auto}
.cookie-banner-actions .button{min-height:42px;padding:8px 18px}
@media (max-width:991.98px){.cookie-banner{bottom:68px}}
@media (max-width:575.98px){.cookie-banner-actions{width:100%}.cookie-banner-actions .button{flex:1}}
.form-message{margin-top:.75rem;min-height:1.5rem;font-size:.95rem;line-height:1.5}.form-message.is-error{color:#b3261e}.form-message.is-success{color:var(--color-primary,#1f5f3a);font-weight:600}.promo-popup-form .form-message{margin-top:.5rem;text-align:center}
.video-modal{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:1rem}.video-modal[hidden]{display:none}.video-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82)}.video-modal-dialog{position:relative;width:min(960px,100%)}.video-modal-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}.video-modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.video-modal-close{position:absolute;top:-46px;right:0;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:1.25rem;cursor:pointer}.video-modal-close:hover,.video-modal-close:focus-visible{background:rgba(255,255,255,.32)}body.is-video-open{overflow:hidden}@media (max-width:767px){.video-modal-close{top:-44px}}
/* Cảm ứng: mở rộng vùng chạm của chấm điều hướng (12px quá nhỏ cho ngón tay) mà không đổi giao diện */@media (pointer:coarse){.dot,.swiper-pagination-bullet{position:relative}.dot::after,.swiper-pagination-bullet::after{content:"";position:absolute;inset:-9px}}
/* Điện thoại/máy tính bảng: ô nhập liệu cỡ chữ 16px để iOS Safari không tự phóng to màn hình khi bấm vào */@media (max-width:991px){input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]),select,textarea{font-size:16px!important}}
/* Ảnh nền PNG nặng (~3,5 MB) đã có bản WebP (~0,2 MB) tạo bởi tools/optimize-images.php */.certification-section{background-image:url('../backgrounds/certification-background.webp')}.consultation-section{background-image:url('../backgrounds/consultation-background.webp')}.video-section{background-image:url('../backgrounds/video-background.webp')}.standards-section{background-image:url('../backgrounds/standards-background.webp')}
/* Trang chi tiết dự án: ảnh bìa và bảng thông tin */
.project-cover{margin:22px 0 0}.project-cover img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:var(--radius-md,8px)}
.project-facts{margin:28px 0 0}.project-facts-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:0;padding:0}.project-fact{padding:12px 0;border-bottom:1px solid var(--color-border,#dde5e2)}.project-fact dt{display:flex;align-items:center;gap:10px;margin:0;font-size:13px;font-weight:700;color:var(--color-muted,#5f6f69)}.project-fact dt i{flex:none;width:20px;font-size:16px;text-align:center;color:var(--color-primary)}.project-fact dd{margin:3px 0 0 30px;font-size:16px;font-weight:700;line-height:1.4;color:var(--color-dark)}
@media (max-width:575px){.project-facts-list{grid-template-columns:1fr}}
.detail-cover{margin:22px 0 20px}.detail-cover img{border-radius:var(--radius-md,8px)}
/* Thanh trượt so sánh ảnh TRƯỚC / SAU (partials/before-after.php + initBeforeAfter trong app.js) */
.ba-wrap{margin:22px 0 0}
.ba-compare{--ba-pos:50%;position:relative;overflow:hidden;aspect-ratio:var(--ba-ratio,4 / 3);max-height:620px;margin:0 auto;background:#e6ece9;border-radius:var(--radius-md,8px);cursor:ew-resize;user-select:none;-webkit-user-select:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.ba-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--ba-pos)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--ba-pos);width:0;pointer-events:none}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.35)}
.ba-knob{position:absolute;top:50%;left:0;display:flex;align-items:center;justify-content:center;gap:3px;width:50px;height:50px;color:#fff;font-size:12px;background:var(--color-primary,#42b136);border:3px solid #fff;border-radius:50%;box-shadow:0 3px 12px rgba(0,0,0,.35);transform:translate(-50%,-50%);transition:transform .15s ease}
.ba-compare:active .ba-knob{transform:translate(-50%,-50%) scale(1.08)}
.ba-compare.is-focus .ba-knob{outline:3px solid var(--color-dark,#135040);outline-offset:3px}
.ba-label{position:absolute;top:10px;padding:4px 12px;font-size:12px;font-weight:800;line-height:16px;color:#fff;text-transform:uppercase;white-space:nowrap;border-radius:4px;pointer-events:none}
.ba-label-before{left:10px;background:rgba(110,110,110,.92)}
.ba-label-after{right:10px;background:var(--color-primary,#42b136)}
.ba-range{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none;background:transparent}
.ba-range::-webkit-slider-runnable-track{height:100%;background:transparent}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:1px;height:100%;background:transparent;border:0}
.ba-range::-moz-range-track{height:100%;background:transparent}
.ba-range::-moz-range-thumb{width:1px;height:100%;background:transparent;border:0}
.ba-hint{margin:10px 0 0;font-size:14px;font-weight:600;text-align:center;color:var(--color-muted,#5f6f69)}
@media (max-width:575px){.ba-knob{width:44px;height:44px}.ba-label{top:8px;padding:3px 9px;font-size:11px}}
@media (prefers-reduced-motion:reduce){.ba-knob{transition:none}}


/* Mốc rỗng trước mỗi khối trang (trang quản trị nhảy tới bằng #khoi-…): không chiếm chỗ, chừa khoảng cho header dính. */
.hth-anchor { display: block; height: 0; overflow: hidden; scroll-margin-top: 110px; }

/* Khung xem trước trong trang quản trị (?hth_embed=1): bỏ popup/cookie, hiện sẵn mọi hiệu ứng cuộn; chế độ khối (hth_block) bỏ luôn phần khung trang. */
.hth-embed:not(.hth-region-promo) .promo-popup, .hth-embed .cookie-banner { display: none !important; }
.hth-embed [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
.hth-embed-block .site-header, .hth-embed-block .site-footer, .hth-embed-block .contact-dock, .hth-embed-block .mobile-cta, .hth-embed-block .back-to-top { display: none !important; }
.hth-embed-block .hth-block-hidden { display: none !important; }

/* Xem trước một vùng cố định của khung trang trong admin (?hth_embed=1&hth_region=header|footer|dock|promo) */
.hth-region-header body > :not(.site-header):not(script),
.hth-region-footer body > :not(.site-footer):not(script),
.hth-region-dock body > :not(.contact-dock):not(script),
.hth-region-promo body > :not(.promo-popup):not(script) { display: none !important; }
.hth-region-header .site-header { position: static; }
.hth-region-dock .contact-dock-label { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.hth-region-dock .contact-dock { left: 40px; bottom: auto; top: 30px; }
.hth-region-promo .promo-popup[hidden] { display: flex; }
.hth-region-promo .promo-popup .promo-popup-backdrop { opacity: 1; }
.hth-region-promo .promo-popup .promo-popup-dialog { opacity: 1; transform: none; }

/* Đầu trang trên màn hình lớn: menu có 8 mục nên cỡ chữ 16px rộng hơn khung 1370px (nút "Nhận tư vấn" tràn ra ngoài, trang bị thanh cuộn ngang ở 1440px).
   Dùng cỡ chữ/khoảng cách gọn hơn từ 1421px trở lên; dải 1280–1420px đã có quy tắc riêng trong responsive.css. */
@media (min-width: 1421px) {
    .main-nav-list { gap: 16px; }
    .main-nav-link { gap: 6px; font-size: 15px; }
    .site-header-actions { gap: 14px; }
}

/* Ảnh nền hero chọn trong admin (--hero-bg do section_bg_attr() đặt): thay ảnh nhưng giữ lớp phủ tối riêng của từng khối. */
.turnkey-hero-section[style*="--hero-bg"], .projects-hero-section[style*="--hero-bg"], .feng-shui-hero-section[style*="--hero-bg"],
.team-hero-section[style*="--hero-bg"], .profile-hero-section[style*="--hero-bg"] { background-image: var(--hero-bg); }
.about-hero-section[style*="--hero-bg"] { background-image: linear-gradient(rgba(13, 59, 47, 0.62), rgba(13, 59, 47, 0.62)), var(--hero-bg); }
.contact-hero-section[style*="--hero-bg"] { background-image: linear-gradient(rgba(19, 80, 64, 0.55), rgba(19, 80, 64, 0.55)), var(--hero-bg); }
.articles-hero-section[style*="--hero-bg"] { background-image: linear-gradient(rgba(13, 80, 60, 0.62), rgba(13, 80, 60, 0.62)), var(--hero-bg); }
.construction-hero-section[style*="--hero-bg"] { background-image: linear-gradient(90deg, rgba(13, 59, 47, 0.92), rgba(13, 59, 47, 0.55)), var(--hero-bg); }

/* Chữ nổi trên video/slide nền ở đầu trang chủ (nút "Hồ sơ năng lực"): nút xanh .button.button-primary.button-lg của site, đặt như nút ở trang Xây nhà trọn gói
   — sát mép trái khung nội dung (.container-custom), cách đáy 40px (điện thoại 20px). Khung phủ lên hero nhưng không chặn thao tác với video. */
.hero-section{position:relative}
.hero-caption-inner{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none}
.hero-caption{position:absolute;bottom:40px;left:0;white-space:nowrap;text-decoration:none;pointer-events:auto}
@media (max-width:767px){.hero-caption{bottom:20px}}