/* Cường Thợ Bếp — cuongthobep.vn · màu theo logo: vàng kim, đỏ mận, nâu đen */
:root{
  --gold:#E9B949; --gold-2:#C8901F; --gold-soft:#f6e3ac;
  --gold-grad:linear-gradient(135deg,#f9e08a 0%,#e9b949 38%,#c8901f 62%,#f2cf6b 85%,#a9720f 100%);
  --plum:#5C0F23; --plum-2:#8E1B2E;
  --dark:#1b1210; --dark-2:#2B1A16; --dark-3:#3a2620;
  --cream:#faf6ee; --cream-2:#f3ebdc; --white:#fff;
  --ink:#2B1A16; --ink-soft:#5a463c; --ink-faint:#8a7466;
  --line:#e6dccb; --line-dk:rgba(233,185,73,.22);
  --radius:14px; --shadow:0 10px 30px rgba(43,26,22,.10);
  --serif:"Playfair Display",Georgia,serif; --sans:"Be Vietnam Pro",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:90px}
body{margin:0; font-family:var(--sans); font-size:16px; line-height:1.65; color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif); line-height:1.2; margin:0 0 12px; font-weight:700}
p{margin:0 0 14px}
.wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 20px}
.eyebrow{display:inline-block; font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-2)}
.dark .eyebrow{color:var(--gold)}
.ttl{font-size:clamp(28px,4vw,42px); margin-top:6px}
.lead{font-size:18px; color:var(--ink-soft); max-width:720px}
.dark .lead{color:#d9c8b4}
.center{text-align:center} .center .lead{margin-left:auto; margin-right:auto}
.gold-t{background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* nút */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:999px; font-weight:700; font-size:15px; text-decoration:none; border:0; cursor:pointer; font-family:var(--sans); transition:transform .15s, box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--gold-grad); color:var(--dark); box-shadow:0 6px 18px rgba(200,144,31,.35)}
.btn-line{background:transparent; color:var(--gold-soft); border:1.5px solid var(--gold)}
.btn-plum{background:var(--plum); color:#fff}
.btn svg{width:18px; height:18px}

/* topbar + header */
.topbar{background:var(--dark); color:#cdb9a3; font-size:13.5px}
.topbar .wrap{display:flex; justify-content:space-between; gap:12px; padding-top:7px; padding-bottom:7px; flex-wrap:wrap}
.topbar a{color:var(--gold); text-decoration:none; font-weight:700}
.hd{position:sticky; top:0; z-index:50; background:rgba(27,18,16,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-dk)}
.hd .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:82px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img{height:70px; width:auto}
.brand b{display:block; font-family:var(--serif); font-weight:900; font-size:22px; color:#fff; letter-spacing:.5px; line-height:1}
.brand small{display:block; font-size:10.5px; letter-spacing:.28em; color:var(--gold); font-weight:700; margin-top:4px}
.menu{display:flex; gap:22px; list-style:none; margin:0; padding:0; align-items:center}
.menu a{color:#e8d9c6; text-decoration:none; font-weight:600; font-size:15px; white-space:nowrap}
.menu a:hover{color:var(--gold)}
.menu .btn{padding:10px 18px; color:var(--dark)}
.hamb{display:none; background:none; border:1px solid var(--line-dk); color:var(--gold); font-size:22px; border-radius:10px; width:44px; height:40px; cursor:pointer}

/* hero */
.hero{position:relative; background:var(--dark); color:#fff; overflow:hidden}
.hero-bg{position:absolute; inset:0; background:url(images/minh-hoa-1.jpg) center/cover; opacity:.28}
.hero::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 20% 30%,rgba(92,15,35,.55),transparent 60%),linear-gradient(180deg,rgba(27,18,16,.3),rgba(27,18,16,.92))}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:center; padding-top:80px; padding-bottom:84px}
.hero h1{font-size:clamp(36px,5.6vw,64px); font-weight:900; margin:12px 0 16px}
.hero .slogan{font-family:var(--serif); font-style:italic; font-size:clamp(18px,2.2vw,23px); color:var(--gold-soft); margin-bottom:18px}
.hero p.sub{color:#dccbb6; font-size:17.5px; max-width:600px}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.hero-badge{justify-self:center; width:min(440px,100%); height:auto; filter:drop-shadow(0 18px 40px rgba(0,0,0,.55))}
.hero-cap{position:absolute; right:14px; bottom:10px; z-index:3; font-size:11.5px; color:rgba(255,255,255,.55)}

/* 3 lời hứa */
.hua{background:var(--dark-2); color:#fff; border-top:1px solid var(--line-dk)}
.hua .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.hua div{padding:26px 22px; border-right:1px solid var(--line-dk)}
.hua div:last-child{border-right:0}
.hua b{display:block; font-family:var(--serif); font-size:20px; color:var(--gold); margin-bottom:4px}
.hua span{color:#d9c8b4; font-size:15px}

/* khối */
.blk{padding:88px 0}
.blk.alt{background:var(--cream-2)}
.blk.dark{background:var(--dark); color:#fff}
.blk.dark h2,.blk.dark h3{color:#fff}

/* giới thiệu */
.gt{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.gt-img{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.gt-img img{width:100%; aspect-ratio:4/3; object-fit:cover}
.tag-mh{position:absolute; left:10px; bottom:10px; background:rgba(27,18,16,.75); color:#f3e6d2; font-size:12px; padding:3px 10px; border-radius:999px}
.gt blockquote{margin:18px 0 0; padding:14px 18px; border-left:4px solid var(--gold-2); background:var(--white); border-radius:0 10px 10px 0; font-family:var(--serif); font-style:italic; font-size:19px; color:var(--plum)}

/* công nghệ */
.cn-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:38px}
.cn{background:var(--dark-2); border:1px solid var(--line-dk); border-radius:var(--radius); padding:26px 22px}
.cn .so{font-family:var(--serif); font-size:40px; font-weight:900; line-height:1}
.cn h3{font-size:20px; margin:12px 0 10px}
.cn ul{list-style:none; margin:0; padding:0; color:#d9c8b4; font-size:15px}
.cn li{padding:4px 0 4px 18px; position:relative}
.cn li::before{content:"◆"; position:absolute; left:0; color:var(--gold-2); font-size:10px; top:9px}

/* 3 gói */
.goi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px; align-items:stretch}
.goi{position:relative; background:var(--white); border:1px solid var(--line); border-radius:18px; padding:30px 26px 26px; display:flex; flex-direction:column; box-shadow:var(--shadow)}
.goi.noi{background:var(--dark); color:#fff; border:2px solid var(--gold); transform:translateY(-8px)}
.goi .nhan{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--gold-grad); color:var(--dark); font-size:12px; font-weight:800; padding:4px 14px; border-radius:999px; white-space:nowrap; letter-spacing:.04em}
.goi .bh{display:inline-flex; align-items:baseline; gap:6px; font-size:12px; font-weight:800; letter-spacing:.12em; color:var(--plum-2)}
.goi.noi .bh{color:var(--gold)}
.goi .bh b{font-family:var(--serif); font-size:30px; letter-spacing:0}
.goi h3{font-size:30px; letter-spacing:.06em; margin:6px 0 4px; font-weight:900}
.goi .mt{font-size:14.5px; color:var(--ink-faint); min-height:46px}
.goi.noi .mt{color:#cdb9a3}
.goi .gia{font-family:var(--serif); font-size:36px; font-weight:900; color:var(--plum); margin:14px 0 2px}
.goi.noi .gia{color:var(--gold)}
.goi .gia small{font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink-faint)}
.goi .vd{font-size:14px; color:var(--ink-soft); padding-bottom:14px; border-bottom:1px dashed var(--line); margin-bottom:14px}
.goi.noi .vd{color:#d9c8b4; border-color:var(--line-dk)}
.goi .ke{font-size:14px; font-weight:700; color:var(--gold-2); margin-bottom:6px}
.goi ul{list-style:none; margin:0 0 18px; padding:0; font-size:15px; flex:1}
.goi li{padding:5px 0 5px 26px; position:relative}
.goi li::before{content:"✓"; position:absolute; left:0; top:5px; width:18px; height:18px; border-radius:50%; background:var(--cream-2); color:var(--plum-2); font-size:11px; font-weight:900; display:grid; place-items:center}
.goi.noi li::before{background:rgba(233,185,73,.18); color:var(--gold)}
.goi .btn{justify-content:center}
.ghichu{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:34px}
.ghichu > div{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px}
.ghichu h3{font-size:19px; color:var(--plum)}
.ghichu p, .ghichu li{font-size:15px; color:var(--ink-soft)}
.ghichu ul{margin:0; padding-left:20px}

/* công cụ tính giá */
.tg{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; margin-top:38px; align-items:start}
.tg-card{background:var(--white); border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:var(--shadow)}
.tg-card h3{font-size:20px; display:flex; align-items:center; gap:10px}
.tg-card h3 .b{width:30px; height:30px; border-radius:50%; background:var(--plum); color:var(--gold-soft); font-family:var(--sans); font-size:14px; display:grid; place-items:center; flex:none}
.kieu{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:6px 0 20px}
.kieu label{cursor:pointer}
.kieu input{position:absolute; opacity:0; pointer-events:none}
.kieu span{display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; border:1.5px solid var(--line); border-radius:12px; font-weight:700; font-size:14px; text-align:center; transition:.15s}
.kieu svg{width:46px; height:34px}
.kieu input:checked + span{border-color:var(--plum-2); background:#fbf1f2; color:var(--plum)}
.kieu input:focus-visible + span{outline:3px solid var(--gold)}
.canh{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.fld label{display:block; font-size:14px; font-weight:600; color:var(--ink-soft); margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%; font:inherit; font-size:16px; padding:11px 13px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none; border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(233,185,73,.25)}
.tong-md{margin-top:14px; padding:12px 16px; background:var(--cream); border-radius:10px; font-weight:700; color:var(--plum)}
.tong-md small{display:block; font-weight:500; color:var(--ink-faint); font-size:13px}
.chongoi{display:grid; gap:10px; margin-top:6px}
.chongoi label{cursor:pointer}
.chongoi input{position:absolute; opacity:0; pointer-events:none}
.chongoi span{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 16px; border:1.5px solid var(--line); border-radius:12px; font-weight:700}
.chongoi span em{font-style:normal; font-weight:600; color:var(--ink-faint); font-size:14px}
.chongoi input:checked + span{border-color:var(--plum-2); background:#fbf1f2; color:var(--plum)}
.chongoi input:focus-visible + span{outline:3px solid var(--gold)}

.kq{position:sticky; top:88px; background:var(--dark); color:#fff; border-radius:18px; padding:26px; border:1px solid var(--line-dk)}
.kq h3{color:#fff; font-size:20px}
.kq table{width:100%; border-collapse:collapse; font-size:15px; margin:6px 0 14px}
.kq td{padding:10px 0; border-bottom:1px solid var(--line-dk)}
.kq td:last-child{text-align:right; font-weight:700; color:var(--gold-soft); white-space:nowrap}
.kq tr.chon td{color:#fff}
.kq tr.chon td:last-child{color:var(--gold)}
.kq tr.chon td:first-child::before{content:"▸ "; color:var(--gold)}
.kq .tong{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:14px 16px; border-radius:12px; background:rgba(233,185,73,.1); border:1px solid var(--line-dk)}
.kq .tong b{font-family:var(--serif); font-size:30px; color:var(--gold)}
.kq .vat{font-size:13.5px; color:#cdb9a3; margin-top:8px}
.kq .mo{color:#cdb9a3; font-size:14.5px; margin:16px 0 10px}
.khoa{display:grid; gap:10px}
.khoa .fld label{color:#d9c8b4}
.khoa .fld input{background:#2b1d19; border-color:#4a342c; color:#fff}
.khoa .btn{justify-content:center; width:100%}
.khoa .tt{font-size:14px; min-height:20px}
.khoa .tt.loi{color:#ffb4a8}
.khoa .tt.ok{color:#bfe3b4}
.mo-roi .khoa, .mo-roi .mo{display:none}
.kq .sau{display:none; font-size:14.5px; color:#d9c8b4; margin-top:14px}
.mo-roi .sau{display:block}
.kq .sau a{color:var(--gold); font-weight:700}
.consent{display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:#a99282; line-height:1.5}
.consent input{margin-top:3px; accent-color:var(--gold-2)}

/* quy trình */
.qt{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:38px; counter-reset:b}
.qt li{list-style:none; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px 16px; position:relative}
.qt li::before{counter-increment:b; content:counter(b,decimal-leading-zero); font-family:var(--serif); font-weight:900; font-size:30px; color:var(--gold-2); display:block; margin-bottom:6px}
.qt b{display:block; font-size:16px; margin-bottom:6px; color:var(--plum)}
.qt span{font-size:14px; color:var(--ink-soft)}

/* ảnh */
.anh-grid{display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:14px; margin-top:34px}
.anh-grid figure{margin:0; position:relative; border-radius:var(--radius); overflow:hidden; background:var(--dark-2); min-height:200px}
.anh-grid figure:first-child{grid-row:1/3}
.anh-grid img{width:100%; height:100%; object-fit:cover}
.anh-note{margin-top:14px; font-size:14px; color:var(--ink-faint)}

/* hỏi đáp */
.hd-list{max-width:860px; margin:34px auto 0}
.hd-list details{background:var(--white); border:1px solid var(--line); border-radius:12px; margin-bottom:10px; padding:0 20px}
.hd-list summary{cursor:pointer; padding:17px 0; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:12px}
.hd-list summary::after{content:"+"; color:var(--gold-2); font-size:22px; line-height:1}
.hd-list details[open] summary::after{content:"−"}
.hd-list details p{color:var(--ink-soft); padding-bottom:16px; margin:0}

/* liên hệ */
.lh{display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:34px}
.lh-info{display:grid; gap:14px; align-content:start}
.lh-row{display:flex; gap:14px; align-items:flex-start; background:var(--dark-2); border:1px solid var(--line-dk); border-radius:12px; padding:16px 18px}
.lh-row svg{width:22px; height:22px; color:var(--gold); flex:none; margin-top:3px}
.lh-row b{display:block; color:#fff}
.lh-row span, .lh-row a{color:#d9c8b4; text-decoration:none}
.lh-row a.big{font-family:var(--serif); font-size:24px; color:var(--gold); font-weight:900}
.map{border:0; width:100%; height:260px; border-radius:12px; filter:grayscale(.3)}
.lh-form{background:var(--dark-2); border:1px solid var(--line-dk); border-radius:18px; padding:26px; display:grid; gap:12px}
.lh-form .fld label{color:#d9c8b4}
.lh-form .fld input,.lh-form .fld textarea{background:#241815; border-color:#4a342c; color:#fff}
.lh-form .btn{justify-content:center}
.lh-form .tt{font-size:14px; min-height:20px}
.lh-form .tt.loi{color:#ffb4a8} .lh-form .tt.ok{color:#bfe3b4}

/* footer */
.ft{background:#120c0a; color:#a99282; font-size:14.5px; padding:46px 0 26px}
.ft .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
.ft img{width:240px; height:auto; margin-bottom:12px}
.ft b{color:#fff; display:block; margin-bottom:8px}
.ft a{color:#d9c8b4; text-decoration:none}
.ft a:hover{color:var(--gold)}
.ft ul{list-style:none; margin:0; padding:0}
.ft li{padding:3px 0}
.ft .cp{grid-column:1/-1; border-top:1px solid #2b1d19; padding-top:18px; font-size:13px; text-align:center}

/* nút nổi */
.noi-btn{position:fixed; right:16px; bottom:18px; z-index:60; display:flex; flex-direction:column; gap:10px}
.noi-btn a{width:54px; height:54px; border-radius:50%; display:grid; place-items:center; box-shadow:0 8px 20px rgba(0,0,0,.3); text-decoration:none; font-weight:800; font-size:13px}
.noi-btn .z{background:#0068ff; color:#fff}
.noi-btn .p{background:var(--gold-grad); color:var(--dark)}
.noi-btn svg{width:24px; height:24px}

/* điện thoại */
@media (max-width:980px){
  .hero .wrap,.gt,.tg,.lh{grid-template-columns:1fr}
  .hero-badge{display:none}
  .cn-grid{grid-template-columns:repeat(2,1fr)}
  .goi-grid{grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto}
  .goi.noi{transform:none}
  .qt{grid-template-columns:repeat(3,1fr)}
  .kq{position:static}
  .ft .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .blk{padding:60px 0}
  .hua .wrap{grid-template-columns:1fr}
  .hua div{border-right:0; border-bottom:1px solid var(--line-dk); padding:18px 4px}
  .cn-grid,.ghichu{grid-template-columns:1fr}
  .qt{grid-template-columns:1fr 1fr}
  .kieu{grid-template-columns:repeat(2,1fr)}
  .anh-grid{grid-template-columns:1fr; grid-template-rows:auto}
  .anh-grid figure:first-child{grid-row:auto}
  .ft .wrap{grid-template-columns:1fr}
  .topbar .an{display:none}
}

/* phân phối phụ kiện */
#phukien{background:linear-gradient(180deg,#1b1210,#2a1714)}
.pk-top{display:grid; grid-template-columns:1fr auto; gap:36px; align-items:center}
.pk-ck{width:210px; height:210px; border-radius:50%; background:var(--gold-grad); color:var(--plum); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:0 0 0 8px rgba(233,185,73,.15),0 20px 40px rgba(0,0,0,.4)}
.pk-ck b{font-family:var(--serif); font-size:68px; font-weight:900; line-height:1}
.pk-ck span{font-weight:800; letter-spacing:.2em; font-size:14px}
.pk-ck small{font-size:12.5px; font-weight:600; color:#5c0f23; margin-top:6px; line-height:1.35}
.pk-hang{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:42px}
.pk-nhac{margin:38px 0 0; color:#d9c8b4; font-size:15.5px}
.pk-nhac b{color:var(--gold-soft)}
.pk-hang a{display:block; text-decoration:none; background:var(--dark-2); border:1px solid var(--line-dk); border-radius:var(--radius); padding:22px 14px; text-align:center; transition:.15s}
.pk-hang a:hover,.pk-hang a:focus-visible{border-color:var(--gold); transform:translateY(-2px); background:#33201b}
.pk-hang em{display:inline-block; margin-top:10px; font-style:normal; font-size:13px; font-weight:700; color:var(--dark); background:var(--gold-grad); padding:4px 12px; border-radius:999px}
.pk-hang b{display:block; font-family:var(--serif); font-size:22px; letter-spacing:.06em; color:var(--gold-soft)}
.pk-hang span{display:block; font-size:13.5px; color:#bfa995}
.pk-duoi{display:grid; grid-template-columns:.9fr 1.1fr; gap:24px; margin-top:28px; align-items:start}
.pk-tinh{background:var(--cream); color:var(--ink); border-radius:18px; padding:24px}
.blk.dark .pk-tinh h3{color:var(--plum); font-size:20px}
.pk-kq{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:14px; padding:12px 14px; background:var(--white); border:1px solid var(--line); border-radius:10px}
.pk-kq b{font-family:var(--serif); font-size:26px; color:var(--plum)}
.pk-kq.nho b{font-size:18px; color:#2f7a3a}
.pk-buoc{list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:p}
.pk-buoc li{position:relative; padding:18px 18px 18px 64px; background:var(--dark-2); border:1px solid var(--line-dk); border-radius:var(--radius)}
.pk-buoc li::before{counter-increment:p; content:counter(p); position:absolute; left:18px; top:18px; width:32px; height:32px; border-radius:50%; background:var(--gold-grad); color:var(--dark); font-weight:800; display:grid; place-items:center}
.pk-buoc b{display:block; color:#fff}
.pk-buoc span{font-size:14.5px; color:#d9c8b4}
@media (max-width:980px){ .pk-top,.pk-duoi{grid-template-columns:1fr} .pk-ck{justify-self:center} .pk-hang{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .pk-hang{grid-template-columns:1fr 1fr} .pk-ck{width:170px; height:170px} .pk-ck b{font-size:54px} }

/* các hệ tủ bếp khác */
.ht-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px}
.ht{cursor:pointer}
.ht input{position:absolute; opacity:0; pointer-events:none}
.ht span{display:flex; flex-direction:column; height:100%; background:var(--white); border:1.5px solid var(--line); border-radius:16px; padding:22px 20px; box-shadow:var(--shadow); transition:.15s}
.ht b{font-family:var(--serif); font-size:21px; color:var(--plum); margin-bottom:8px}
.ht small{font-size:14.5px; color:var(--ink-soft); flex:1}
.ht i{font-style:normal; margin-top:14px; font-size:13.5px; font-weight:700; color:var(--plum-2); align-self:flex-start; border:1.5px solid var(--plum-2); border-radius:999px; padding:4px 12px}
.ht input:checked + span{border-color:var(--plum-2); background:#fbf1f2}
.ht input:checked + span i{background:var(--plum-2); color:#fff}
.ht input:checked + span i{font-size:0}
.ht input:checked + span i::after{content:"✓ Đã chọn"; font-size:13.5px}
.ht input:focus-visible + span{outline:3px solid var(--gold)}
.ht-form{margin-top:22px; background:var(--dark); color:#fff; border-radius:18px; padding:26px; display:grid; gap:12px}
.blk .ht-form h3{color:#fff; font-size:21px}
.ht-o{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.ht-form .fld label{color:#d9c8b4}
.ht-form .fld input,.ht-form .fld textarea{background:#2b1d19; border-color:#4a342c; color:#fff}
.ht-form .btn{justify-content:center}
.ht-form .tt{font-size:14px; min-height:20px}
.ht-form .tt.loi{color:#ffb4a8} .ht-form .tt.ok{color:#bfe3b4}
@media (max-width:980px){ .ht-grid{grid-template-columns:1fr 1fr} }
@media (max-width:760px){ .ht-grid,.ht-o{grid-template-columns:1fr} }

@media (max-width:1100px){
  .menu{display:none; position:absolute; top:82px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--dark); border-bottom:1px solid var(--line-dk); padding:8px 16px 16px}
  .menu.mo{display:flex}
  .menu a{display:block; padding:12px 4px; border-bottom:1px solid #2b1d19}
  .menu .btn{margin-top:10px; justify-content:center}
  .hamb{display:block}
}

/* form đặt phụ kiện */
.pk-tinh{display:grid; gap:10px}
.pk-tinh .fld select{width:100%; font:inherit; font-size:16px; padding:11px 13px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink)}
.pk-tinh .pk-ck-o{font-family:var(--serif); font-weight:900; font-size:22px; color:var(--plum); background:var(--gold-soft); border-color:var(--gold-2); cursor:default}
.pk-tinh .btn{justify-content:center; margin-top:4px}
.pk-tinh .tt{font-size:14px; min-height:18px}
.pk-tinh .tt.loi{color:#b3261e} .pk-tinh .tt.ok{color:#2f7a3a}
.pk-ship{margin-top:4px; text-align:center; font-family:var(--serif); font-weight:900; font-size:clamp(22px,3vw,28px); letter-spacing:.04em; color:var(--plum); background:var(--gold-grad); border-radius:12px; padding:14px 10px}

/* kích thước tiêu chuẩn tủ trên / tủ dưới */
.kt-chuan{display:grid; grid-template-columns:320px 1fr; gap:26px; align-items:center; margin-top:22px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px}
.kt-chuan h3{font-size:20px; color:var(--plum)}
.kt-hinh svg{width:100%; height:auto; display:block}
.kt-bang{width:100%; border-collapse:collapse; font-size:15.5px; margin:6px 0 12px}
.kt-bang th{text-align:left; font-size:13px; color:var(--ink-faint); font-weight:700; padding:6px 10px; border-bottom:2px solid var(--line)}
.kt-bang td{padding:10px; border-bottom:1px solid var(--line); color:var(--ink)}
.kt-bang td:not(:first-child){font-family:var(--serif); font-weight:700; color:var(--plum); font-size:17px}
.kt-ghi{font-size:14.5px; color:var(--ink-soft); margin:0}
@media (max-width:760px){ .kt-chuan{grid-template-columns:1fr} .kt-hinh{max-width:320px; margin:0 auto} }

/* giỏ phụ kiện nhiều sản phẩm */
.pk-chon{display:grid; grid-template-columns:1fr 1.3fr 90px; gap:10px}
.pk-them{justify-content:center; width:100%}
.pk-gio{background:var(--white); border:1.5px dashed var(--gold-2); border-radius:12px; padding:12px 14px}
.pk-gio-dau{display:flex; justify-content:space-between; align-items:baseline; gap:10px; color:var(--plum)}
.pk-gio-dau span{font-size:13.5px; color:var(--ink-faint); font-weight:600}
.pk-gio ol{margin:8px 0 0; padding:0; list-style:none; counter-reset:sp}
.pk-gio li{display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:15px}
.pk-gio li::before{counter-increment:sp; content:counter(sp); width:24px; height:24px; flex:none; border-radius:50%; background:var(--plum); color:var(--gold-soft); font-size:12px; font-weight:800; display:grid; place-items:center}
.pk-gio li .h{font-weight:700; color:var(--plum)}
.pk-gio li .m{flex:1; color:var(--ink); word-break:break-all}
.pk-gio li .s{font-weight:700; white-space:nowrap}
.pk-gio li button{border:0; background:#f3e3e3; color:#8E1B2E; width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:16px; line-height:1; flex:none}
.pk-trong{margin:6px 0 0; font-size:14px; color:var(--ink-faint)}
.pk-gio.co .pk-trong{display:none}
@media (max-width:760px){ .pk-chon{grid-template-columns:1fr 90px} .pk-chon .fld:first-child{grid-column:1/-1} }

/* đảo bếp & tủ đặc biệt — báo giá theo bản vẽ */
.dac-biet{background:#fbf1f2; border:1.5px solid var(--plum-2); border-radius:12px; padding:14px 16px}
.dac-biet p{margin:0 0 10px; font-size:15px; color:var(--ink)}
.db-o{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.db-o label{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; font-weight:600}
.db-o input{accent-color:var(--plum-2); width:18px; height:18px}
.kq.ban-ve .tong b{font-size:20px; line-height:1.3; text-align:right}

/* 4 gói + quà tặng (14/10) */
.goi-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.goi{padding:28px 20px 22px}
.goi h3{font-size:26px}
.goi .gia{font-size:31px}
.goi.vip{background:linear-gradient(160deg,#5C0F23 0%,#2B1A16 70%); color:#fff; border:2px solid var(--gold); transform:translateY(-8px)}
.goi.vip .bh{color:var(--gold)}
.goi.vip .mt{color:#e3cdb7}
.goi.vip .gia{color:var(--gold)}
.goi.vip .vd{color:#e3cdb7; border-color:var(--line-dk)}
.goi.vip li::before{background:rgba(233,185,73,.2); color:var(--gold)}
.goi .qua{display:flex; gap:12px; align-items:center; margin:0 0 16px; padding:14px 14px; border-radius:14px; background:var(--gold-grad); color:var(--plum); box-shadow:0 8px 22px rgba(200,144,31,.35); position:relative; overflow:hidden}
.goi .qua::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%); transform:translateX(-100%); animation:qua-loe 3.2s ease-in-out infinite}
@keyframes qua-loe{60%,100%{transform:translateX(100%)}}
.goi .qua svg{width:34px; height:34px; flex:none; fill:none; stroke:var(--plum); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.goi .qua small{display:block; font-size:11.5px; font-weight:800; letter-spacing:.18em; color:var(--plum-2)}
.goi .qua b{display:block; font-family:var(--serif); font-size:19px; font-weight:900; line-height:1.2; color:var(--plum)}
.goi .qua span{display:block; font-size:13.5px; font-weight:800; color:#3a1a12}
@media (prefers-reduced-motion:reduce){ .goi .qua::after{animation:none} }
@media (max-width:1180px){ .goi-grid{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; margin-left:auto; margin-right:auto} .goi.noi,.goi.vip{transform:none} }
@media (max-width:760px){ .goi-grid{grid-template-columns:1fr; max-width:520px} }

/* ZENITH cũng là thẻ nổi bật (14/10): khối quà trên nền tối giữ nguyên vàng */
.goi.noi .ke{color:var(--gold)}

.ft .ft-luu{grid-column:1/-1; margin:0; font-size:12.5px; color:#8a7466}

.pk-trong b{color:var(--plum)}

/* 5 công nghệ lõi (14/10): 5 cột màn rộng, 3+2 màn vừa */
.cn-grid{grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px}
.cn{padding:24px 18px}
@media (max-width:1180px){ .cn-grid{grid-template-columns:repeat(6,1fr)} .cn{grid-column:span 2} .cn:nth-child(4){grid-column:2 / span 2} }
@media (max-width:760px){ .cn-grid{grid-template-columns:1fr} .cn,.cn:nth-child(4){grid-column:auto} }