/*
Theme Name: AN HOME — Nội Thất - Rèm - Nệm
Theme URI: https://nguyenannhien.vn
Author: AN HOME
Description: Theme landing page cho AN HOME — Nội Thất - Rèm - Nệm. Có thư viện mẫu, máy tính giá tức thì, khối công trình và form nhận báo giá. Toàn bộ nội dung sửa được trong trang quản trị.
Version: 1.8.71
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: an-home
*/

:root{
  --ink:#14315c; --ink-2:#2f4d7a; --muted:#6b7480;
  /* ⚠️ BA BIẾN DƯỚI ĐÂY TÊN LÀ "gold" NHƯNG GIÁ TRỊ LÀ MÀU XANH DƯƠNG.
     Ngày 01/08/2026 Chủ tịch đổi nhận diện từ xanh rêu + vàng đồng sang
     tông xanh dương theo logo AnHome mới. Giá trị đổi, TÊN BIẾN GIỮ NGUYÊN
     để khỏi phải sửa hàng trăm chỗ dùng — nhưng cái tên từ đó nói dối.
     Nhật ký 17/08 ghi một lần suýt lấy biến này làm viền vàng.
     Cần màu vàng thật thì KHÔNG có sẵn — hỏi Chủ tịch, đừng lấy --gold. */
  --gold:#1668d4; --gold-d:#0d4ea8; --gold-l:#7fb0ec;
  --cream:#f2f6fc; --soft:#f7fafd; --line:#dbe5f2; --bg:#ffffff;
  --shadow:0 1px 2px rgba(20,49,92,.05), 0 8px 24px rgba(20,49,92,.08);
  --shadow-lg:0 2px 4px rgba(20,49,92,.07), 0 18px 48px rgba(20,49,92,.14);
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.sec{padding:72px 0}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.eyebrow{color:var(--gold-d);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 10px}
h1,h2,h3{letter-spacing:-.02em}
h2{font-size:clamp(26px,3.4vw,38px);line-height:1.2;margin:0 0 12px}
h3{font-size:19px;margin:0 0 6px;letter-spacing:-.01em}
.lead{color:var(--muted);max-width:620px;margin:0 0 36px;font-size:17px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:999px;font-weight:600;font-size:15.5px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  font-family:inherit;transition:.18s}
.btn-p{background:var(--gold);color:#fff;box-shadow:0 6px 18px rgba(22,104,212,.28)}
.btn-p:hover{background:var(--gold-d)}
.btn-o{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.45)}
.btn-o:hover{background:rgba(255,255,255,.2)}
.btn-g{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-g:hover{border-color:var(--gold);color:var(--gold-d)}

/* header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:70px}
/* Logo 2026 là chữ nằm ngang (tỉ lệ 4,3:1). Để cao 58px thì rộng tới 247px,
   ép menu xuống hai dòng. Hạ chiều cao và chặn bề ngang cho menu thở. */
.logo-img{height:44px;width:auto;max-width:200px;object-fit:contain;flex:0 0 auto}
.logo-txt{font-size:21px;font-weight:800;letter-spacing:.06em;white-space:nowrap;text-decoration:none}
.logo-txt span{color:var(--gold)}
.nav nav{display:flex;gap:24px;margin-left:auto;font-size:15px;font-weight:500}
.nav nav a{text-decoration:none;color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav nav a:hover{color:var(--gold-d);border-color:var(--gold)}
.nav .tel{font-weight:700;color:var(--gold-d);text-decoration:none;white-space:nowrap}
@media(max-width:940px){.nav nav{display:none}.nav .cta{margin-left:auto}}
@media(max-width:620px){.nav{gap:14px}.nav .cta{display:none}.nav .tel{margin-left:auto}.logo-img{height:34px;max-width:150px}}

/* hero */
.hero{position:relative;color:#fff;padding:96px 0 88px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background-image:var(--img);background-size:cover;background-position:center 38%}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,24,52,.9) 0%,rgba(6,24,52,.66) 46%,rgba(6,24,52,.2) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(32px,5.2vw,54px);line-height:1.1;margin:0 0 16px;max-width:15ch;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--gold-l)}
.hero p{max-width:46ch;color:#d6e3f5;font-size:18px;margin:0 0 30px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-l);
  border:1px solid rgba(127,176,236,.5);border-radius:999px;padding:7px 16px;margin-bottom:22px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.proof{display:flex;gap:32px;flex-wrap:wrap;margin-top:44px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16);max-width:660px}
.proof b{display:block;font-size:26px;color:#fff;line-height:1.2}
.proof span{font-size:13.5px;color:#adc4e4}

/* trust */
.trust{background:var(--cream);border-bottom:1px solid var(--line);padding:26px 0}
.trust ul{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
.trust li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px}
.trust .ic{flex:none;width:34px;height:34px;border-radius:10px;background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;font-size:17px}
.trust b{display:block;font-size:15px}
.trust small{color:var(--muted);font-size:13px}
@media(max-width:800px){.trust ul{grid-template-columns:repeat(2,1fr)}}

/* needs */
.needs{display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
.need{position:relative;border-radius:var(--r);overflow:hidden;min-height:240px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
  color:#fff;text-decoration:none;box-shadow:var(--shadow);transition:.22s}
.need:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.need::before{content:"";position:absolute;inset:0;background-image:var(--img);
  background-size:cover;background-position:center;transition:transform .45s}
.need:hover::before{transform:scale(1.05)}
.need::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,24,52,.86) 0%,rgba(6,24,52,.15) 62%)}
.need>*{position:relative;z-index:2}
.need h3{font-size:18px;margin:0 0 4px;color:#fff}
.need p{margin:0;font-size:13.5px;color:#cfdcf0}
.need .go{margin-top:12px;font-size:13px;font-weight:700;color:var(--gold-l)}
@media(max-width:900px){.needs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.needs{grid-template-columns:1fr}}

/* catalog */
.catalog{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 28px}
.chip{padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;
  font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--ink-2);transition:.15s}
.chip:hover{border-color:var(--gold-l)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);transition:.22s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--gold-l)}
.sw{height:184px;position:relative;overflow:hidden;background:var(--cream)}
.sw img{width:100%;height:100%;object-fit:cover}
.sw .tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);color:var(--ink);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px}
.card .body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:16.5px;margin:0 0 4px}
.card .desc{color:var(--muted);font-size:13.5px;margin:0 0 14px;flex:1}
.price{display:flex;align-items:baseline;gap:6px;padding-top:12px;border-top:1px dashed var(--line)}
.price b{font-size:20px;color:var(--gold-d);font-variant-numeric:tabular-nums}
.price span{font-size:13px;color:var(--muted)}
.card .acts{display:flex;gap:8px;margin-top:14px}
.card .acts a{flex:1;padding:9px;font-size:13.5px;border-radius:9px;text-align:center;
  text-decoration:none;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--ink-2)}
