/*
Theme Name: Nhôm Kính Giá Rẻ
Theme URI: https://lamcuanhomgiare.com
Author: Nhôm Kính Vũ Gia
Description: Theme riêng cho lamcuanhomgiare.com – cửa nhôm Xingfa, kính cường lực. Phong cách kiến trúc (nền giấy ấm, đen than, đồng thau). Có Sản phẩm (giá, thông số, so sánh), Công trình, công cụ Thiết kế & dự toán 4 bước, Bảng giá tự động, đặt lịch đo, lưu yêu cầu khách. Sửa thông tin ở Giao diện → Tùy biến → "Nhôm Kính – Thông tin". Cài nội dung mẫu ở Giao diện → Cài nhanh Nhôm Kính.
Version: 1.1.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nhomkinh
*/

/* ==========================================================================
   Nhôm Kính Vũ Gia – lamcuanhomgiare.com
   Phong cách "kiến trúc": nền giấy ấm, đen than, điểm đồng thau, chữ có chân lớn,
   góc vuông sắc, ảnh lớn.
   ========================================================================== */
:root{
  --paper:#f5f3ee;
  --paper-2:#ebe7de;
  --white:#fff;
  --ink:#0e1417;
  --ink-2:#182126;
  --ink-3:#26323a;
  --text:#23292d;
  --muted:#656c70;
  --line:rgba(14,20,23,.12);
  --line-dark:rgba(255,255,255,.14);
  --brass:#a87d43;
  --brass-2:#d2b382;
  --on-dark:#f2efe8;
  --on-dark-2:#a9b0b2;
  --zalo:#0068ff;
  --ok:#2f7a4c;
  --err:#b3261e;
  --wrap:1280px;
  --r:4px;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --shadow:0 18px 50px rgba(14,20,23,.12);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.15;color:var(--ink);font-weight:600;text-wrap:balance}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