.card .acts a.main{background:var(--ink);color:#fff;border-color:var(--ink)}
.card .acts a:hover{border-color:var(--gold)}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}

/* calculator */
.calc-sec{background:var(--ink);color:var(--cream)}
.calc-sec h2{color:#fff}
.calc-sec .lead{color:#adc4e4}
.calc-sec .eyebrow{color:var(--gold-l)}
.calc{display:grid;grid-template-columns:1.55fr .95fr;gap:24px;align-items:start}
.panel{background:var(--bg);color:var(--ink);border-radius:18px;padding:22px;box-shadow:var(--shadow-lg)}
.panel h3{display:flex;align-items:center;gap:9px;font-size:16px;margin:0 0 3px}
.panel .hint{color:var(--muted);font-size:13px;margin:0 0 14px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
.calc table{width:100%;border-collapse:collapse}
.calc th{text-align:left;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:0 6px 7px;border-bottom:1px solid var(--line)}
.calc td{padding:6px;vertical-align:middle}
input[type=number],input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:9px;
  font-size:14.5px;font-family:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(22,104,212,.13)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;color:var(--gold-d)}
.rm{border:none;background:none;color:#b4544f;font-size:19px;cursor:pointer;line-height:1;padding:0 2px}
.addbtn{margin-top:10px;background:#fff;border:1px dashed var(--gold);color:var(--gold-d);
  border-radius:9px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.addbtn:hover{background:var(--cream)}
.beds{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-top:4px}
.bed{border:1px solid var(--line);border-radius:11px;padding:12px;text-align:center;cursor:pointer;transition:.15s}
.bed:hover{border-color:var(--gold-l)}
.bed.on{border-color:var(--gold);background:var(--cream);box-shadow:0 0 0 2px rgba(22,104,212,.14)}
.bed b{display:block;font-size:15px}
.bed small{color:var(--muted);font-size:12.5px}
.bed .qty{margin-top:8px;font-size:13px;color:var(--gold-d);font-weight:700}
.result{position:sticky;top:88px;background:linear-gradient(165deg,#1d4e94,#0e2a52);
  color:var(--cream);border-radius:18px;padding:24px;border:1px solid #2b5da8}
.result h3{color:#fff;margin-bottom:14px}
.rline{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14.5px;color:#b9cbe6}
.rline b{color:#fff;font-variant-numeric:tabular-nums;font-weight:600}
.grand{border-top:1px solid #33629f;margin-top:12px;padding-top:16px}
.grand span{font-size:13.5px;color:var(--gold-l);display:block;letter-spacing:.05em;
  text-transform:uppercase;font-weight:700}
.grand b{font-size:32px;color:#fff;display:block;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vat{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#b9cbe6;margin:14px 0 4px}
.vat input{width:auto}
.result .btn{width:100%;margin-top:16px}
.result .note{font-size:12px;color:#93a9c7;margin:12px 0 0;line-height:1.55}
@media(max-width:980px){.calc{grid-template-columns:1fr}.result{position:static}}

/* Máy tính giá trên điện thoại — đo thật ở khung 375px ngày 18/08/2026.
   Bảng 5 cột ép vào 291px thì ô "Loại rèm" chỉ còn 28px, mà chữ "Sáo Gỗ"
   cần 60px: khách không đọc được mình đang chọn loại rèm nào. Cột Thành tiền
   chiếm 99px vì con số không xuống dòng được, nên nó ăn hết chỗ của các ô nhập.
   Cách chữa: dưới 560px thì mỗi ô cửa xuống thành 2 dòng —
   dòng trên là loại rèm (rộng cả hàng), dòng dưới là rộng · cao · thành tiền.
   Giấu <th> đi thì hai ô số mất nhãn nhìn thấy được (chúng chỉ có aria-label,
   mắt thường không thấy), nên phải gắn lại nhãn bằng ::before. */
@media(max-width:560px){
	.calc table th{display:none}
	.calc #rows tr{display:grid;grid-template-columns:1fr 1fr auto;
		grid-template-areas:"loai loai xoa" "rong cao tien";
		gap:8px;align-items:end;padding:12px 0;border-bottom:1px solid #e6ecf5}
	.calc #rows td{display:block;padding:0;border:0}
	.calc #rows td:nth-child(1){grid-area:loai}
	.calc #rows td:nth-child(2){grid-area:rong}
	.calc #rows td:nth-child(3){grid-area:cao}
	.calc #rows td:nth-child(4){grid-area:tien;text-align:right;white-space:nowrap;
		font-weight:600;padding-bottom:8px}
	.calc #rows td:nth-child(5){grid-area:xoa;text-align:right}
	.calc #rows td:nth-child(2)::before{content:"Rộng (m)"}
	.calc #rows td:nth-child(3)::before{content:"Cao (m)"}
	.calc #rows td:nth-child(2)::before,.calc #rows td:nth-child(3)::before{
		display:block;font-size:11px;color:#6b7a90;margin-bottom:3px;letter-spacing:.02em}
	.calc #rows select,.calc #rows input{width:100%;box-sizing:border-box}
}

/* projects */
.projects{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
/* Khối bốn loại công trình: villa, nhà phố, căn hộ dịch vụ, khách sạn */
.projects.loai{grid-template-columns:repeat(4,1fr)}
.projects.loai .ph{height:186px}
.proj{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.proj .ph{height:210px;position:relative;overflow:hidden}
.proj .ph img{width:100%;height:100%;object-fit:cover}
.proj .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,24,52,.78) 0%,rgba(6,24,52,0) 55%)}
.proj .ph b{position:absolute;left:16px;bottom:14px;color:#fff;font-size:17px;z-index:2;
  text-shadow:0 2px 10px rgba(0,0,0,.55)}
.proj .meta{padding:15px 16px;font-size:14px;color:var(--muted)}
.proj .meta b{color:var(--ink);display:block;margin-bottom:3px;font-size:14.5px}
.logos{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px}
.logos span{border:1px solid var(--line);border-radius:999px;padding:9px 20px;
  font-size:13.5px;font-weight:600;color:var(--muted);background:#fff;letter-spacing:.04em}
@media(max-width:1040px){.projects.loai{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.projects{grid-template-columns:1fr}}
@media(max-width:560px){.projects.loai{grid-template-columns:1fr}}

/* band */
.band{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px}
.banner{position:relative;border-radius:var(--r);overflow:hidden;height:300px;box-shadow:var(--shadow)}
.banner img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
.banner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,24,52,.86) 0%,rgba(6,24,52,0) 55%)}
.banner span{position:absolute;left:16px;bottom:14px;right:16px;z-index:2;color:#fff;
  font-size:14px;font-weight:600;line-height:1.45;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.bandnote{text-align:center;color:var(--muted);font-size:13.5px;margin:-10px 0 26px}
@media(max-width:820px){.band{grid-template-columns:1fr 1fr}.band>:nth-child(3){display:none}}
@media(max-width:520px){.band{grid-template-columns:1fr}.banner{height:230px}
  .band>:nth-child(3){display:block}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 18px}
.step::before{counter-increment:s;content:"0" counter(s);display:block;font-size:26px;
  font-weight:800;color:var(--gold-l);line-height:1;margin-bottom:10px}
.step b{display:block;margin-bottom:5px;font-size:15.5px}
.step small{color:var(--muted);font-size:13.5px;line-height:1.55;display:block}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* reviews + faq */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;
  margin-bottom:14px;box-shadow:var(--shadow)}
.rev .stars{color:var(--gold);font-size:14px;letter-spacing:2px}
.rev p{margin:8px 0 12px;font-size:15px}
.rev .who{font-size:13.5px;color:var(--muted)}
.rev .who b{color:var(--ink)}
.rev-pic{border-radius:10px;overflow:hidden;margin:0 0 12px}
.rev-pic img{width:100%;height:230px;object-fit:cover}
details{border-bottom:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font-weight:600;font-size:15.5px;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-size:22px;font-weight:400;flex:none}
details[open] summary::after{content:"–"}
details .ans{margin:11px 0 0;color:var(--muted);font-size:14.5px}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:28px}}

/* form */
.formsec{background:var(--cream);border-top:1px solid var(--line)}
.fbox{display:grid;grid-template-columns:1fr 1.1fr;border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow-lg);background:#fff}
.fbox .left{background:linear-gradient(165deg,#1d4e94,#0e2a52);color:var(--cream);padding:36px}
.fbox .left h2{color:#fff;font-size:29px}
.fbox .left p{color:#b6c8e4;font-size:15.5px}
.fbox .left ul{list-style:none;padding:0;margin:22px 0 0}
.fbox .left li{padding:9px 0 9px 26px;position:relative;font-size:14.5px;color:#d5e1f2}
.fbox .left li::before{content:"✓";position:absolute;left:0;color:var(--gold-l);font-weight:700}
.fbox .right{padding:36px}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--ink-2)}
.fld textarea{min-height:78px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formsec .btn{width:100%;margin-top:6px}
.priv{font-size:12.5px;color:var(--muted);text-align:center;margin:12px 0 0}
.notice{padding:12px 14px;border-radius:10px;margin-bottom:16px;font-size:14.5px}
.notice.ok{background:#e8f3ec;border:1px solid #b7d8c4;color:#22593a}
.notice.err{background:#fbeceb;border:1px solid #edc4c1;color:#8e3833}
.hp{position:absolute;left:-9999px}
@media(max-width:900px){.fbox{grid-template-columns:1fr}.fbox .left,.fbox .right{padding:28px}}

/* footer */
.site-footer{background:var(--ink);color:#a9bcd8;padding:52px 0 96px;font-size:14px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.site-footer h4{color:#fff;font-size:14px;margin:0 0 12px;letter-spacing:.06em;text-transform:uppercase}
.site-footer a{color:#a9bcd8;text-decoration:none;display:block;padding:4px 0}
.site-footer a:hover{color:var(--gold-l)}
.site-footer .logo-txt{color:#fff;margin-bottom:10px;display:inline-block}
.site-footer .logo-img{height:42px;width:auto;margin-bottom:12px;display:block}
.fbot{border-top:1px solid #2a4a75;margin-top:32px;padding-top:20px;font-size:13px;color:#8398b8}
@media(max-width:800px){.fgrid{grid-template-columns:1fr 1fr}}

/* bậc giá thứ hai theo chiều cao ô cửa */
.price-cao{margin:8px 0 0;font-size:13px;color:var(--muted);
  border-top:1px dashed var(--line);padding-top:8px}
.price-cao b{color:var(--ink-2);font-variant-numeric:tabular-nums}
.calc tr.cao .sub::after{content:" ▲";font-size:10px;color:var(--gold-d);vertical-align:top}

/* Nhắc khi số đo lớn bất thường — nghi khách gõ centimét thay vì mét.
   Chỉ nhắc, không chặn: ô cửa dự án lớn vẫn phải tính được.
   Dùng tông hổ phách riêng, KHÔNG dùng var(--gold) vì biến đó thật ra là màu xanh. */
.calc .donvi-warn{margin:10px 0 0;padding:9px 12px;border-radius:10px;
  background:#fff6e5;border:1px solid #d99a00;color:#5a3d00;font-size:13px}
.calc tr.nghi-cm input{border-color:#d99a00;background:#fff9ee}
/* Chốt chặn: thuộc tính hidden rất dễ bị một khai báo display khác đè mất. */
.calc .donvi-warn[hidden]{display:none}

/* khối dùng chung cho các trang bán hàng riêng (rèm nhà phố...) */
.cols3{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.cols2{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--shadow)}
.box h3{margin:0 0 8px;font-size:17px}
.box p{margin:0 0 10px;color:var(--muted);font-size:14.5px}
.box p:last-child{margin-bottom:0}
.box .ah-fix{color:var(--ink);border-top:1px dashed var(--line);padding-top:10px}
.box .ah-fix b{color:var(--gold-d)}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;min-width:640px;border-collapse:collapse;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:14.5px}
.tbl th{background:var(--cream);text-align:left;font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);font-weight:700;padding:11px 14px;
  border-bottom:1px solid var(--line)}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tbody tr:last-child td{border-bottom:1px solid var(--line)}
.tbl tfoot td{font-weight:700;background:var(--soft);border-bottom:none}
.tbl .num{color:var(--gold-d);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.calcbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.calcbtns .addbtn{margin-top:0}
.ps{max-width:760px;margin:26px auto 0;color:var(--muted);font-size:14.5px}
.ps p{margin:0 0 8px}
.ps b{color:var(--ink)}
.ps a{color:var(--gold-d);font-weight:600}
@media(max-width:820px){.cols3,.cols2{grid-template-columns:1fr}}

/* ---------- trang thu lead (nhận quà) ---------- */
/* Trang này chỉ có một việc: đổi bộ cẩm nang lấy tên và số điện thoại.
   Bỏ menu điều hướng ở đầu trang — mỗi đường link là một lối đi mất khách. */
.page-template-page-nhan-qua .nav nav,
.page-template-page-nhan-qua-php .nav nav{display:none}
.page-template-page-nhan-qua .nav .cta,
.page-template-page-nhan-qua-php .nav .cta{margin-left:auto}

.hero-qua{padding:56px 0 64px}
.hero-qua h1{max-width:none;font-size:clamp(27px,3.6vw,40px);margin-bottom:14px}
.hero-qua p{max-width:52ch;margin-bottom:20px}
.quawrap{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:start}
.qualist{list-style:none;padding:0;margin:0}
.qualist li{position:relative;padding:7px 0 7px 28px;color:#d6e3f5;font-size:15px}
.qualist li::before{content:"✓";position:absolute;left:0;top:7px;color:var(--gold-l);font-weight:700}
.quaright{background:#fff;color:var(--ink);border-radius:18px;padding:26px;box-shadow:var(--shadow-lg)}
.quaright h2{font-size:23px;margin:0 0 4px;color:var(--ink)}
.quasub{color:var(--muted);font-size:14px;margin:0 0 18px}
.quaform .fld{margin-bottom:12px}
.quaform .op{font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0}
.quaform .btn{width:100%;margin-top:6px}
.box-cta{display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(165deg,#1d4e94,#0e2a52);border-color:#2b5da8}
.box-cta h3{color:#fff}
.box-cta p{color:#b9cbe6}
.box-cta .btn{margin-top:6px}
/* khối bốn con số khi đặt trên nền sáng */
.proof-den{border-top-color:var(--line);max-width:none}
.proof-den b{color:var(--ink)}
.proof-den span{color:var(--muted)}
@media(max-width:900px){.quawrap{grid-template-columns:1fr;gap:26px}}

/* ---------- trang cảm ơn ---------- */
.camon-box{background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-lg);padding:44px 32px;text-align:center;max-width:720px;margin:0 auto}
.camon .tick{width:64px;height:64px;border-radius:50%;background:var(--gold);color:#fff;
  display:grid;place-items:center;font-size:32px;margin:0 auto 18px;
  box-shadow:0 8px 22px rgba(22,104,212,.32)}
.camon-box h1{font-size:clamp(25px,3.2vw,34px);line-height:1.22;margin:0 0 12px}
.camon-sub{color:var(--muted);font-size:16.5px;margin:0 0 22px}
.camon-tai{font-size:16.5px;padding:16px 32px}
.camon-note{color:var(--muted);font-size:13px;margin:16px 0 0}
.camon .ps{text-align:left}

/* floating contact + mobile bar */
.float{position:fixed;right:16px;bottom:90px;z-index:70;display:flex;flex-direction:column;gap:10px}
.float a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  color:#fff;text-decoration:none;font-weight:700;font-size:12px;box-shadow:var(--shadow-lg);
  border:2px solid rgba(255,255,255,.85)}
.float .zalo{background:#0068ff}
.float .call{background:var(--gold)}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:71;display:none;gap:8px;padding:10px 12px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.bar .btn{flex:1;padding:13px 8px;font-size:14.5px}
@media(max-width:760px){.bar{display:flex}body{padding-bottom:74px}.sec{padding:56px 0}
  .float{bottom:84px;right:12px}.float a{width:46px;height:46px}}

/* ===== KHỐI BẢO HÀNH (id=bao-hanh) ===== */
.bh-sec{background:var(--soft)}
.bh-sec h2 em{font-style:normal;color:var(--gold-d)}
.bh-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.bh-col{background:var(--bg);border:1px solid var(--line);border-radius:14px;
  padding:24px 24px 20px;box-shadow:var(--shadow)}
.bh-col h3{margin:0 0 4px}
.bh-co{border-top:3px solid var(--gold)}
.bh-khong{border-top:3px solid var(--muted)}
.bh-note{color:var(--muted);font-size:14px;margin:0 0 16px}
.bh-col ul{margin:0;padding:0;list-style:none}
.bh-col li{position:relative;padding:9px 0 9px 28px;font-size:15px;line-height:1.55;
  border-top:1px solid var(--line)}
.bh-col li:first-child{border-top:0}
.bh-co li::before{content:"✓";position:absolute;left:2px;top:9px;
  color:var(--gold-d);font-weight:800}
.bh-khong li::before{content:"—";position:absolute;left:2px;top:9px;
  color:var(--muted);font-weight:800}
.bh-vi{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  color:var(--muted);font-size:14px;font-style:italic}
.bh-nang{margin-top:20px;background:var(--cream);border:1px solid var(--line);
  border-radius:14px;padding:22px 24px}
.bh-nang h3{margin:0 0 8px}
.bh-nang p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.65;max-width:78ch}
.bh-qt{margin:20px 0 0;padding:16px 20px;background:var(--bg);
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;
  font-size:15px;line-height:1.7}
.bh-qt a{color:var(--gold-d);font-weight:700;text-decoration:none}
.bh-qt a:hover{text-decoration:underline}
@media(max-width:820px){.bh-grid{grid-template-columns:1fr}}

/* Ô nhập của form lead: cỡ chữ 16px.
   Safari trên iPhone TỰ PHÓNG TO cả trang khi khách chạm vào ô có chữ dưới 16px —
   trang nhảy lệch sang bên, khách phải chụm tay thu lại mới gõ tiếp được.
   Đây là form thu khách của trang đích quảng cáo nên không được để vướng chỗ này.
   Chỉ nhắm .fld (form lead), KHÔNG đụng ô của máy tính giá — bảng đó dày, phóng chữ là vỡ.
   Đệm 11px để ô cao ~48px, thoả mức chạm tối thiểu 44px. */
.fld input[type=text],.fld input[type=tel],.fld input[type=email],
.fld input[type=number],.fld select,.fld textarea{
  font-size:16px;padding:11px 12px}

/* Nút × xoá dòng trong máy tính giá chỉ 19×15px — ngón tay không chạm trúng.
   Mở rộng VÙNG CHẠM bằng một lớp phủ trong suốt 44×44px, giữ nguyên kích thước
   nhìn thấy được, nên bảng tính không xê dịch một pixel nào. */
.rm{position:relative}
.rm::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:44px;height:44px}

/* ---------------------------------------------------------------------------
   BÀI VIẾT (.entry) — thân bài blog
   ---------------------------------------------------------------------------
   Trước 27/08/2026 khối này KHÔNG có một dòng CSS nào. Bài viết dài rơi về
   kiểu mặc định của trình duyệt: chữ dính nhau, tiêu đề không phân cấp, bảng
   không viền. Viết bài kỹ mà hiển thị như vậy là phí công.

   Dùng lại đúng biến màu và cỡ chữ của theme — không đẻ ra hệ thống thứ hai.
   Bề rộng đọc do index.php khống chế ở 760px; ở đây chỉ lo nhịp dọc.
   -------------------------------------------------------------------------- */
.entry{font-size:16.5px;line-height:1.75;color:var(--ink-2)}
.entry > *:first-child{margin-top:0}
.entry p{margin:0 0 18px}
.entry h2{font-size:clamp(21px,2.6vw,27px);line-height:1.3;color:var(--ink);
  margin:38px 0 12px;padding-top:4px}
.entry h3{font-size:18.5px;color:var(--ink);margin:26px 0 8px}
.entry ul,.entry ol{margin:0 0 18px;padding-left:22px}
.entry li{margin:6px 0}
.entry li>ul,.entry li>ol{margin:6px 0}
.entry a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.entry a:hover{color:var(--gold-d)}
.entry strong{color:var(--ink)}
.entry img{max-width:100%;height:auto;border-radius:var(--r)}
.entry hr{border:0;border-top:1px solid var(--line);margin:32px 0}

/* Bảng giá trong bài — phải cuộn ngang được trên điện thoại, không vỡ trang */
.entry .bang{overflow-x:auto;margin:0 0 20px;-webkit-overflow-scrolling:touch}
.entry table{border-collapse:collapse;width:100%;min-width:420px;font-size:15px}
.entry th{background:var(--cream);color:var(--ink);text-align:left;
  padding:10px 12px;border-bottom:2px solid var(--line);font-weight:600}
.entry td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.entry tbody tr:last-child td{border-bottom:0}

/* Khối nhấn — dùng cho câu trả lời gọn và các lưu ý quan trọng */
.entry .chot{background:var(--soft);border-left:4px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:16px 18px;margin:0 0 22px}
.entry .chot p:last-child{margin-bottom:0}
.entry .luuy{background:#fff8e8;border:1px solid #e8c877;border-radius:var(--r);
  padding:14px 16px;margin:0 0 22px;font-size:15.5px}
.entry .luuy p:last-child{margin-bottom:0}

/* Câu hỏi thường gặp cuối bài */
.entry details{border:1px solid var(--line);border-radius:var(--r);
  padding:12px 16px;margin:0 0 10px;background:var(--bg)}
.entry details[open]{background:var(--soft)}
.entry summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:16px}
.entry details > *:not(summary){margin-top:12px}

@media(max-width:640px){
  .entry{font-size:16px;line-height:1.7}
  .entry h2{margin-top:30px}
}

/* Ô để lại số ở cuối bài viết — xem ah_form_cuoi_bai() trong functions.php */
.bai-cta{margin:44px 0 0;padding:26px 24px;background:var(--cream);
  border-radius:var(--r);border:1px solid var(--line)}
.bai-cta h3{font-size:21px;color:var(--ink);margin:0 0 8px}
.bai-cta > p{margin:0 0 18px;color:var(--ink-2);font-size:15.5px;line-height:1.6}
.bai-cta .hang{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.bai-cta input[type=text],.bai-cta input[type=tel],.bai-cta select{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;
  font-size:16px;font-family:inherit;background:var(--bg);color:var(--ink)}
.bai-cta select{margin-bottom:14px}
.bai-cta input:focus,.bai-cta select:focus{outline:2px solid var(--gold-l);outline-offset:1px}
.bai-cta .btn{width:100%;justify-content:center}
.bai-cta .priv{margin:12px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.bai-cta .notice{margin-bottom:18px}

/* Điện thoại: hai ô tên và số xếp dọc, chữ 16px để iOS không tự phóng to trang */
@media(max-width:560px){
  .bai-cta{padding:22px 18px}
  .bai-cta .hang{grid-template-columns:1fr}
}

/* Danh sách bài viết — nhánh trang gom trong index.php */
.ds-bai{margin:26px 0 0}
.ds-bai .tb{padding:22px 0;border-top:1px solid var(--line)}
.ds-bai .tb:first-child{border-top:0;padding-top:6px}
.ds-bai .tb h2{font-size:clamp(19px,2.4vw,23px);line-height:1.3;margin:0 0 8px}
.ds-bai .tb h2 a{color:var(--ink);text-decoration:none}
.ds-bai .tb h2 a:hover{color:var(--gold)}
.ds-bai .tb p{margin:0 0 10px;color:var(--ink-2);font-size:15.5px;line-height:1.65}
.ds-bai .tb .doc{color:var(--gold);font-weight:600;font-size:14.5px;text-decoration:none}
.ds-bai .tb .doc:hover{text-decoration:underline}

/* Phân trang — WordPress tự sinh, chỉ cần cho nó thở */
.pagination{margin:32px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{padding:8px 13px;border:1px solid var(--line);border-radius:9px;
  color:var(--ink-2);text-decoration:none;font-size:14.5px}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.pagination .page-numbers:hover:not(.current){border-color:var(--gold);color:var(--gold)}
.pagination .screen-reader-text{position:absolute;left:-9999px}