h1{font-size:clamp(38px,5.6vw,76px)}
h2{font-size:clamp(30px,3.8vw,50px)}
h3{font-size:19px;font-weight:700}
h2 em,h1 em{font-style:italic;color:var(--brass)}
p{margin:0 0 1em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.skip{position:absolute;left:-999px;top:8px;z-index:999;background:var(--ink);color:#fff;padding:10px 16px}
.skip:focus{left:8px}
.muted{color:var(--muted)}

/* ---------- Nhãn & tiêu đề khối ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:18px}
.eyebrow::before{content:"";width:36px;height:1px;background:currentColor}
.sec{padding:110px 0}
.sec-sm{padding:70px 0}
.sec-white{background:var(--white)}
.sec-dark{background:var(--ink);color:var(--on-dark-2)}
.sec-dark h2,.sec-dark h3{color:var(--on-dark)}
.sec-head{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;margin-bottom:56px}
.sec-head p{color:var(--muted);margin:0;max-width:460px;justify-self:end}
.sec-dark .sec-head p{color:var(--on-dark-2)}
.sec-head.center{grid-template-columns:1fr;text-align:center;justify-items:center}
.sec-head.center p{justify-self:center}
.sec-head h2{margin:0}

/* ---------- Nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 28px;border-radius:var(--r);font-weight:700;font-size:15px;letter-spacing:.02em;line-height:1.2;border:1px solid transparent;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease);white-space:nowrap}
.btn .ico{transition:transform .25s var(--ease)}
.btn:hover .ico-arrow{transform:translateX(4px)}
.btn-brass{background:var(--brass);color:#fff}
.btn-brass:hover{background:#8f6a37}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-3)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{border-color:rgba(255,255,255,.4);color:#fff}
.btn-light:hover{background:#fff;color:var(--ink)}
.btn-zalo{background:var(--zalo);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:11px 18px;font-size:14px}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:var(--ink);border-bottom:1px solid var(--brass);padding-bottom:3px}
.link:hover{color:var(--brass)}
.sec-dark .link{color:var(--on-dark)}

/* ---------- Thanh trên cùng ---------- */
.topbar{background:var(--ink);color:var(--on-dark-2);font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;height:40px}
.topbar .l,.topbar .r{display:flex;gap:26px;align-items:center}
.topbar span,.topbar a{display:inline-flex;gap:8px;align-items:center}
.topbar a:hover{color:#fff}

/* ---------- Đầu trang ---------- */
.header{position:sticky;top:0;z-index:80;background:var(--paper);border-bottom:1px solid var(--line);transition:background .3s,box-shadow .3s,border-color .3s}
.header .wrap{display:flex;align-items:center;gap:36px;height:84px}
.header.scrolled{box-shadow:0 10px 30px rgba(14,20,23,.08);background:rgba(245,243,238,.96);backdrop-filter:blur(10px)}
.is-home .header:not(.scrolled){background:transparent;border-color:var(--line-dark);position:fixed;left:0;right:0;top:40px}
.is-home .header:not(.scrolled) .logo,.is-home .header:not(.scrolled) .nav>ul>li>a,.is-home .header:not(.scrolled) .h-btn{color:#fff}
.is-home .header.scrolled{position:fixed;left:0;right:0;top:0}
.logo{display:flex;align-items:center;gap:12px;color:var(--ink);margin-right:auto}
.logo-mark{width:40px;height:40px;position:relative;flex:none}
.logo-mark svg{width:100%;height:100%}
.logo b{display:block;font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:.04em;line-height:1}
.logo small{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;opacity:.7;margin-top:5px}
.nav>ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.nav>ul>li{position:static}
.nav>ul>li>a{display:flex;align-items:center;gap:6px;padding:30px 11px;font-weight:600;font-size:14.5px;color:var(--ink);position:relative;white-space:nowrap}
.logo span{white-space:nowrap}
.nav>ul>li>a::after{content:"";position:absolute;left:12px;right:12px;bottom:24px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav>ul>li:hover>a::after,.nav>ul>li>a.on::after{transform:scaleX(1)}
.nav .caret{width:10px;height:10px}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--white);border-top:1px solid var(--line);box-shadow:0 30px 60px rgba(14,20,23,.15);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s var(--ease),visibility .25s}
.nav li:hover>.mega,.nav li:focus-within>.mega{opacity:1;visibility:visible;transform:none}
.mega .wrap{display:grid;grid-template-columns:repeat(5,1fr) 1.3fr;gap:22px;height:auto;padding-top:30px;padding-bottom:34px;align-items:start}
.mega a.m-item{display:block;color:var(--ink)}
.mega .m-item .im{aspect-ratio:4/3;overflow:hidden;margin-bottom:12px;background:var(--paper-2)}
.mega .m-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.mega .m-item:hover img{transform:scale(1.06)}
.mega .m-item b{display:block;font-size:14.5px}
.mega .m-item span{font-size:13px;color:var(--muted)}
.mega .m-cta{background:var(--ink);color:var(--on-dark-2);padding:26px;font-size:14px}
.mega .m-cta h4{font-family:var(--serif);font-weight:500;font-size:24px;color:#fff;margin-bottom:8px}
.h-actions{display:flex;align-items:center;gap:8px}
.h-btn{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--ink);border-radius:50%}
.h-btn:hover{background:rgba(127,127,127,.12)}
.h-phone{display:flex;flex-direction:column;line-height:1.2;padding-left:16px;margin-left:6px;border-left:1px solid var(--line)}
.h-phone small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.h-phone b{font-size:18px;color:var(--ink)}
.is-home .header:not(.scrolled) .h-phone{border-color:var(--line-dark)}
.is-home .header:not(.scrolled) .h-phone b{color:#fff}
.is-home .header:not(.scrolled) .h-phone small{color:rgba(255,255,255,.7)}
.burger{display:none}

/* ---------- Ngăn kéo menu điện thoại ---------- */
.drawer{position:fixed;inset:0;z-index:120;visibility:hidden}
.drawer.open{visibility:visible}
.drawer .shade{position:absolute;inset:0;background:rgba(14,20,23,.55);opacity:0;transition:opacity .3s}
.drawer.open .shade{opacity:1}
.drawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(380px,88vw);background:var(--paper);transform:translateX(100%);transition:transform .35s var(--ease);display:flex;flex-direction:column;overflow-y:auto}
.drawer.open .panel{transform:none}
.drawer .p-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.drawer nav a{display:flex;justify-content:space-between;padding:15px 22px;border-bottom:1px solid var(--line);font-weight:600}
.drawer nav a.sub{padding-left:40px;font-weight:500;font-size:15px;color:var(--muted)}
.drawer .p-foot{padding:22px;margin-top:auto;display:grid;gap:10px}

/* ---------- Tìm kiếm ---------- */
.search{position:fixed;inset:0;z-index:130;background:rgba(245,243,238,.98);display:none;overflow-y:auto}
.search.open{display:block}
.search .wrap{max-width:860px;padding-top:12vh;padding-bottom:60px}
.search .s-close{position:absolute;right:24px;top:20px}
.search input{width:100%;border:0;border-bottom:2px solid var(--ink);background:none;font-family:var(--serif);font-size:clamp(26px,4vw,42px);padding:12px 0;outline:none}
.search .hint{color:var(--muted);font-size:14px;margin-top:12px}
.search .results{margin-top:30px;display:grid;gap:4px}
.search .results a{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;padding:10px;border-radius:var(--r)}
.search .results a:hover{background:var(--white)}
.search .results img{width:72px;height:54px;object-fit:cover}
.search .results small{display:block;color:var(--brass);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Màn hình đầu trang chủ ---------- */
.hero{position:relative;height:min(100vh,920px);min-height:640px;color:#fff;overflow:hidden;background:var(--ink)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.slide.on{opacity:1;z-index:1}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 7s ease-out}
.slide.on img{transform:scale(1)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,20,23,.82) 0%,rgba(14,20,23,.45) 55%,rgba(14,20,23,.15) 100%),linear-gradient(0deg,rgba(14,20,23,.6) 0%,transparent 40%)}
.slide .cap{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.slide .cap .wrap{width:100%;padding-top:60px;padding-bottom:110px}
.slide .cap .in{max-width:720px;opacity:0;transform:translateY(24px);transition:opacity .9s .3s,transform .9s .3s var(--ease)}
.slide.on .cap .in{opacity:1;transform:none}
.hero h1,.hero .h1{color:#fff;margin-bottom:22px;font-family:var(--serif);font-weight:500;font-size:clamp(38px,5.6vw,76px);line-height:1.08}
.hero h1 em,.hero .h1 em{color:var(--brass-2)}
.hero .eyebrow{color:var(--brass-2)}
.hero p.lead{font-size:18px;color:rgba(255,255,255,.82);max-width:560px;margin-bottom:34px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-nav{position:absolute;z-index:3;left:0;right:0;bottom:120px}
.hero-nav .wrap{display:flex;align-items:center;gap:24px}
.hero-nav .count{font-family:var(--serif);font-size:20px;color:#fff}
.hero-nav .count span{color:rgba(255,255,255,.5);font-size:15px}
.hero-nav .bars{display:flex;gap:8px}
.hero-nav .bars button{width:56px;height:2px;border:0;padding:8px 0;background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)) center/100% 2px no-repeat;position:relative}
.hero-nav .bars button i{position:absolute;left:0;top:7px;height:2px;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.hero-nav .bars button.on i{animation:bar 6s linear forwards}
@keyframes bar{to{transform:scaleX(1)}}
.hero-nav .arrows{margin-left:auto;display:flex;gap:8px}
.hero-nav .arrows button{width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:none;color:#fff;display:grid;place-items:center}
.hero-nav .arrows button:hover{background:#fff;color:var(--ink)}

/* Thanh báo giá nhanh dưới hero */
.quickbar{position:relative;z-index:5;margin-top:-64px}
.quickbar form{background:var(--white);box-shadow:var(--shadow);display:grid;grid-template-columns:auto 1.3fr 1fr 1fr 1fr auto;align-items:stretch}
.quickbar .qb-title{background:var(--ink);color:#fff;padding:22px 28px;display:flex;flex-direction:column;justify-content:center}
.quickbar .qb-title b{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.1}
.quickbar .qb-title small{color:var(--on-dark-2);font-size:12.5px}
.quickbar label{display:flex;flex-direction:column;justify-content:center;padding:14px 22px;border-right:1px solid var(--line);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.quickbar input,.quickbar select{border:0;background:none;padding:6px 0 0;font-size:16px;font-weight:600;color:var(--ink);outline:none;text-transform:none;letter-spacing:0;width:100%}
.quickbar .btn{border-radius:0;padding:0 32px}

/* ---------- Số liệu ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.stat{padding:36px 28px 0;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(40px,4.4vw,62px);color:var(--ink);line-height:1}
.stat b sup{font-size:.45em;color:var(--brass);vertical-align:top;margin-left:4px}
.stat span{display:block;margin-top:10px;color:var(--muted);font-size:14.5px}

/* ---------- Giới thiệu ngắn ---------- */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.intro .pics{position:relative;padding:0 60px 60px 0}
.intro .pics img:first-child{aspect-ratio:4/5;object-fit:cover;width:100%}
.intro .pics img:nth-child(2){position:absolute;right:0;bottom:0;width:52%;aspect-ratio:1;object-fit:cover;border:10px solid var(--paper)}
.intro .pics .badge{position:absolute;left:-24px;top:40px;background:var(--brass);color:#fff;padding:22px 24px;max-width:170px}
.intro .pics .badge b{display:block;font-family:var(--serif);font-size:42px;font-weight:500;line-height:1}
.intro .pics .badge span{font-size:13px;line-height:1.4;display:block;margin-top:6px}
.checks{list-style:none;padding:0;margin:26px 0 34px;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.checks li{display:flex;gap:12px;font-weight:600;font-size:15px;color:var(--ink)}
.checks .ico{color:var(--brass);margin-top:4px}

/* ---------- Danh mục sản phẩm ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:300px;gap:16px}
.cat{position:relative;overflow:hidden;color:#fff;display:flex;align-items:flex-end;background:var(--ink)}
.cat:nth-child(1){grid-column:span 2;grid-row:span 2}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .4s}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,20,23,.85) 0%,rgba(14,20,23,.1) 60%)}
.cat:hover img{transform:scale(1.07);opacity:.85}
.cat .in{position:relative;z-index:1;padding:26px;width:100%}
.cat small{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-2)}
.cat h3{color:#fff;font-family:var(--serif);font-weight:500;font-size:26px;margin:6px 0 4px}
.cat:nth-child(1) h3{font-size:38px}
.cat .from{font-size:14px;color:rgba(255,255,255,.75)}
.cat .go{position:absolute;right:22px;top:22px;z-index:1;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;transition:background .3s,color .3s}
.cat:hover .go{background:#fff;color:var(--ink)}

/* ---------- Thẻ sản phẩm ---------- */
.p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.p-card{background:var(--white);display:flex;flex-direction:column;position:relative;transition:box-shadow .3s,transform .3s var(--ease)}
.p-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.p-card .im{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--paper-2)}
.p-card .im img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.p-card:hover .im img{transform:scale(1.05)}
.p-card .tag{position:absolute;left:14px;top:14px;background:var(--brass);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px}
.p-card .body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.p-card .cat-n{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.p-card h3{font-size:20px;margin:6px 0 4px}
.p-card h3 a::after{content:"";position:absolute;inset:0}
.p-card .sub{color:var(--muted);font-size:14.5px;margin-bottom:18px}
.p-card .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:end;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.p-card .price small{display:block;font-size:12px;color:var(--muted)}
.p-card .price b{font-size:19px;color:var(--ink)}
.p-card .price b span{font-size:13px;font-weight:500;color:var(--muted)}
.cmp{position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;user-select:none}
.cmp input{accent-color:var(--brass);width:16px;height:16px}

/* ---------- Khối CTA dự toán ---------- */
.config-cta{position:relative;overflow:hidden;background:var(--ink);color:var(--on-dark-2)}
.config-cta .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding-top:90px;padding-bottom:90px}
.config-cta h2{color:#fff}
.config-cta .steps-mini{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 34px}
.config-cta .steps-mini span{border:1px solid var(--line-dark);padding:8px 14px;font-size:13.5px;color:var(--on-dark)}
.config-cta .steps-mini span b{color:var(--brass-2);margin-right:6px}
.door-art{background:var(--ink-2);padding:40px;display:grid;place-items:center;position:relative;overflow:hidden}
.door-art svg{width:100%;max-width:420px;height:auto}

/* ---------- Lý do chọn ---------- */
.why{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.why>div{padding:38px 30px 10px 0;border-right:1px solid var(--line);margin-right:30px}
.why>div:last-child{border-right:0;margin-right:0}
.why .num{font-family:var(--serif);font-size:15px;color:var(--brass);margin-bottom:26px;display:block}
.why .ico{width:34px;height:34px;color:var(--ink);stroke-width:1.3;margin-bottom:20px}
.why p{color:var(--muted);font-size:15px}

/* ---------- Tab hệ nhôm ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:34px}
.tabs button{border:1px solid var(--line);background:none;padding:11px 20px;font-weight:600;font-size:14.5px;border-radius:999px;transition:all .25s}
.tabs button:hover{border-color:var(--ink)}
.tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.sec-dark .tabs button{border-color:var(--line-dark);color:var(--on-dark)}
.sec-dark .tabs button.on{background:var(--brass);border-color:var(--brass)}
.sys{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.sys .im{aspect-ratio:5/4;overflow:hidden}
.sys .im img{width:100%;height:100%;object-fit:cover}
.sys dl{display:grid;grid-template-columns:auto 1fr;margin:24px 0 30px;border-top:1px solid var(--line-dark)}
.sys dt,.sys dd{padding:13px 0;border-bottom:1px solid var(--line-dark);margin:0}
.sys dt{color:var(--on-dark-2);padding-right:30px;font-size:14px}
.sys dd{color:var(--on-dark);font-weight:600}
.fade-in{animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Công trình ---------- */
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{border:1px solid var(--line);background:none;padding:9px 18px;font-weight:600;font-size:14px;border-radius:999px;transition:all .2s}
.filters button:hover{border-color:var(--ink)}
.filters button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.works.masonry{grid-auto-rows:260px}
.works.masonry .work:nth-child(6n+1),.works.masonry .work:nth-child(6n+5){grid-row:span 2}
.works.masonry .work:nth-child(6n){grid-column:span 2}
.work{position:relative;overflow:hidden;cursor:zoom-in;background:var(--ink);aspect-ratio:4/3;border:0;padding:0;color:#fff;text-align:left;display:block;width:100%}
.works.masonry .work{aspect-ratio:auto;height:100%}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.work::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,20,23,.85),transparent 55%);opacity:.85;transition:opacity .3s}
.work:hover img{transform:scale(1.06)}
.work .cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px}
.work .cap small{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-2)}
.work .cap b{display:block;font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.2;margin:4px 0 2px}
.work .cap span{font-size:13.5px;color:rgba(255,255,255,.75)}
.work.hide{display:none}

/* Xem ảnh lớn */
.lb{position:fixed;inset:0;z-index:140;background:rgba(8,12,14,.95);display:none;align-items:center;justify-content:center;touch-action:pan-y}
.lb.open{display:flex}
.lb figure{margin:0;max-width:min(1200px,92vw);text-align:center;color:#fff}
.lb img{max-height:78vh;width:auto;margin:0 auto}
.lb figcaption{margin-top:16px}
.lb figcaption b{font-family:var(--serif);font-weight:500;font-size:22px;display:block}
.lb figcaption span{color:rgba(255,255,255,.7);font-size:14px}
.lb .lb-btn{position:absolute;width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.3);color:#fff;display:grid;place-items:center}
.lb .lb-btn:hover{background:#fff;color:var(--ink)}
.lb .prev{left:24px;top:50%;transform:translateY(-50%)}
.lb .next{right:24px;top:50%;transform:translateY(-50%)}
.lb .close{right:24px;top:24px}
.lb .n{position:absolute;left:28px;top:30px;color:rgba(255,255,255,.6);font-size:14px}

/* ---------- Quy trình ---------- */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:p}
.process>div{padding:0 26px 0 0;position:relative;counter-increment:p}
.process>div::before{content:"0" counter(p);display:block;font-family:var(--serif);font-size:54px;line-height:1;color:var(--brass-2);margin-bottom:22px}
.process>div::after{content:"";position:absolute;left:84px;right:20px;top:28px;height:1px;background:var(--line-dark)}
.process>div:last-child::after{display:none}
.process p{color:var(--on-dark-2);font-size:14.5px;margin:0}
.free{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-2);border:1px solid rgba(210,179,130,.4);padding:3px 10px}


/* ---------- Thương hiệu vật tư ---------- */
.brands{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brands span{display:grid;place-items:center;height:110px;border-right:1px solid var(--line);font-family:var(--serif);font-size:22px;color:#9a9c98;letter-spacing:.04em;transition:color .3s}
.brands span:last-child{border-right:0}
.brands span:hover{color:var(--ink)}

/* ---------- Hỏi đáp ---------- */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font-weight:700;font-size:17px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;position:relative;transition:transform .3s,background .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
.faq details[open] summary i{background:var(--ink);color:#fff;border-color:var(--ink)}
.faq details[open] summary i::after{transform:translate(-50%,-50%)}
.faq .ans{padding:0 50px 24px 0;color:var(--muted)}
.faq .ans p{margin:0}

/* ---------- Tin tức ---------- */
.n-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.n-card{display:flex;flex-direction:column}
.n-card .im{aspect-ratio:3/2;overflow:hidden;margin-bottom:20px;background:var(--paper-2)}
.n-card .im img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.n-card:hover .im img{transform:scale(1.05)}
.n-card .meta{display:flex;gap:14px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);margin-bottom:10px}
.n-card .meta span:last-child{color:var(--muted)}
.n-card h3{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.3;margin-bottom:10px}
.n-card:hover h3{color:var(--brass)}
.n-card p{color:var(--muted);font-size:15px}

/* ---------- Đặt lịch đo ---------- */
.book{display:grid;grid-template-columns:1fr 1fr;min-height:620px}
.book .ph{position:relative}
.book .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.book .ph .over{position:absolute;left:40px;right:40px;bottom:40px;color:#fff;z-index:1}
.book .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,20,23,.8),transparent 60%)}
.book .ph .over a{display:block;font-family:var(--serif);font-size:clamp(32px,3.4vw,46px);line-height:1.1;margin-top:4px}
.book .ph .over small{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2)}
.book .fm{background:var(--white);padding:70px 70px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.f{margin-bottom:20px;display:flex;flex-direction:column}
.f.full{grid-column:1/-1}
.f label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.f input,.f select,.f textarea{border:0;border-bottom:1px solid var(--line);background:transparent;padding:10px 0;font-size:16px;color:var(--ink);border-radius:0;outline:none;transition:border-color .2s}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--brass)}
.f textarea{resize:vertical;min-height:84px}
.f.bad input,.f.bad select{border-color:var(--err)}
.f .e{color:var(--err);font-size:13px;margin-top:4px;min-height:0}
.form .note{grid-column:1/-1;font-size:13.5px;color:var(--muted);margin:4px 0 18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:6px}
.chips label{margin:0;cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;border:1px solid var(--line);padding:8px 14px;font-size:14px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0;transition:all .2s}
.chips input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips input:focus-visible+span{outline:2px solid var(--brass);outline-offset:2px}

/* ---------- Chân trang ---------- */
.footer{background:var(--ink);color:var(--on-dark-2);font-size:14.5px}
.f-cta{border-bottom:1px solid var(--line-dark)}
.f-cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-top:56px;padding-bottom:56px;flex-wrap:wrap}
.f-cta h2{color:#fff;margin:0;font-size:clamp(28px,3.2vw,42px)}
.f-main .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:50px;padding-top:70px;padding-bottom:50px}
.footer .logo{color:#fff;margin-bottom:22px}
.footer h4{color:#fff;font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 20px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.footer a:hover{color:#fff}
.footer .ci li{display:flex;gap:12px}
.footer .ci .ico{color:var(--brass-2);margin-top:4px}
.f-bottom{border-top:1px solid var(--line-dark)}
.f-bottom .wrap{display:flex;justify-content:space-between;gap:20px;padding-top:22px;padding-bottom:22px;font-size:13px;flex-wrap:wrap}
.socials{display:flex;gap:8px;margin-top:22px}
.socials a{width:40px;height:40px;border:1px solid var(--line-dark);border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700}
.socials a:hover{background:var(--brass);border-color:var(--brass);color:#fff}

/* ---------- Nút liên hệ nổi ---------- */
.fab{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.fab a,.fab button{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;border:0;box-shadow:0 10px 24px rgba(0,0,0,.2);position:relative;transition:transform .25s var(--ease)}
.fab a:hover,.fab button:hover{transform:scale(1.08)}
.fab .zl{background:var(--zalo);font-weight:800;font-size:13px}
.fab .ph{background:var(--brass)}
.fab .ph::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--brass);animation:ring 2s infinite}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}
.fab .top{background:var(--ink);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.fab .top.show{opacity:1;visibility:visible}
.fab a span.tip{position:absolute;right:66px;white-space:nowrap;background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:6px 12px;opacity:0;pointer-events:none;transition:opacity .2s}
.fab a:hover span.tip{opacity:1}
.mbar{display:none}

/* ---------- Hộp thoại ---------- */
.modal{position:fixed;inset:0;z-index:150;background:rgba(8,12,14,.65);display:none;align-items:center;justify-content:center;padding:18px}
.modal.open{display:flex}
.modal .box{background:var(--white);max-width:460px;width:100%;padding:34px;position:relative;animation:fade .3s var(--ease);max-height:92vh;overflow:auto}
.modal h3{font-family:var(--serif);font-weight:500;font-size:26px}
.modal pre{white-space:pre-wrap;background:var(--paper);padding:14px;font:inherit;font-size:14px;max-height:200px;overflow:auto;margin:0 0 14px}
.modal ol{padding-left:20px;color:var(--muted);font-size:14.5px}
.modal .acts{display:grid;gap:10px}
.modal .x{position:absolute;right:12px;top:12px}

/* ---------- Trang con: đầu trang ---------- */
.page-hero{position:relative;background:var(--ink);color:#fff;padding:90px 0 80px;overflow:hidden}
.page-hero.has-img::before{content:"";position:absolute;inset:0;background:var(--bg) center/cover;opacity:.35}
.page-hero .wrap{position:relative}
.page-hero h1{color:#fff;font-size:clamp(36px,5vw,64px);margin:0 0 14px}
.page-hero p{color:var(--on-dark-2);max-width:620px;margin:0;font-size:17px}
.crumbs{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--on-dark-2);margin-bottom:22px}
.crumbs a:hover{color:#fff}
.crumbs span::before{content:"/";margin-right:10px;opacity:.5}

/* ---------- Danh sách sản phẩm ---------- */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:34px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.toolbar .right{display:flex;gap:12px;align-items:center}
.toolbar select,.toolbar input{border:1px solid var(--line);background:var(--white);padding:10px 14px;font-size:14.5px;border-radius:var(--r);outline:none}
.toolbar input:focus,.toolbar select:focus{border-color:var(--ink)}
.count-note{color:var(--muted);font-size:14px}
.empty{grid-column:1/-1;text-align:center;padding:60px 0;color:var(--muted)}

/* Ngăn so sánh */
.cmp-bar{position:fixed;left:50%;bottom:20px;transform:translate(-50%,140%);z-index:95;background:var(--ink);color:#fff;padding:14px 16px 14px 22px;display:flex;align-items:center;gap:16px;box-shadow:0 20px 50px rgba(0,0,0,.3);transition:transform .35s var(--ease);max-width:calc(100vw - 32px)}
.cmp-bar.show{transform:translate(-50%,0)}
.cmp-bar .thumbs{display:flex;gap:8px}
.cmp-bar .thumbs img{width:48px;height:36px;object-fit:cover}
.cmp-table{width:100%;border-collapse:collapse;font-size:14.5px}
.cmp-table th,.cmp-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp-table th{color:var(--muted);font-weight:600;width:140px}
.cmp-table thead td{font-weight:700;color:var(--ink)}
.cmp-table thead img{aspect-ratio:4/3;object-fit:cover;margin-bottom:8px}
.modal .box.wide{max-width:900px}

/* ---------- Chi tiết sản phẩm ---------- */
.pd{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.pd-gal .main{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);cursor:zoom-in}
.pd-gal .main img{width:100%;height:100%;object-fit:cover}
.pd-gal .th{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.pd-gal .th button{padding:0;border:2px solid transparent;aspect-ratio:4/3;overflow:hidden;background:none;opacity:.6;transition:opacity .2s,border-color .2s}
.pd-gal .th button.on,.pd-gal .th button:hover{opacity:1;border-color:var(--brass)}
.pd-gal .th img{width:100%;height:100%;object-fit:cover}
.pd-gal .th .vis{display:grid;place-items:center;background:var(--ink)}
.pd-info{position:sticky;top:110px}
.pd-info h1{font-size:clamp(32px,3.6vw,48px)}
.pd-info .lead{color:var(--muted)}
.pd-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:22px 0}
.pd-price b{font-family:var(--serif);font-weight:500;font-size:34px;color:var(--ink)}
.pd-price span{color:var(--muted);font-size:14px}
.opt-t{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;display:flex;justify-content:space-between}
.opt-t b{color:var(--ink);letter-spacing:0;text-transform:none;font-size:14px}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.swatches button{width:40px;height:40px;border-radius:50%;border:2px solid var(--white);box-shadow:0 0 0 1px var(--line);padding:0}
.swatches button.on{box-shadow:0 0 0 2px var(--brass)}
.wood{background-image:repeating-linear-gradient(100deg,rgba(0,0,0,.18) 0 2px,transparent 2px 7px)!important}
.mini-calc{background:var(--white);padding:22px;margin:20px 0}
.mini-calc .row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.mini-calc input{width:100%;border:1px solid var(--line);padding:10px 12px;font-size:15px;outline:none}
.mini-calc input:focus{border-color:var(--ink)}
.mini-calc label{font-size:12.5px;font-weight:600;color:var(--muted);display:block;margin-bottom:4px}
.mini-calc .out{margin-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.mini-calc .out b{font-size:20px;color:var(--ink)}
.pd-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pd-actions .btn-brass{grid-column:1/-1}
.specs{width:100%;border-collapse:collapse}
.specs th,.specs td{text-align:left;padding:16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.specs th{width:38%;color:var(--muted);font-weight:500}
.specs td{font-weight:600;color:var(--ink)}
.pd-tabs{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.perks{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.perks li{display:flex;gap:14px;padding:18px;background:var(--white)}
.perks .ico{color:var(--brass);width:26px;height:26px;stroke-width:1.5}
.perks b{display:block;color:var(--ink)}
.perks span{font-size:14px;color:var(--muted)}

/* ---------- Công cụ thiết kế & dự toán ---------- */
.cfg{display:grid;grid-template-columns:1fr 440px;gap:40px;align-items:start}
.cfg>*{min-width:0}
.cfg-steps{display:flex;gap:0;margin-bottom:36px;border-bottom:1px solid var(--line);overflow-x:auto}
.cfg-steps button{background:none;border:0;padding:14px 18px 16px;font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;gap:8px;align-items:center}
.cfg-steps button i{font-style:normal;width:24px;height:24px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-size:12px}
.cfg-steps button.on{color:var(--ink);border-color:var(--brass)}
.cfg-steps button.done{color:var(--ink)}
.cfg-steps button.done i{background:var(--ink);color:#fff;border-color:var(--ink)}
.cfg-pane{display:none}
.cfg-pane.on{display:block;animation:fade .4s var(--ease)}
.cfg-pane h2{font-size:clamp(26px,3vw,36px)}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 30px}
.opts.c2{grid-template-columns:repeat(2,1fr)}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .in{display:block;height:100%;background:var(--white);border:1.5px solid transparent;transition:border-color .2s,box-shadow .2s;padding:0 0 14px}
.opt .in img{aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:12px}
.opt .in b{display:block;padding:0 16px;color:var(--ink);font-size:15px}
.opt .in span{display:block;padding:0 16px;color:var(--muted);font-size:13px}
.opt.txt .in{padding:18px}
.opt.txt .in b,.opt.txt .in span{padding:0}
.opt input:checked+.in{border-color:var(--brass);box-shadow:0 10px 30px rgba(168,125,67,.18)}
.opt input:focus-visible+.in{outline:2px solid var(--brass);outline-offset:2px}
.opt input:checked+.in::after{content:"✓";position:absolute;right:10px;top:10px;width:26px;height:26px;border-radius:50%;background:var(--brass);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}
.dims{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:620px}
.range-row{margin:24px 0}
.range-row input[type=range]{width:100%;accent-color:var(--brass)}
.cfg-nav{display:flex;justify-content:space-between;gap:12px;margin-top:20px;padding-top:24px;border-top:1px solid var(--line)}
.cfg-side{position:sticky;top:110px;background:var(--white);box-shadow:var(--shadow)}
.cfg-side .pv{background:var(--paper-2);padding:28px;display:grid;place-items:center;min-height:300px}
.cfg-side .pv svg{width:100%;max-height:320px}
.cfg-side .sum{padding:24px 28px}
.cfg-side dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0 0 18px;font-size:14px}
.cfg-side dt{color:var(--muted)}
.cfg-side dd{margin:0;text-align:right;font-weight:600;color:var(--ink)}
.cfg-side .total{border-top:1px solid var(--line);padding-top:16px;margin-bottom:16px}
.cfg-side .total small{display:block;color:var(--muted);font-size:13px}
.cfg-side .total b{font-family:var(--serif);font-weight:500;font-size:30px;color:var(--ink);line-height:1.2}
.cfg-side .cfg-note{font-size:12.5px;color:var(--muted);margin:10px 0 0}

/* ---------- Bảng giá ---------- */
.price-wrap{background:var(--white);box-shadow:var(--shadow)}
.ptable{width:100%;border-collapse:collapse}
.ptable th,.ptable td{text-align:left;padding:18px 24px;border-bottom:1px solid var(--line);vertical-align:top}
.ptable thead th{background:var(--ink);color:var(--on-dark);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.ptable td:first-child b{display:block;color:var(--ink)}
.ptable td small{color:var(--muted);font-size:13.5px}
.ptable td.p{white-space:nowrap;font-weight:700;color:var(--ink);font-size:17px}
.ptable td.p span{display:block;font-size:12.5px;color:var(--muted);font-weight:500}
.ptable tr:last-child td{border-bottom:0}
.p-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.p-notes div{padding:24px;border:1px solid var(--line)}
.p-notes b{display:block;color:var(--ink);margin-bottom:6px}
.p-notes p{margin:0;color:var(--muted);font-size:14.5px}

/* ---------- Bài viết ---------- */
.n-feat{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;align-items:center;margin-bottom:70px;padding-bottom:70px;border-bottom:1px solid var(--line)}
.n-feat .im{aspect-ratio:16/10;overflow:hidden}
.n-feat .im img{width:100%;height:100%;object-fit:cover}
.n-feat h2{font-size:clamp(28px,3vw,40px)}
.article{display:grid;grid-template-columns:220px 1fr 300px;gap:56px;align-items:start}
.article>*{min-width:0}
.toc{position:sticky;top:110px;font-size:14px}
.toc b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc a{display:block;padding:7px 0 7px 14px;border-left:1px solid var(--line);color:var(--muted)}
.toc a.on,.toc a:hover{color:var(--ink);border-color:var(--brass)}
.prose{font-size:17.5px;line-height:1.8;max-width:720px}
.prose h2{font-size:32px;margin:1.6em 0 .6em}
.prose h3{font-size:21px;margin:1.4em 0 .5em}
.prose img{margin:1.6em 0}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 26px;border-left:2px solid var(--brass);font-family:var(--serif);font-size:23px;line-height:1.5;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px;margin:1.4em 0}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left}
.prose th{background:var(--paper-2)}
.share{display:flex;gap:8px;align-items:center;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);flex-wrap:wrap}
.share a,.share button{border:1px solid var(--line);background:none;padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--ink)}
.share a:hover,.share button:hover{border-color:var(--ink)}
.side-box{background:var(--ink);color:var(--on-dark-2);padding:28px;position:sticky;top:110px}
.side-box h3{color:#fff;font-family:var(--serif);font-weight:500;font-size:26px}
.side-box .ph{display:block;font-size:24px;font-weight:700;color:var(--brass-2);margin:6px 0 18px}

/* ---------- Giới thiệu ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.story .im{aspect-ratio:4/5;overflow:hidden}
.story .im img{width:100%;height:100%;object-fit:cover}
.big-quote{font-family:var(--serif);font-size:clamp(26px,3.2vw,42px);line-height:1.35;color:var(--ink);max-width:980px;margin:0 auto;text-align:center}
.big-quote em{color:var(--brass)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
.values>div{background:var(--ink);padding:40px 34px}
.values .ico{width:36px;height:36px;color:var(--brass-2);stroke-width:1.3;margin-bottom:22px}
.values p{color:var(--on-dark-2);margin:0;font-size:15px}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.timeline>div{border-top:1px solid var(--ink);padding-top:22px}
.timeline b{display:block;font-family:var(--serif);font-size:34px;font-weight:500;color:var(--brass);line-height:1;margin-bottom:12px}
.timeline p{color:var(--muted);font-size:15px;margin:0}

/* ---------- Liên hệ ---------- */
.ct-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:-60px;position:relative;z-index:2}
.ct-card{background:var(--white);padding:34px;box-shadow:var(--shadow)}
.ct-card .ico{width:30px;height:30px;color:var(--brass);stroke-width:1.4;margin-bottom:18px}
.ct-card small{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ct-card b{display:block;color:var(--ink);font-size:17px;line-height:1.5}
.ct-card a.big{font-family:var(--serif);font-size:28px;color:var(--ink);display:block;line-height:1.3}
.map{aspect-ratio:16/7;width:100%;border:0;display:block;filter:grayscale(.6) contrast(1.05)}
.ct-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px}

/* ---------- Hiện dần khi cuộn ---------- */
.rv-up{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-up.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv-up{opacity:1;transform:none}
}

/* ==========================================================================
   Màn hình nhỏ
   ========================================================================== */
@media (max-width:1320px){
  .header .wrap{gap:20px}
  .h-phone{display:none}
}
@media (max-width:1180px){
  .nav{display:none}
  .topbar .l span:last-child,.topbar .r a:first-child{display:none}
  .topbar span,.topbar a{white-space:nowrap}
  .burger{display:grid}
  .quickbar form{grid-template-columns:1fr 1fr 1fr}
  .quickbar .qb-title{grid-column:1/-1}
  .quickbar label{border-bottom:1px solid var(--line)}
  .quickbar .btn{padding:18px;grid-column:span 1}
  .article{grid-template-columns:1fr 280px}
  .toc{display:none}
  .cfg{grid-template-columns:1fr 360px}
}
@media (max-width:980px){
  .sec{padding:80px 0}
  .sec-head,.intro,.config-cta .wrap,.sys,.faq-wrap,.book,.pd,.pd-tabs,.n-feat,.story,.ct-grid,.cfg{grid-template-columns:1fr}
  .sec-head p{justify-self:start}
  .sec-head{gap:16px;margin-bottom:40px}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0;padding-left:0}
  .stat{padding-bottom:30px}
  .cats{grid-template-columns:1fr 1fr;grid-auto-rows:240px}
  .p-grid,.n-grid,.works,.values{grid-template-columns:1fr 1fr}
  .works.masonry .work:nth-child(n){grid-row:auto;grid-column:auto}
  .why{grid-template-columns:1fr 1fr}
  .why>div:nth-child(2){border-right:0;margin-right:0}
  .process{grid-template-columns:1fr 1fr 1fr;gap:40px 0}
  .process>div::after{display:none}
  .brands{grid-template-columns:repeat(3,1fr)}
  .brands span:nth-child(3){border-right:0}
  .brands span:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .f-main .wrap{grid-template-columns:1fr 1fr}
  .book .ph{min-height:380px}
  .book .fm{padding:50px 28px}
  .pd-info,.cfg-side,.side-box{position:static}
  .article{grid-template-columns:1fr}
  .p-notes,.timeline,.ct-cards{grid-template-columns:1fr}
  .intro .pics{padding:0 40px 40px 0;max-width:560px}
  .intro .pics .badge{left:0}
}
@media (max-width:640px){
  body{font-size:15.5px;padding-bottom:64px}
  .wrap{padding:0 18px}
  .sec{padding:64px 0}
  .topbar .l{display:none}
  .topbar .wrap{justify-content:center}
  .header .wrap{height:68px;gap:12px}
  .is-home .header:not(.scrolled){top:40px}
  .logo b{font-size:19px}
  .header .logo small{display:none}
  .h-btn{width:40px;height:40px}
  .logo-mark{width:34px;height:34px}
  .hero{min-height:620px;height:92vh}
  .hero-nav{bottom:96px}
  .hero-nav .bars button{width:30px}
  .hero-nav .arrows button{width:42px;height:42px}
  .hero p.lead{font-size:16px}
  .hero .ctas .btn{flex:1 1 100%}
  .quickbar{margin-top:-50px}
  .quickbar form{grid-template-columns:1fr 1fr}
  .quickbar label{padding:12px 16px}
  .quickbar label:nth-of-type(odd){border-right:1px solid var(--line)}
  .quickbar label:nth-of-type(even){border-right:0}
  .quickbar .qb-sel{grid-column:1/-1;border-right:0!important}
  .quickbar .btn{grid-column:1/-1}
  .cats{grid-template-columns:1fr;grid-auto-rows:230px}
  .cat:nth-child(1){grid-column:auto;grid-row:span 1}
  .cat:nth-child(1) h3{font-size:28px}
  .p-grid,.n-grid,.works,.values,.why{grid-template-columns:1fr}
  .why>div{border-right:0;margin-right:0;padding-right:0;border-bottom:1px solid var(--line)}
  .works.masonry{grid-auto-rows:240px}
  .works.masonry .work:nth-child(n){grid-row:span 1}
  .process{grid-template-columns:1fr 1fr}
  .checks{grid-template-columns:1fr}
  .form,.dims,.mini-calc .row{grid-template-columns:1fr}
  .dims{grid-template-columns:1fr 1fr}
  .f-main .wrap{grid-template-columns:1fr;gap:36px}
  .opts,.opts.c2{grid-template-columns:1fr 1fr;gap:10px}
  .opt .in b{font-size:14px;padding:0 10px}
  .opt .in span{padding:0 10px}
  .page-hero{padding:60px 0 56px}
  .ptable thead{display:none}
  .ptable,.ptable tbody,.ptable tr,.ptable td{display:block;width:100%}
  .ptable tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .ptable td{border:0;padding:4px 20px}
  .ptable td.p{white-space:normal}
  .pd-actions{grid-template-columns:1fr}
  .prose table{display:block;overflow-x:auto;white-space:nowrap}
  .toolbar .right{width:100%}
  .toolbar .right>*{flex:1;min-width:0}
  .fab{display:none}
  .mbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--ink);border-top:1px solid var(--line-dark)}
  .mbar a,.mbar button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px 11px;color:#fff;font-size:11.5px;font-weight:700;background:none;border:0}
  .mbar .ico{width:20px;height:20px}
  .mbar .m-call{background:var(--brass)}
  .mbar .m-zalo{background:var(--zalo)}
  .cmp-bar{bottom:76px}
  .lb .prev,.lb .next{top:auto;bottom:24px;transform:none}
  .stat b{font-size:42px}
}

/* In bảng giá */
@media print{
  .topbar,.header,.footer,.fab,.mbar,.page-hero .crumbs,.no-print,.cmp-bar{display:none!important}
  body{background:#fff;padding:0}
  .page-hero{background:#fff;color:#000;padding:0 0 20px}
  .page-hero h1{color:#000}
  .price-wrap{box-shadow:none}
  .ptable thead th{background:#eee;color:#000}
}

/* ==========================================================================
   Bổ sung cho WordPress
   ========================================================================== */
.admin-bar .header{top:32px}
.admin-bar.is-home .header:not(.scrolled){top:72px}
.admin-bar.is-home .header.scrolled{top:32px}
@media (max-width:782px){
  .admin-bar .header,.admin-bar.is-home .header.scrolled{top:46px}
  .admin-bar.is-home .header:not(.scrolled){top:86px}
}
@media (max-width:600px){
  .admin-bar .header,.admin-bar.is-home .header.scrolled{top:0}
  .admin-bar.is-home .header:not(.scrolled){top:40px}
}
.custom-logo{max-height:52px;width:auto}
/* Logo màu (đỏ – xám) trên nền tối: viền trắng ôm theo nét logo để không bị chìm */
.is-home .header:not(.scrolled) .custom-logo,.footer .custom-logo{filter:drop-shadow(0 0 .8px #fff)}
.footer .custom-logo{max-height:64px}
/* Nút mạng xã hội ở chân trang: biểu tượng + tên */
.footer .socials{flex-wrap:wrap}
.footer .socials a{width:auto;height:40px;padding:0 16px 0 12px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--on-dark)}
.footer .socials a svg{width:18px;height:18px;flex:none}
.footer .socials a.soc-zalo:hover{background:var(--zalo);border-color:var(--zalo)}
.sys[hidden],.sys-pane[hidden]{display:none}
.nav .sub-menu{list-style:none;margin:0;padding:8px;position:absolute;top:100%;min-width:230px;background:var(--white);box-shadow:var(--shadow);border-top:1px solid var(--line);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.nav li.has-sub{position:relative}
.nav li.has-sub:hover>.sub-menu,.nav li.has-sub:focus-within>.sub-menu{opacity:1;visibility:visible}
.nav .sub-menu a{display:block;padding:9px 14px;font-size:14.5px;font-weight:600;color:var(--ink)}
.nav .sub-menu a:hover{color:var(--brass)}
.filters a{display:inline-block;border:1px solid var(--line);padding:9px 18px;font-weight:600;font-size:14px;border-radius:999px;transition:all .2s}
.filters a:hover{border-color:var(--ink)}
.filters a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.article.two{grid-template-columns:1fr 300px}
@media (max-width:980px){.article.two{grid-template-columns:1fr}}
.work.hide,.p-card.hide,.ptable tr.hide{display:none}
.searchform{display:flex;gap:8px}
.searchform input{flex:1;border:1px solid var(--line);background:var(--white);padding:14px 16px;font-size:16px;outline:none}
.searchform input:focus{border-color:var(--ink)}
.pager{margin-top:50px}
.pager .nav-links{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.pager .page-numbers{min-width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);font-weight:600;padding:0 12px}
.pager .page-numbers.current,.pager .page-numbers:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.prose a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:.4em}
.prose figure{margin:1.6em 0}
.prose figcaption,.wp-caption-text{font-size:14px;color:var(--muted);text-align:center;margin-top:8px}
.wp-caption,.prose .wp-block-image{max-width:100%}
.alignleft{float:left;margin:.3em 1.5em 1em 0}
.alignright{float:right;margin:.3em 0 1em 1.5em}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.prose iframe{max-width:100%}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.toc:empty{display:none}
.comments-area{margin-top:50px}
.comment-list{padding-left:1.2em}
.comment-form p{margin:0 0 16px}
.comment-form label{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.comment-form textarea,.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url]{width:100%;max-width:100%;border:1px solid var(--line);background:var(--white);padding:12px 14px;font-size:16px;outline:none}
.comment-form textarea:focus,.comment-form input:focus{border-color:var(--ink)}
.comment-form .submit{background:var(--ink);color:#fff;border:0;padding:14px 26px;font-weight:700;cursor:pointer}
.comment-form .comment-form-cookies-consent label{display:inline;text-transform:none;letter-spacing:0;font-weight:500}