/*
Theme Name: KRATEN
Theme URI: https://kraten.vn
Description: Theme WordPress cho KRATEN — thiết bị vệ sinh phòng tắm & nhà bếp. Dựng theo bộ thiết kế đã duyệt (Be Vietnam Pro / Oswald / JetBrains Mono, đen–đỏ–xám–trắng). Chuyển đổi qua Gọi/Zalo, không giỏ hàng.
Version: 2.4.2
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: kraten
*/

/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --ink:#161616; --red:#D91E24; --gray:#888780;
  --line:#D3D1C7; --bg:#FAFAF8; --white:#FFFFFF;
  --studio:#F4F2EC; --studio2:#E7E4DB;
  --maxw:1280px; --pad:40px;
  --f-body:'Be Vietnam Pro', system-ui, sans-serif;
  --f-label:'Oswald', sans-serif;
  --f-mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
a{color:var(--ink); text-decoration:none}
a:hover{color:var(--red)}
img{max-width:100%; display:block}
::selection{background:var(--red); color:#fff}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.eyebrow{font-family:var(--f-label); font-weight:500; font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray)}
.eyebrow--sm{font-size:13px; letter-spacing:.18em}
.mono{font-family:var(--f-mono)}
.red{color:var(--red)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Logo lockup: KRATEN + đường chéo đỏ trên chữ K */
.kr-logo{position:relative; display:inline-block; font-family:'Arial Black','Helvetica Neue',Helvetica,sans-serif; font-weight:900; letter-spacing:.01em; line-height:1; color:var(--ink)}
.kr-logo span{position:absolute; left:.45em; top:.40em; width:.60em; height:.17em; background:var(--red); transform:translate(-50%,-50%) rotate(-46deg)}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{position:sticky; top:0; z-index:50; border-bottom:2px solid var(--red);
  background:#161616}
.site-header .inner{position:relative; z-index:2; min-height:76px; display:flex; align-items:center; gap:32px; flex-wrap:nowrap}
.site-header .kr-logo{font-size:22px; color:#fff}
.site-header .kr-logo span{background:var(--red)}
.main-nav{display:flex; gap:26px; font-size:14px; font-weight:600; margin-left:auto; white-space:nowrap; align-items:center}
.main-nav a{color:#EDEBE6}
.main-nav a:hover{color:#fff}
.has-sub{position:relative}
.has-sub>a::after{content:"\25BE"; font-size:9px; margin-left:5px; opacity:.7}
.has-sub .sub{position:absolute; top:calc(100% + 14px); left:-14px; min-width:232px; background:#1c1c1c; border:1px solid #2c2c2a; border-top:2px solid var(--red); padding:8px; display:none; flex-direction:column; gap:2px; box-shadow:0 18px 40px rgba(0,0,0,.35)}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:flex}
.has-sub .sub a{color:#D9D7D1; font-weight:600; font-size:13.5px; padding:9px 12px}
.has-sub .sub a:hover{color:#fff; background:#262625}
.main-nav a.active{color:#fff; position:relative}
.main-nav>a.active::after,.has-sub.active>a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--red)}
.header-cta{display:flex; align-items:center; gap:16px; white-space:nowrap; flex-shrink:0}
.header-cta .hours{font-family:var(--f-label); font-weight:400; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#A9A7A0}
.header-cta .tel{font-size:18px; font-weight:800; color:#fff}
.btn-zalo-dark{background:var(--red); color:#fff; font-size:13px; font-weight:800; padding:12px 20px}
.btn-zalo-dark:hover{color:#fff; opacity:.9}
.nav-toggle{display:none}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{display:inline-block; font-weight:700; font-size:16px; padding:19px 30px; text-align:center; cursor:pointer; border:none}
.btn-red{background:var(--red); color:#fff}
.btn-red:hover{color:#fff; opacity:.92}
.btn-outline{border:1.5px solid var(--ink); color:var(--ink); padding:17.5px 28px; background:transparent}
.btn-outline:hover{background:var(--ink); color:#fff}
.btn-ghost{display:inline-flex; align-items:center; gap:10px; border:1.5px solid var(--ink); padding:13px 20px; font-size:15px; font-weight:700; white-space:nowrap; background:transparent}
.btn-ghost:hover{background:var(--ink); color:#fff}

/* =========================================================
   HERO (home)
   ========================================================= */
.hero{position:relative; background:#fff; border-bottom:1px solid var(--line); overflow:hidden}
.hero .grid{display:grid; grid-template-columns:38fr 62fr; align-items:center; min-height:640px; gap:0}
.hero .copy{position:relative; z-index:3; padding:80px 0}
.tag-pill{display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line); padding:8px 14px; font-family:var(--f-label); font-weight:500; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray); margin-bottom:28px}
.tag-pill .dot{width:6px; height:6px; background:var(--red)}
.hero h1{margin:0; font-size:45px; line-height:.98; font-weight:900; letter-spacing:-.03em}
.hero .lead{margin:26px 0 0; font-size:18px; line-height:1.55; color:var(--gray); max-width:380px}
.hero .actions{display:flex; gap:12px; margin-top:38px; flex-wrap:wrap}
.hero .promise{margin-top:46px; padding-top:24px; border-top:1px solid var(--line); display:flex; gap:36px; max-width:400px}
.hero .promise .k{font-size:13px; color:var(--gray); font-weight:500}
.hero .promise .v{font-size:15px; font-weight:700}
.hero .media{position:relative; height:640px; margin-right:-160px}
.hero .media .frame{position:absolute; inset:0; overflow:hidden; background:var(--studio2)}
.hero .media img{width:100%; height:100%; object-fit:cover; object-position:60% 50%}
.hero .spotlight{position:absolute; left:26px; bottom:26px; width:250px; background:var(--ink); color:#fff; padding:24px 26px; z-index:4}
.hero .spotlight .lbl{font-family:var(--f-label); font-weight:500; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray)}
.hero .spotlight .name{font-size:17px; font-weight:800; margin-top:8px; line-height:1.3}
.hero .spotlight .price{font-size:22px; font-weight:900; color:var(--red); margin-top:10px}

/* =========================================================
   STRENGTHS
   ========================================================= */
.strengths{padding-top:96px; padding-bottom:40px}
.strengths .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.strength{background:var(--bg); padding:38px 30px 44px}
.strength:hover{background:#fff}
.strength .no{width:34px; height:34px; border-radius:5px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:13px; font-weight:500}
.strength .t{font-size:20px; font-weight:800; margin-top:20px; line-height:1.25}
.strength .b{font-size:15px; color:var(--gray); line-height:1.6; margin-top:10px}

/* =========================================================
   SECTION HEADS
   ========================================================= */
.sec{padding-top:64px}
.sec--tight{padding-top:96px}
.sec--filter{padding-top:36px}
.sec--grid{padding-top:28px}
.sec--article{padding-top:34px}
.pd-section{padding-top:26px}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:36px}
.sec-head h2{margin:12px 0 0; font-size:32px; font-weight:900; letter-spacing:-.02em; line-height:1}
.bignum{font-size:95px; font-weight:900; line-height:.78; letter-spacing:-.05em; color:var(--ink)}

/* =========================================================
   CATEGORY MOSAIC (home)
   ========================================================= */
.mosaic{display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:238px; gap:16px}
.cat-grid-voi{grid-column:5 / 13;grid-row:1}.cat-grid-sen{grid-column:1 / 5;grid-row:1 / 3}.cat-grid-boncau{grid-column:5 / 9;grid-row:2}.cat-grid-tu{grid-column:9 / 13;grid-row:2}.cat-grid-bontam{grid-column:1 / 6;grid-row:3}.cat-grid-lavabo{grid-column:6 / 9;grid-row:3}.cat-grid-bep{grid-column:9 / 13;grid-row:3}
.category-stat{display:flex;align-items:flex-end;gap:18px}.category-stat-note{font-size:15px;color:var(--gray);max-width:150px;line-height:1.4;padding-bottom:6px}
.cat{position:relative; overflow:hidden; display:block; background:var(--studio2)}
.cat:hover{box-shadow:0 0 0 2px var(--ink)}
.cat img{width:100%; height:100%; object-fit:cover}
.cat .tab{position:absolute; left:0; bottom:0; display:flex; align-items:baseline; gap:12px; background:#fff; padding:16px 24px}
.cat .tab .n{font-family:var(--f-label); font-weight:500; font-size:13px; color:var(--red)}
.cat .tab .name{font-size:21px; font-weight:800}
.cat--sm .tab{padding:14px 20px}
.cat--sm .tab .name{font-size:19px}

/* =========================================================
   PRODUCT CARD (grid)
   ========================================================= */
.prod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.prod-grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff; border:1px solid var(--line); display:flex; flex-direction:column}
.card:hover{border-color:var(--ink)}
.card .thumb{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--studio); border-bottom:1px solid var(--line)}
.card .thumb img{width:100%; height:100%; object-fit:contain; padding:7%; mix-blend-mode:multiply}
.card .thumb img.cover{object-fit:cover; padding:0; mix-blend-mode:normal}
.card .badge{position:absolute; left:0; top:14px; background:var(--red); color:#fff; font-size:11px; font-weight:800; letter-spacing:.1em; padding:6px 12px}
.card .badge--new{top:44px; background:var(--ink)}
.card .type-tag{position:absolute; right:0; bottom:0; background:#fff; font-family:var(--f-label); font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); padding:7px 12px}
.card .body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.card .sku{font-family:var(--f-mono); font-size:11px; color:var(--gray); letter-spacing:.08em}
.card .name{font-size:18px; font-weight:800; margin-top:8px; line-height:1.3}
.card .spec{font-size:14px; color:var(--gray); margin-top:6px; line-height:1.5}
.card .price{font-size:24px; font-weight:900; color:var(--red); margin-top:16px}
.card .row{display:flex; gap:8px; margin-top:auto; padding-top:18px}
.card .row .detail{flex:1; text-align:center; background:var(--ink); color:#fff; font-size:14px; font-weight:700; padding:13px 0}
.card .row .detail:hover{color:#fff; opacity:.9}
.card .row .call{text-align:center; border:1.5px solid var(--line); font-size:14px; font-weight:700; padding:11.5px 16px}

/* =========================================================
   PAGE HERO (listing / about / contact)
   ========================================================= */
.page-hero{background:#fff; border-bottom:1px solid var(--line); overflow:hidden}
.breadcrumb{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--gray); padding-top:22px}
.breadcrumb--flush{padding-top:0}
.breadcrumb .cur{color:var(--ink); font-weight:600}
.list-hero{display:grid; grid-template-columns:38fr 62fr; gap:48px; align-items:end; padding:34px 0 0}
.list-hero .copy{padding-bottom:44px}
.list-hero h1{margin:0; font-size:45px; font-weight:900; letter-spacing:-.03em; line-height:.98}
.list-hero p{margin:20px 0 0; font-size:17px; color:var(--gray); line-height:1.6; max-width:400px}
.list-hero .count{display:flex; align-items:flex-end; gap:16px; margin-top:34px}
.list-hero .count .num{font-size:86px; font-weight:900; line-height:.76; letter-spacing:-.05em}
.list-hero .count .lbl{font-size:15px; color:var(--gray); max-width:130px; padding-bottom:12px; line-height:1.4}
.list-hero .media{position:relative; height:400px; margin-right:-160px; background:var(--studio2); overflow:hidden}
.list-hero .media img{width:100%; height:100%; object-fit:cover; object-position:62% 50%}

/* =========================================================
   FILTER / SORT BAR
   ========================================================= */
.filter-bar{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:20px}
.filter-btns{display:flex; gap:10px; flex-wrap:wrap}
.filter-btns button{font-family:var(--f-body); cursor:pointer; font-size:14px; font-weight:700; padding:11px 18px; border:1.5px solid var(--line); background:#fff; color:var(--ink)}
.filter-btns button.active{border-color:var(--ink); background:var(--ink); color:#fff}
.filter-right{display:flex; align-items:center; gap:14px}
.filter-right .count{font-family:var(--f-label); font-weight:400; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray)}
.filter-right select{font-family:var(--f-body); font-size:14px; font-weight:600; padding:11px 14px; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer}
.catalog-price-note{font-size:14px;color:var(--gray);margin:22px 0 0}
.empty-copy{font-size:17px;color:var(--gray)}
.section-row--catalog{margin-bottom:24px}.section-row--catalog h2{font-size:24px}.section-row--featured{margin-bottom:32px}.section-row--featured h2{font-size:29px}
.other-groups-grid>.cat:nth-child(1){grid-column:1 / 5}.other-groups-grid>.cat:nth-child(2){grid-column:5 / 9}.other-groups-grid>.cat:nth-child(3){grid-column:9 / 13}
.header-contact-lines{display:flex;flex-direction:column;line-height:1.15}

/* =========================================================
   PRODUCT DETAIL
   ========================================================= */
.pd-top{display:grid; grid-template-columns:58fr 42fr; gap:56px; align-items:start}
.pd-main-img{position:relative; aspect-ratio:4/3; background:var(--studio); border:1px solid var(--line); overflow:hidden; margin-left:-100px}
.pd-main-img img{width:100%; height:100%; object-fit:contain; padding:6%; mix-blend-mode:multiply}
.pd-main-img .badge{position:absolute; left:100px; top:20px; white-space:nowrap; background:var(--red); color:#fff; font-size:11px; font-weight:800; letter-spacing:.1em; padding:7px 14px}
.pd-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px}
.pd-thumbs .thumb{aspect-ratio:1/1; background:var(--studio); border:1.5px solid var(--ink); overflow:hidden}
.pd-thumbs .thumb img{width:100%; height:100%; object-fit:contain; padding:10%; mix-blend-mode:multiply}
.pd-thumbs .empty{aspect-ratio:1/1; border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:11px; color:var(--gray)}
.pd-note{font-family:var(--f-label); font-weight:400; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); margin:14px 0 0}
.pd-info .group{font-family:var(--f-label); font-weight:500; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray)}
.pd-info h1{margin:14px 0 0; font-size:30px; font-weight:900; letter-spacing:-.025em; line-height:1.05}
.pd-info .sku{font-family:var(--f-mono); font-size:14px; color:var(--gray); letter-spacing:.08em; margin-top:12px}
.pd-info .price{font-size:40px; font-weight:900; color:var(--red); letter-spacing:-.03em; margin-top:22px; line-height:1}
.pd-info .price-note{font-size:14px; color:var(--gray); margin-top:8px}
.pd-actions{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
.pd-actions .call{flex:1; min-width:210px; text-align:center; background:var(--red); color:#fff; font-weight:800; font-size:17px; padding:20px 24px}
.pd-actions .call:hover{color:#fff; opacity:.92}
.pd-actions .zalo{flex:1; min-width:150px; text-align:center; border:1.5px solid var(--ink); font-weight:800; font-size:17px; padding:18.5px 24px}
.pd-actions .zalo:hover{background:var(--ink); color:#fff}
.pd-hint{font-size:14px; color:var(--gray); margin-top:12px}
.pd-block-label{font-family:var(--f-label); font-weight:500; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray)}
.pd-specs{margin-top:36px; border-top:1px solid var(--line)}
.pd-specs .pd-block-label{padding:22px 0 12px; display:block}
.pd-specs .row{display:grid; grid-template-columns:150px 1fr; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px}
.pd-specs .row .k{color:var(--gray)}
.pd-specs .row .v{font-weight:600}
.pd-features{margin-top:32px}
.pd-features .list{display:flex; flex-direction:column; gap:11px; margin-top:14px}
.dotted{display:grid; grid-template-columns:16px 1fr; gap:12px; align-items:start}
.dotted .d{width:7px; height:7px; background:var(--red); margin-top:8px}
.dotted span:last-child{font-size:16px; line-height:1.55}
.pd-warranty{margin-top:30px; background:var(--ink); color:#fff; padding:24px 26px}
.pd-warranty .v{font-size:18px; font-weight:800; margin-top:10px}
.pd-warranty .n{font-size:14px; color:var(--line); margin-top:6px; line-height:1.55}
.pd-desc{border-top:1px solid var(--line); padding-top:44px; display:grid; grid-template-columns:65fr 35fr; gap:56px; align-items:start}
.pd-desc h2{margin:14px 0 0; font-size:24px; font-weight:900; letter-spacing:-.02em; line-height:1.15; max-width:640px}
.pd-desc .paras{display:flex; flex-direction:column; gap:18px; margin-top:22px}
.pd-desc .paras p{margin:0; font-size:17px; line-height:1.7; color:var(--gray); max-width:660px}
.pd-suits{background:#fff; border:1px solid var(--line); padding:28px}
.pd-suits .list{display:flex; flex-direction:column; gap:12px; margin-top:16px}
.pd-suits .foot{border-top:1px solid var(--line); margin-top:22px; padding-top:18px; font-size:14px; color:var(--gray); line-height:1.6}

/* =========================================================
   CTA BAND (dark)
   ========================================================= */
.cta-band{background:var(--ink); color:#fff}
.cta-band .grid{padding:88px var(--pad); display:grid; grid-template-columns:58fr 42fr; gap:60px; align-items:center; max-width:var(--maxw); margin:0 auto}
.cta-band h2{margin:0; font-size:33px; font-weight:900; letter-spacing:-.02em; line-height:1.05}
.cta-band p{margin:18px 0 0; font-size:17px; color:var(--line); max-width:520px; line-height:1.6}
.cta-actions{display:flex; flex-direction:column; gap:12px}
.cta-actions .big{padding:22px 26px; display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:20px}
.cta-actions .big.red{background:var(--red); color:#fff}
.cta-actions .big.line{border:1.5px solid var(--gray); color:#fff}
.cta-actions .fine{font-family:var(--f-label); font-weight:400; font-size:13px; color:var(--gray); letter-spacing:.14em}

/* =========================================================
   ABOUT
   ========================================================= */
.about-hero{background:#fff; border-bottom:1px solid var(--line); margin-top:26px; overflow:hidden; padding:0 0 0}
/* Giữ gutter ngang của .wrap — dùng "0" ở đây sẽ đẩy hero lệch 40px so với phần còn lại của trang. */
.about-hero .inner{padding-top:70px; padding-bottom:70px}
.about-hero h1{margin:14px 0 0; font-size:40px; font-weight:900; letter-spacing:-.03em; line-height:1.02; max-width:680px}
.about-hero .lead{margin:24px 0 0; font-size:18px; color:var(--gray); line-height:1.65; max-width:620px}
.about-band{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:96px; overflow:hidden}
.two-col{display:grid; grid-template-columns:35fr 65fr; gap:64px; align-items:center}
.two-col .media{position:relative; height:520px}
.two-col .media .frame{position:absolute; inset:0; overflow:hidden; background:var(--studio); box-shadow:inset 0 0 0 1px var(--line)}
.two-col .media img{width:100%; height:100%; object-fit:contain; padding:10%; mix-blend-mode:multiply}
.two-col .body{padding:96px 0}
.value-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:36px}
.value{background:var(--bg); padding:34px 28px 40px}
.value:hover{background:#fff}
.value .no{font-family:var(--f-mono); font-size:13px; color:var(--red)}
.value .t{font-size:20px; font-weight:800; margin-top:14px; line-height:1.25}
.value .b{font-size:15px; color:var(--gray); line-height:1.6; margin-top:10px}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-hero{padding-top:34px}
.contact-hero h1{margin:0; font-size:42px; font-weight:900; letter-spacing:-.03em; line-height:1.02; max-width:640px}
.contact-quick{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:34px; max-width:640px}
.quick-card{border:1px solid var(--line); background:#fff; padding:26px 28px}
.quick-card .lbl{font-family:var(--f-label); font-weight:400; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray)}
.quick-card .val{font-size:26px; font-weight:900; margin-top:8px; color:var(--red)}
.quick-card.dark{background:var(--ink); color:#fff}
.quick-card.dark .val{color:#fff}
.contact-form-sec{display:grid; grid-template-columns:56fr 44fr; gap:56px; align-items:start}
.contact-form h2{margin:0; font-size:22px; font-weight:900; letter-spacing:-.02em}
.contact-form .sub{margin:12px 0 0; font-size:16px; color:var(--gray)}
.field{display:flex; flex-direction:column; gap:8px; margin-top:20px}
.field label{font-family:var(--f-label); font-weight:500; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray)}
.field input, .field select, .field textarea{font-family:var(--f-body); font-size:16px; padding:15px 16px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); width:100%}
.field textarea{resize:vertical}
.form-submit{margin-top:24px; width:100%; border:none; background:var(--red); color:#fff; font-weight:800; font-size:17px; padding:20px 24px; cursor:pointer}
.form-note{font-size:13px; color:var(--gray); margin-top:12px}
.form-alert{padding:16px 18px; font-size:15px; margin-bottom:18px}
.form-alert.ok{background:#0d3d17; color:#eafbea; border-left:4px solid #2ecc71}
.form-alert.err{background:#3d0d0d; color:#fbeaea; border-left:4px solid var(--red)}
.contact-aside .box{border:1px solid var(--line); background:#fff; padding:28px; margin-bottom:16px}
.contact-aside .lbl{font-family:var(--f-label); font-weight:500; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray)}
.contact-aside .big{font-size:22px; font-weight:900; color:var(--red); margin-top:10px}
.contact-aside .line{font-size:15px; color:var(--ink); margin-top:8px; line-height:1.55}
.map-wrap{margin-top:80px}
.map-frame{margin-top:24px; aspect-ratio:16/6; border:1px solid var(--line); background:repeating-linear-gradient(135deg,#F1EFE9 0 14px,#E7E4DB 14px 28px); display:flex; align-items:center; justify-content:center; text-align:center; color:var(--gray); font-family:var(--f-label); letter-spacing:.14em; text-transform:uppercase; font-size:13px}
.map-frame iframe{width:100%; height:100%; border:0; display:block}

/* =========================================================
   NEWS (Tin tức)
   ========================================================= */
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px}
.post-card{background:#fff; border:1px solid var(--line); display:flex; flex-direction:column}
.post-card:hover{border-color:var(--ink)}
.post-card .pthumb{aspect-ratio:16/10; overflow:hidden; background:var(--studio2)}
.post-card .pthumb img{width:100%; height:100%; object-fit:cover}
.post-card .pbody{padding:22px 24px 26px}
.post-card .pdate{font-family:var(--f-label); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray)}
.post-card h3{margin:10px 0 0; font-size:20px; font-weight:800; line-height:1.3}
.post-card .pex{font-size:15px; color:var(--gray); margin-top:10px; line-height:1.6}
.kr-article{max-width:760px; margin:0 auto}
.kr-article h1{font-size:32px; font-weight:900; letter-spacing:-.02em; line-height:1.1; margin:10px 0 0}
.kr-article .content{margin-top:28px; font-size:17px; line-height:1.75; color:#2a2a2a}
.kr-article .content p{margin:0 0 18px}
.kr-article .content h2{font-size:28px; font-weight:900; margin:36px 0 12px}
.kr-article .content img{margin:22px 0}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--bg); border-top:1px solid var(--line)}
.site-footer .cols{padding:64px var(--pad) 32px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; max-width:var(--maxw); margin:0 auto}
.site-footer .kr-logo{font-size:26px}
.site-footer .tagline{font-size:14px; color:var(--gray); line-height:1.6; margin:16px 0 0; max-width:280px}
.site-footer .col-title{font-family:var(--f-label); font-weight:500; font-size:12px; letter-spacing:.18em; color:var(--gray); text-transform:uppercase; min-height:1em}
.site-footer .links{display:flex; flex-direction:column; gap:9px; margin-top:16px; font-size:14px; font-weight:500}
.site-footer .links .tel{font-weight:800; color:var(--red)}
.site-footer .copyright{border-top:1px solid var(--line); padding:20px var(--pad) 40px; font-size:13px; color:var(--gray); max-width:var(--maxw); margin:0 auto}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .hero .grid,.two-col,.pd-top,.pd-desc,.contact-form-sec,.cta-band .grid,.list-hero{grid-template-columns:1fr}
  .hero .media,.list-hero .media{margin-right:0; height:420px}
  .two-col .media{height:360px; margin-left:0}
  .pd-main-img{margin-left:0}
  .pd-main-img .badge{left:16px}
  .strengths .grid,.value-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid,.prod-grid--4,.news-grid{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:35px}
  .bignum{font-size:69px}
  .mosaic{grid-auto-rows:180px}
}
@media (max-width:680px){
  :root{--pad:20px}
  .main-nav{display:none}
  .main-nav.open{display:flex; position:absolute; top:76px; left:0; right:0; flex-direction:column; background:#161616; padding:16px 20px 20px; border-bottom:2px solid var(--red); gap:2px; z-index:60}
  .main-nav.open a{color:#EDEBE6; padding:11px 4px; border-bottom:1px solid #262625}
  .main-nav.open .has-sub .sub{position:static; display:flex; border:0; box-shadow:none; padding:2px 0 6px 14px; background:transparent}
  .main-nav.open .has-sub .sub a{padding:8px 4px; font-size:13px}
  .nav-toggle{display:inline-flex; margin-left:auto; background:none; border:1.5px solid #4a4a48; color:#fff; padding:9px 12px; font-weight:700; cursor:pointer}
  .header-cta .hours{display:none}
  .prod-grid,.prod-grid--4,.strengths .grid,.value-grid,.contact-quick,.news-grid,.pd-specs .row{grid-template-columns:1fr}
  .hero h1{font-size:27px}
  .hero .copy,.list-hero .copy,.two-col .body,.about-hero .inner{padding:48px 0}
  .list-hero h1,.contact-hero h1,.about-hero h1,.pd-info .price{font-size:29px}
  .mosaic{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px}
  .mosaic .cat{grid-column:auto!important; grid-row:auto!important}
  .pd-info .price{font-size:32px}
  .cta-band h2,.sec-head h2{font-size:23px}
  .bignum{font-size:52px}
}


/* === Package 1: Tin tức + spacing + placeholder + typography === */
.news-head{margin-bottom:8px}
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px 26px; align-items:start}
@media(max-width:900px){ .news-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .news-grid{grid-template-columns:1fr} }
.post-card{border:1px solid var(--line); background:#fff; display:flex; flex-direction:column}
.post-card .pthumb{aspect-ratio:16/10; overflow:hidden; background:var(--studio); display:block}
.post-card .pthumb img{width:100%; height:100%; object-fit:cover}
.post-card .pbody{padding:20px 20px 24px}
.post-card .pdate{font-family:var(--f-label); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray)}
.post-card h3{margin:10px 0 0; font-size:19px; font-weight:800; line-height:1.28; letter-spacing:-.01em}
.post-card .pex{margin-top:10px; font-size:14.5px; line-height:1.6; color:var(--gray)}

/* Sản phẩm tương tự -> footer: chừa khoảng trống */
.pre-cta{padding-bottom:88px}
.cta-band{margin-top:64px}

/* Trang chi tiết tin tức: cột đọc căn giữa khai báo 1 lần ở trên (.kr-article) — đừng lặp lại ở đây. */
.news-more{border-top:1px solid var(--line); margin-top:56px; padding-top:40px}

/* Chống rớt chữ: giữ cụm không vỡ + cân dòng tiêu đề */
h1,h2,h3{text-wrap:balance}
.btn,.btn-red,.btn-outline,.pd-actions a,.quick-card .val,.header-cta .tel,.card .price,.pd-info .price{white-space:nowrap}
.card .name{text-wrap:balance}


/* === P2/P3/P5 bổ sung === */
.media--overlap{margin-left:-100px}
@media(max-width:1024px){ .media--overlap{margin-left:0} .btn-zalo-dark{padding:11px 16px} }
@media(max-width:680px){ .btn-zalo-dark{display:none} .header-cta{gap:10px} }
.lead-stat{display:flex; align-items:flex-end; gap:16px; margin-top:26px}
.lead-stat .n{font-size:64px; font-weight:900; line-height:.9; letter-spacing:-.03em; color:var(--red)}
.lead-stat .t{font-size:14px; color:var(--gray); max-width:190px; line-height:1.4; padding-bottom:6px}
.gt-values{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){ .gt-values{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .gt-values{grid-template-columns:1fr} }

/* === Motion: fade-in-up (an toàn khi JS tắt / reduce-motion) === */
@media (prefers-reduced-motion: no-preference){
  html.kr-anim [data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform}
  html.kr-anim [data-reveal].is-in{opacity:1; transform:none}
}


/* ============ FIX RESPONSIVE (điều tra lại) ============ */
@media (max-width:1024px){
  .hero .grid{min-height:auto}
  .site-footer .cols{grid-template-columns:1fr 1fr; gap:34px 28px}
  .site-footer .cols > :first-child{grid-column:1 / -1}
  .list-hero .count .num{font-size:64px}
}
@media (max-width:680px){
  .site-header .inner{min-height:64px; gap:12px}
  .header-cta{order:2; margin-left:auto; gap:8px}
  .header-cta .tel{font-size:16px}
  .nav-toggle{order:3; margin-left:8px}
  .main-nav.open{top:64px}
  .sec{padding-top:44px}
  .sec--tight{padding-top:52px}
  .about-band{margin-top:44px}
  .cta-band{margin-top:40px}
  .hero .media,.list-hero .media{height:300px; margin-right:0}
  .hero .promise{gap:24px; flex-wrap:wrap}
  .lead-stat .n{font-size:44px}
  .list-hero .count .num{font-size:52px}
  .map-frame{aspect-ratio:4/3}
  .contact-form-sec,.pd-desc,.pd-top{gap:30px}
  .cta-actions .big{font-size:16px; padding:18px 20px}
}
@media (max-width:560px){
  .site-footer .cols{grid-template-columns:1fr; gap:26px}
  .contact-quick{grid-template-columns:1fr}
}

/* === Polish pass: one baseline grid, robust controls, mobile behaviour === */
body{font-size:16px;line-height:1.625;overflow-x:hidden}
.wrap,.site-footer .cols,.site-footer .copyright{width:100%;max-width:var(--maxw)}
.mobile-call,.mobile-nav-actions,.sub-toggle{display:none}
.main-nav{position:absolute;left:50%;transform:translateX(-50%);margin:0}
.site-header .inner{justify-content:space-between}
.header-cta{margin-left:auto}
.has-sub>a::after{display:none}
.has-sub .sub{top:100%;padding-top:12px;border-top:2px solid var(--red)}
.has-sub::after{content:"";position:absolute;left:-16px;right:-16px;top:100%;height:14px}
.filter-bar{position:sticky;top:76px;background:var(--bg);z-index:20;padding-top:16px}
.filter-btns button{min-height:44px;border-radius:0}
.field input,.field select{min-height:52px}.field textarea{min-height:104px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.map-fallback{display:flex;min-height:100%;padding:32px;align-items:center;justify-content:center;flex-direction:column;gap:12px;font-family:var(--f-body);letter-spacing:0;text-transform:none}.map-fallback strong{font-size:22px}.map-fallback span{color:var(--gray);max-width:440px}.map-fallback .btn{font-size:15px;padding:13px 20px}
.empty-state{border:1px solid var(--line);background:#fff;padding:48px;max-width:720px}.empty-state h2{font-size:32px;line-height:1.15;margin:12px 0}.empty-state p{color:var(--gray);max-width:520px;margin:0 0 24px}
.kr-article>div>img,.kr-article>.wp-post-image{width:100%;max-width:none}.kr-article .content{font-size:17px;line-height:1.72}.kr-article .content>p:first-child{font-size:19px;line-height:1.6;color:var(--text-secondary,#55534f)}
.card .name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}.card .spec{min-height:3em}.card .row .detail{min-height:48px;display:flex;align-items:center;justify-content:center}.card .row .call{display:none}
@media(max-width:900px){.main-nav{position:static;transform:none;margin-left:auto}.header-cta .hours{display:none}}
@media(max-width:680px){
  :root{--pad:16px}.site-header{position:sticky}.site-header .inner{min-height:64px}.site-header .kr-logo{font-size:20px}
  .header-cta{display:none}.mobile-call{display:inline-flex;color:#fff;border:1px solid #4a4a48;padding:9px 10px;font-size:13px;font-weight:800;margin-left:auto}.nav-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-left:0}
  body.kr-menu-open{overflow:hidden}.main-nav.open{position:fixed;top:64px;left:0;right:0;bottom:64px;transform:none;overflow-y:auto;padding:20px 16px;gap:0}.main-nav.open>a,.main-nav.open .has-sub>a{padding:15px 4px;font-size:16px}.main-nav.open .has-sub{display:grid;grid-template-columns:1fr 44px;align-items:center}.main-nav.open .sub-toggle{display:block;grid-column:2;grid-row:1;background:transparent;border:0;color:#fff;font-size:22px;min-height:44px}.main-nav.open .has-sub .sub{display:none;grid-column:1/-1;position:static;padding:0 0 8px 16px;border:0}.main-nav.open .has-sub.sub-open .sub{display:flex}.mobile-nav-actions.open{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:70;grid-template-columns:1fr 1fr}.mobile-nav-actions a{min-height:64px;display:flex;align-items:center;justify-content:center;background:var(--red);color:#fff;font-weight:800}.mobile-nav-actions a+ a{background:#fff;color:var(--ink)}
  .hero .grid{grid-template-columns:1fr}.hero .copy{padding:48px 0 32px}.hero h1{font-size:38px;line-height:1.02}.hero .lead{font-size:16px;margin-top:20px}.hero .media{height:360px;margin:0 -16px}.hero .spotlight{left:16px;bottom:16px;width:min(250px,calc(100% - 32px))}.hero .promise{margin-top:32px}.strengths{padding:48px 16px 0}.strength{padding:24px 18px}.strength .t{font-size:17px}.mosaic{gap:8px;grid-auto-rows:128px}.cat .tab,.cat--sm .tab{padding:9px 11px;gap:7px}.cat .tab .name,.cat--sm .tab .name{font-size:15px}.cat .tab .n{font-size:11px}.sec-head{margin-bottom:24px;gap:16px}.sec-head h2{font-size:26px}.bignum{font-size:54px}.prod-grid,.prod-grid--4{gap:12px}.card{display:grid;grid-template-columns:128px 1fr;min-height:150px}.card .thumb{grid-row:1/3;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}.card .thumb img{padding:8%}.card .body{padding:14px 14px 12px}.card .sku{font-size:10px}.card .name{font-size:15px;margin-top:4px;min-height:0}.card .spec{display:none}.card .price{font-size:18px;margin-top:6px}.card .row{padding-top:8px;margin-top:0}.card .row .detail{font-size:13px;min-height:38px}.card .badge{top:8px;font-size:9px;padding:4px 7px}.card .type-tag{display:none}
  .filter-bar{top:64px;align-items:flex-start}.filter-btns{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px}.filter-btns button{white-space:nowrap;padding:8px 13px;min-height:40px}.filter-right{width:100%;justify-content:space-between}.filter-right select{min-height:44px}.list-hero .media{height:300px;margin:0 -16px}.list-hero .copy{padding-bottom:32px}.list-hero h1{font-size:34px}.contact-hero{padding:28px 16px 0}.contact-hero h1,.about-hero h1{font-size:32px}.about-hero .inner{padding:40px 0}.two-col .body{padding:48px 0}.two-col .media{height:320px;margin:0 -16px}.map-wrap{margin-top:48px}.empty-state{padding:32px 24px}.empty-state h2{font-size:26px}.kr-article{max-width:100%}.kr-article h1{font-size:32px}.kr-article .content{font-size:16px;line-height:1.7}.kr-article .content>p:first-child{font-size:18px}.site-footer .links{font-size:14px}
}

/* =========================================================
   LÔ B — TIN TỨC & BÀI VIẾT
   ========================================================= */
.news-hero{background:#fff;border-bottom:1px solid var(--line);padding-bottom:56px}
.news-hero-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;padding-top:34px}
.news-hero-copy h1{font-size:44px;line-height:1.08;margin:14px 0 0}
.news-hero-copy>p{font-size:17px;line-height:1.65;color:var(--gray);margin:20px 0 0;max-width:480px}
.news-featured{display:grid;grid-template-columns:7fr 5fr;background:var(--ink);color:#fff;min-height:330px}
.news-featured .pthumb{overflow:hidden}.news-featured .pthumb img{width:100%;height:100%;object-fit:cover}
.news-featured .pbody{padding:30px;display:flex;flex-direction:column;justify-content:center}
.news-featured .pmeta,.post-card .pmeta{display:flex;gap:14px;align-items:center;font-family:var(--f-label);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-on-dark)}
.news-featured .pcat,.post-card .pcat{color:var(--red)}
.news-featured h2{font-size:24px;line-height:1.25;margin:14px 0 0}.news-featured h2 a{color:#fff}
.news-featured p{font-size:14px;line-height:1.65;color:var(--line);margin:12px 0 0}
.read-more{display:inline-flex;margin-top:18px;font-size:14px;font-weight:800;color:var(--red)}
.news-index{padding-top:48px}
.news-filters{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}
.news-filters a{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border:1.5px solid var(--line);background:#fff;font-size:14px;font-weight:700}
.news-filters a.active,.news-filters a:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.news-grid--three{margin-top:28px}
.post-card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.post-card .pbody{display:flex;flex-direction:column;flex:1}.post-card .read-more{margin-top:auto;padding-top:16px}
.post-card .pmeta{color:var(--gray)}

.article-breadcrumb{padding-top:22px}
.article-header{padding-top:38px}
.article-meta{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--f-label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.article-meta span:first-child{color:var(--red)}
.article-header h1{font-size:52px;line-height:1.08;max-width:980px;margin:16px 0 0}
.article-header>p{font-size:20px;line-height:1.6;color:var(--gray);max-width:820px;margin:22px 0 0}
.article-featured{margin-top:32px;max-width:960px}.article-featured img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.article-layout{padding-top:48px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px;align-items:start}
.article-main{grid-column:1/9;font-size:17px;line-height:1.75;max-width:760px}
.article-main p{margin:0 0 18px}.article-main h2{font-size:28px;line-height:1.2;margin:40px 0 14px}.article-main h3{font-size:22px;line-height:1.3;margin:28px 0 12px}.article-main img{max-width:960px;height:auto;margin:22px 0}.article-main figure{margin:24px 0}.article-main figcaption{font-size:13px;color:var(--gray);margin-top:8px}
.article-sidebar{grid-column:9/13;position:sticky;top:100px;display:flex;flex-direction:column;gap:16px}
.sidebar-box{background:#fff;border:1px solid var(--line);padding:26px}
.toc-box ol{padding-left:20px;margin:16px 0 0}.toc-box li+li{margin-top:10px}.toc-box a{font-size:14px;line-height:1.5}
.sidebar-cta{background:var(--studio)}.sidebar-cta h2{font-size:22px;margin:0}.sidebar-cta p{font-size:14px;line-height:1.6;color:var(--gray)}.sidebar-cta .btn{width:100%;min-height:50px;padding:14px}
.related-mini>a{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}.related-mini>a:last-child{border-bottom:0}.related-mini img{width:72px;height:72px;object-fit:contain;background:var(--studio)}.related-mini strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.4}.related-mini b{display:block;color:var(--red);font-size:15px;margin-top:6px}
.article-inline-cta{border:1px solid var(--line);border-left:4px solid var(--red);padding:20px 22px;margin:30px 0;background:#fff;display:grid;gap:8px}.article-inline-cta strong{font-size:18px}.article-inline-cta span{font-size:14px;color:var(--gray)}.article-inline-cta a{font-weight:800;color:var(--red)}
.article-more{padding-top:84px}.section-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}.section-row h2{font-size:30px;margin:0}

@media(max-width:1024px){
  .news-hero-grid{grid-template-columns:1fr}.article-header h1{font-size:44px}.article-layout{gap:28px}.article-main{grid-column:1/9}.article-sidebar{grid-column:9/13}
}
@media(max-width:680px){
  .news-hero{padding-bottom:36px}.news-hero-grid{padding-top:28px;gap:28px}.news-hero-copy h1{font-size:34px}.news-featured{grid-template-columns:1fr}.news-featured .pthumb{aspect-ratio:3/2}.news-featured .pbody{padding:24px}.news-index{padding-top:36px}.news-filters{flex-wrap:nowrap;overflow-x:auto}.news-grid--three{margin-top:22px}.post-card .pthumb{aspect-ratio:3/2}
  .article-header{padding-top:28px}.article-header h1{font-size:36px}.article-header>p{font-size:18px}.article-featured{margin:24px calc(-1 * var(--pad)) 0}.article-layout{display:flex;flex-direction:column;padding-top:36px}.article-main{max-width:100%;font-size:16px;line-height:1.7}.article-main h2{font-size:26px}.article-sidebar{position:static;width:100%;order:2}.article-more{padding-top:56px}.section-row h2{font-size:26px}
}

/* =========================================================
   LÔ B — DANH MỤC SẢN PHẨM
   ========================================================= */
.list-hero h1{font-size:62px}
.list-hero .count .num{font-size:120px}
.comparison-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:24px;background:var(--line);border:1px solid var(--line)}
.comparison-strip article{background:#fff;padding:22px 24px}
.comparison-strip h2{font-size:18px;line-height:1.25;margin:0}
.comparison-strip p{font-size:14px;line-height:1.6;color:var(--gray);margin:8px 0 0}
.other-groups-grid{grid-auto-rows:180px}
.prod-grid--list .card .type-tag{display:block}
.prod-grid--list .card .name{min-height:2.6em}

@media(max-width:1024px){
  .list-hero h1{font-size:48px}.list-hero .count .num{font-size:88px}
}
@media(max-width:680px){
  .list-hero h1{font-size:38px}.list-hero .count .num{font-size:64px}
  .comparison-strip{grid-template-columns:1fr;margin-top:18px}
  .comparison-strip article{padding:18px 20px}
  .prod-grid--list .card .spec{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;min-height:0;font-size:13px;margin-top:5px}
  .prod-grid--list .card .type-tag{display:block;top:auto;bottom:0;left:0;padding:4px 7px;font-size:10px}
  .prod-grid--list .card .name{min-height:0}
  .other-groups-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .other-groups-grid .cat{aspect-ratio:3/2}
}

/* =========================================================
   LÔ B — LIÊN HỆ
   ========================================================= */
.contact-page-hero{background:#fff;border-bottom:1px solid var(--line);padding-bottom:52px}
.contact-hero-grid{display:grid;grid-template-columns:62fr 38fr;gap:56px;align-items:end;padding-top:34px}
.contact-kicker{display:flex;gap:16px;align-items:center;margin-bottom:28px}
.contact-kicker .eyebrow{color:var(--ink)}
.contact-kicker .mono{font-size:12px;color:var(--gray)}
.contact-hero-copy h1{font-size:58px;line-height:1.02;letter-spacing:-.03em;margin:0;max-width:640px}
.contact-hero-copy>p{font-size:19px;line-height:1.6;color:var(--gray);max-width:560px;margin:22px 0 0}
.contact-response{display:flex;align-items:flex-end;gap:16px;padding-bottom:6px}
.contact-response .n{font-size:132px;font-weight:900;line-height:.76;letter-spacing:-.05em;color:var(--red)}
.contact-response .t{font-size:15px;color:var(--gray);max-width:130px;padding-bottom:14px;line-height:1.4}
.contact-quick--lot-b{max-width:1280px;margin-top:44px}
.contact-quick--lot-b .quick-card{min-height:136px;padding:34px 36px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.contact-quick--lot-b .lbl{display:block;color:inherit;opacity:.8}
.contact-quick--lot-b strong{display:block;font-size:28px;line-height:1.2;margin-top:10px}
.contact-quick--lot-b b{font-size:24px}
.quick-card--call{background:var(--red);border-color:var(--red);color:#fff}
.quick-card--call:hover{color:#fff;opacity:.94}
.quick-card--zalo{background:#fff;color:var(--ink)}

.contact-main{padding-top:88px}
.contact-form-sec--lot-b{grid-template-columns:58fr 42fr;gap:56px}
.contact-form-sec--lot-b .contact-form{background:#fff;border:1px solid var(--line);padding:40px}
.contact-form-sec--lot-b .contact-form h2{font-size:30px}
.contact-form-sec--lot-b .contact-form .sub{font-size:15px;line-height:1.6}
.contact-form-sec--lot-b .field{gap:8px;margin-top:22px}
.contact-form-sec--lot-b .field label{font-size:12px}
.contact-form-sec--lot-b .field input,.contact-form-sec--lot-b .field select{min-height:52px}
.contact-form-sec--lot-b .field textarea{min-height:120px}
.contact-form-sec--lot-b .form-submit{min-height:52px}
.kr-honeypot{position:absolute;left:-9999px}
.contact-aside--lot-b .box{padding:34px;margin-bottom:16px}
.contact-aside--lot-b .box--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.contact-aside--lot-b .box--dark .lbl{color:var(--gray-on-dark)}
.contact-lines{display:grid;grid-template-columns:120px 1fr;gap:0;margin-top:20px}
.contact-lines>*{margin:0;padding:16px 0;border-bottom:1px solid #3a3a38;font-size:15px;line-height:1.5}
.contact-lines span{color:var(--gray-on-dark)}
.contact-lines a,.contact-lines p{color:#fff;font-weight:700}
.contact-aside--lot-b .box--hours strong{display:block;font-size:34px;margin-top:14px}
.contact-aside--lot-b .box--hours p{font-size:15px;line-height:1.65;color:var(--gray);margin:10px 0 0}

.contact-showroom{padding-top:80px}
.showroom-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:22px}
.showroom-head h2{font-size:34px;margin:10px 0 0}
.showroom-head>p{font-size:15px;color:var(--gray);max-width:420px;text-align:right;margin:0;line-height:1.6}
.map-frame--lot-b{position:relative;height:420px;aspect-ratio:auto;margin-top:0}
.map-directions{position:absolute;right:18px;bottom:18px;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;background:var(--ink);color:#fff;font-size:15px;font-weight:800;letter-spacing:0;text-transform:none}
.map-directions:hover{color:#fff;background:var(--red)}
.contact-start{margin-top:80px;margin-bottom:80px;border:1px solid var(--line);padding-top:36px;padding-bottom:36px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.contact-start>div{max-width:620px}.contact-start h2{font-size:30px;margin:0}.contact-start p{font-size:16px;line-height:1.7;color:var(--gray);margin:12px 0 0}

@media(max-width:1024px){
  .contact-hero-grid{grid-template-columns:1fr}.contact-response{margin-top:30px}
  .contact-form-sec--lot-b{grid-template-columns:1fr}
}
@media(max-width:680px){
  .contact-page-hero{padding-bottom:32px}
  .contact-hero-grid{padding-top:28px;gap:0}
  .contact-kicker{margin-bottom:20px;flex-wrap:wrap}
  .contact-hero-copy h1{font-size:36px}
  .contact-hero-copy>p{font-size:17px;margin-top:18px}
  .contact-response{margin-top:22px;padding:10px 14px;background:var(--studio);display:block}
  .contact-response .n,.contact-response .t{display:inline;font-size:15px;line-height:1.5;color:var(--ink);padding:0;max-width:none}
  .contact-response .n::before{content:"Phản hồi trong khoảng ";font-weight:500}.contact-response .n::after{content:" phút"}.contact-response .t{display:none}
  .contact-quick--lot-b{grid-template-columns:1fr;margin-top:24px}
  .contact-quick--lot-b .quick-card{min-height:96px;padding:24px}
  .contact-quick--lot-b strong{font-size:22px}
  .contact-main{padding-top:56px}
  .contact-form-sec--lot-b .contact-form{padding:26px 20px}
  .contact-form-sec--lot-b .contact-form h2{font-size:26px}
  .contact-aside--lot-b .box{padding:24px}
  .contact-lines{grid-template-columns:92px 1fr}
  .contact-showroom{padding-top:56px}
  .showroom-head{display:block}.showroom-head h2{font-size:28px}.showroom-head>p{text-align:left;margin-top:12px}
  .map-frame--lot-b{height:auto;aspect-ratio:4/3}
  .contact-start{margin-top:56px;margin-bottom:56px;padding-top:26px;padding-bottom:26px;display:block}
  .contact-start h2{font-size:26px}.contact-start .btn{width:100%;margin-top:22px;min-height:52px}
}

/* =========================================================
   TYPOGRAPHY & A11Y REBALANCE  (v1.8.0)
   Đo bằng browser thật trước khi sửa — chỉ đụng chỗ lệch chuẩn:
   · H1 có line-height < font-size  -> các dòng dính nhau
   · text phụ 9–11px               -> dưới ngưỡng đọc được (min 12px)
   · #888780 trên nền #FAFAF8      -> ~3.3:1, trượt WCAG AA
   · vùng chạm mobile 40px         -> dưới 44px (WCAG 2.5.8)
   ========================================================= */
:root{
  /* Thang màu chữ theo audit — thay cho #888780 quá nhạt. #55534f/#FAFAF8 = 7.3:1 */
  --text-primary:#181818; --text-secondary:#55534f; --text-muted:#74716b;
  --gray:#55534f;          /* dùng cho chữ phụ trên NỀN SÁNG */
  --gray-on-dark:#A8A69E;  /* chữ phụ trên NỀN TỐI — giữ sáng để còn đọc được */
}

/* Chữ phụ nằm trên nền tối: không được dùng --gray đã tối đi ở trên */
.hero .spotlight .lbl,
.cta-actions .fine{color:var(--gray-on-dark)}
.cta-actions .big.line{border-color:var(--gray-on-dark)}

/* Tiêu đề: nới line-height để 2 dòng không chạm nhau */
.hero h1,.list-hero h1{line-height:1.06}
.about-hero h1,.contact-hero h1{line-height:1.06}

/* Text phụ tối thiểu 12px */
.card .sku{font-size:12px}
.cat .tab .n{font-size:12px}
.card .badge{font-size:11px; letter-spacing:.1em}

@media(max-width:680px){
  /* Ghi đè khối mobile ở trên: giữ cỡ chữ đọc được và vùng chạm ≥44px */
  .about-hero .inner{padding:40px var(--pad)}   /* giữ gutter, đừng về 0 */
  .card .sku{font-size:12px}
  .card .name{font-size:16px; line-height:1.375}
  .card .badge{font-size:11px}
  .cat .tab .n{font-size:12px}
  .filter-btns button{min-height:44px}
  .card .row .detail{min-height:44px}
}

/* =========================================================
   FILTER / SORT / PHÂN TRANG  (server-side, v1.8.0)
   Nút lọc giờ là <a> có href để trạng thái nằm trong URL
   -> dùng chung style với <button> cũ.
   ========================================================= */
.filter-btns a{display:inline-flex; align-items:center; font-family:var(--f-body); font-size:14px; font-weight:700;
  padding:11px 18px; min-height:44px; border:1.5px solid var(--line); background:#fff; color:var(--ink)}
.filter-btns a:hover{border-color:var(--ink); color:var(--ink)}
.filter-btns a.active{border-color:var(--ink); background:var(--ink); color:#fff}

.kr-search{display:flex; gap:0}
.kr-search input[type="search"]{font-family:var(--f-body); font-size:14px; padding:10px 14px; min-height:44px;
  border:1.5px solid var(--line); background:#fff; color:var(--ink); min-width:200px}
.kr-search input[type="search"]:focus{outline:none; border-color:var(--red)}
.kr-search button{font-family:var(--f-body); font-size:14px; font-weight:700; padding:10px 18px; min-height:44px;
  border:1.5px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer}
.kr-search button:hover{opacity:.9}

.kr-pagination{margin-top:40px}
.kr-pagination .nav-links{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.kr-pagination .page-numbers{display:inline-flex; align-items:center; justify-content:center;
  min-width:48px; min-height:48px; padding:0 14px; border:1.5px solid var(--line); background:#fff;
  font-size:15px; font-weight:700; color:var(--ink)}
.kr-pagination .page-numbers:hover{border-color:var(--ink)}
.kr-pagination .page-numbers.current{background:var(--ink); border-color:var(--ink); color:#fff}
.kr-pagination .page-numbers.dots{border-color:transparent; min-width:24px; padding:0}
.kr-pagination .screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

@media(max-width:680px){
  .filter-btns a{white-space:nowrap; padding:8px 13px; min-height:44px}
  .filter-right{width:100%; flex-wrap:wrap; gap:10px}
  .kr-search{width:100%}
  .kr-search input[type="search"]{flex:1; min-width:0}
}

/* =========================================================
   CARD MOBILE — giải pháp lai (quyết định #4)
   · Trang danh sách / nhóm  -> card NGANG (so giá nhanh, trang ngắn hơn)
   · Trang chủ "nổi bật" & "SP tương tự" -> giữ card DỌC ảnh lớn (chế độ ngắm)
   Khối mobile ở trên đang áp card ngang cho MỌI .card, nên trả lại dạng dọc
   cho các lưới không phải danh sách.
   ========================================================= */
@media(max-width:680px){
  .prod-grid:not(.prod-grid--list) .card{display:flex; flex-direction:column; min-height:0}
  .prod-grid:not(.prod-grid--list) .card .thumb{aspect-ratio:1/1; border-right:0; border-bottom:1px solid var(--line)}
  .prod-grid:not(.prod-grid--list) .card .thumb img{padding:10%}
  .prod-grid:not(.prod-grid--list) .card .body{padding:16px 16px 14px}
  .prod-grid:not(.prod-grid--list) .card .name{font-size:16px; margin-top:6px}
  .prod-grid:not(.prod-grid--list) .card .price{font-size:20px; margin-top:10px}
  .prod-grid:not(.prod-grid--list) .card .spec{display:-webkit-box}
  /* Lưới ngắm sản phẩm: 1 cột cho ảnh đủ lớn */
  .prod-grid:not(.prod-grid--list){grid-template-columns:1fr}
  .prod-grid--4{grid-template-columns:1fr}
}

/* =========================================================
   FOOTER — accordion mobile (v1.8.0)
   Desktop: <details open>, ẩn <summary> -> nhìn như 4 cột cũ.
   Mobile:  JS thu <details> lại, <summary> thành hàng bấm cao 48px.
   Khối thương hiệu + hotline + Zalo + địa chỉ LUÔN hiện.
   ========================================================= */
.site-footer .f-group{border:0}
.site-footer .f-group > summary{display:none}         /* desktop: không cần nút */
.site-footer .f-group > summary::-webkit-details-marker{display:none}
.site-footer .f-brand .f-quick{display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap}
.site-footer .f-brand .f-quick .tel{font-size:18px; font-weight:800; color:var(--red)}
.site-footer .f-brand .f-zalo{display:inline-flex; align-items:center; min-height:40px; padding:0 16px;
  border:1.5px solid var(--ink); font-size:14px; font-weight:700}
.site-footer .f-brand .f-zalo:hover{background:var(--ink); color:#fff}
.site-footer .f-addr{display:block; margin-top:14px; font-size:14px; line-height:1.6; color:var(--gray); max-width:280px}
.site-footer .f-addr:hover{color:var(--red)}

@media(max-width:680px){
  .site-footer .cols{padding-top:40px; gap:0}
  .site-footer .f-brand{padding-bottom:20px}
  .site-footer .f-group{border-top:1px solid var(--line)}
  .site-footer .f-group > summary{
    display:flex; align-items:center; justify-content:space-between;
    min-height:48px; cursor:pointer; list-style:none;
    font-family:var(--f-label); font-weight:500; font-size:13px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--ink)}
  .site-footer .f-group > summary::after{content:"+"; font-family:var(--f-body); font-size:20px; font-weight:400; color:var(--gray)}
  .site-footer .f-group[open] > summary::after{content:"\2212"}   /* − */
  .site-footer .f-group .links{margin-top:4px; padding-bottom:16px; gap:2px}
  .site-footer .f-group .links a{min-height:40px; display:flex; align-items:center}
  .site-footer .copyright{padding-top:16px; padding-bottom:28px}
}

/* =========================================================
   MÀN HÌNH RẤT HẸP (≤480px)
   .btn-ghost để white-space:nowrap nên ở 320px không co được
   -> tràn ngang ~32px ở trang chủ và trang chi tiết SP.
   ========================================================= */
@media(max-width:480px){
  .btn-ghost{white-space:normal; text-align:center; max-width:100%}
}

/* =========================================================
   LÔ A — TRANG CHỦ, DỰNG THEO _design-goc/Trang chu.export.dc.html
   ========================================================= */

/* --- A3. 4 LỢI ÍCH: đường kẻ chia phải luôn hiện ------------
   Công thức gốc (gap:1px + nền lưới) đúng về layout nhưng khi card
   rộng số lẻ (298.75px ở 1440) thì khe 1px bị nuốt lúc làm tròn về
   pixel thiết bị: đo pixel thấy mất đường 03|04 ở MỌI dpr và mất cả
   3 đường ở dpr 1.5. Giữ nguyên lưới gốc, vẽ thêm đường bằng
   pseudo-element neo vào mép card nên không bị nuốt. */
.strengths .grid{position:relative}
.strength{position:relative}
.strength + .strength::before{
  content:""; position:absolute; left:-1px; top:0; bottom:0; width:1px;
  background:var(--line); pointer-events:none}

/* --- A1. HERO ------------------------------------------------ */
.hero h1{font-size:62px; line-height:.98; letter-spacing:-.03em}
/* Bleed dứt khoát: -160px là đủ ở 1440 nhưng ở 1920/2560 ảnh dừng
   lửng giữa chừng và chừa dải trắng bên phải. Lấy giá trị lớn hơn
   giữa 160px và khoảng cách thực tới mép viewport. */
.hero .media{margin-right:calc(-1 * max(160px, (100vw - var(--maxw)) / 2 + var(--pad)))}

/* --- A4. DANH MỤC 7 NHÓM ------------------------------------- */
.sec-head h2{font-size:44px; line-height:1}
/* "53" phải thuộc cùng cụm thị giác với tiêu đề, không mồ côi bên phải */
.sec-head .bignum{font-size:95px; line-height:.78}
/* Nhãn nhóm: nền trắng đục để đọc rõ trên ảnh sáng */
.cat .tab{background:rgba(255,255,255,.94); backdrop-filter:saturate(1.2)}

/* --- A5. SẢN PHẨM NỔI BẬT ------------------------------------
   Gốc: badge ĐỎ, sát mép trái, top 14px. Thẻ đang hiện thực tế là
   .type-tag (xám, góc phải) nên đưa nó về đúng dạng badge của gốc. */
.card .type-tag{
  left:0; right:auto; top:14px; bottom:auto;
  background:var(--red); color:#fff;
  font-family:var(--f-body); font-weight:800; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; padding:6px 12px}
/* Nếu SP có cả BÁN CHẠY/MỚI thì xếp xuống dưới, không đè nhau */
.card .badge{top:14px}
.card .badge ~ .type-tag{top:44px}
.card .badge--new ~ .type-tag{top:74px}

/* --- A6. VỀ KRATEN ------------------------------------------- */
.about-band{margin-top:110px}
.two-col .media{margin-left:-120px}
.about-band h2{font-size:40px; line-height:1.08; max-width:620px}
.about-band .body p{font-size:17px; line-height:1.65; max-width:600px}
/* about-interior.jpg là ảnh KHÔNG GIAN, không phải sản phẩm nền trắng:
   contain + padding + multiply sẽ làm hỏng ảnh. */
.two-col .media img{object-fit:cover; padding:0; mix-blend-mode:normal}

/* --- A7. CTA BAND -------------------------------------------- */
.cta-band h2{font-size:46px; line-height:1.05; letter-spacing:-.02em}
.cta-band .sub{font-size:17px; line-height:1.6; max-width:520px; margin:18px 0 0; color:var(--line)}
.cta-actions .big{font-size:20px; font-weight:800; padding:22px 26px}
.cta-actions .big.line{padding:20.5px 26px}

/* --- A8. HEADER ---------------------------------------------- */
.site-header .kr-logo{font-size:27px}          /* ~126px bề ngang */
.header-cta .hours{font-size:12px}
.header-cta{gap:22px}

/* --- A2. HERO SLIDER (thay spotlight tĩnh) -------------------
   Giữ nguyên hình thức khối spotlight của design gốc
   (left:26 bottom:26, width:250, nền #161616, giá đỏ 22px),
   chỉ thêm cơ chế trượt + chấm điều hướng. */
.hero-slider{position:absolute; left:26px; bottom:26px; width:250px; z-index:4}
.hero-slider .hs-track{position:relative; background:var(--ink); color:#fff; overflow:hidden}
.hero-slider .hs-slide{
  display:block; padding:24px 26px; color:#fff; text-decoration:none;
  opacity:0; visibility:hidden; transition:opacity .45s ease}
.hero-slider .hs-slide:not(.is-active){position:absolute; inset:0}
.hero-slider .hs-slide.is-active{opacity:1; visibility:visible; position:relative}
.hero-slider .hs-slide:hover{color:#fff}
.hero-slider .hs-thumb{display:none}
.hero-slider .lbl{display:block; font-family:var(--f-label); font-weight:500; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gray-on-dark)}
.hero-slider .name{display:block; font-size:17px; font-weight:800; margin-top:8px; line-height:1.3}
.hero-slider .price{display:block; font-size:22px; font-weight:900; color:var(--red); margin-top:10px}
.hero-slider .hs-dots{display:flex; gap:6px; margin-top:10px}
.hero-slider .hs-dots button{
  width:22px; height:22px; padding:0; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.hero-slider .hs-dots button::before{content:""; width:16px; height:3px; background:rgba(255,255,255,.42); transition:background .2s}
.hero-slider .hs-dots button.is-active::before{background:var(--red)}
.hero-slider .hs-dots button:hover::before{background:rgba(255,255,255,.75)}
.about-band h2{margin:14px 0 0; font-weight:900; letter-spacing:-.02em}
.about-band .body p{color:var(--gray)}
.about-band .about-link{display:inline-block; margin-top:28px; font-weight:800; font-size:16px;
  border-bottom:2px solid var(--red); padding-bottom:4px}

/* --- A4 (tiếp). Cụm "53 mã sản phẩm" về sát tiêu đề ----------
   LƯU Ý: design gốc dùng justify-content:space-between (số nằm sát
   mép phải). Đây là chỗ CỐ Ý lệch gốc theo yêu cầu — đổi lại chỉ cần
   xoá khối này. */
#danh-muc .sec-head{justify-content:flex-start; gap:56px; align-items:flex-end}
#danh-muc .sec-head > div:last-child{gap:14px}

/* Tên SP trong slider hero: giới hạn 2 dòng để khối không cao vống lên
   khi tên sản phẩm dài (tên đã kèm mã + kích thước). */
.hero-slider .name{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
/* Spec 2 dòng, wrap tự nhiên thay vì cắt cụt giữa câu */
.card .spec{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:3em}

/* =========================================================
   LÔ A — PHẦN B: MOBILE (≤680px)
   Design gốc KHÔNG có media query nên phần này dựng theo token
   + tỷ lệ của gốc, không phải "thu nhỏ bản desktop".
   ========================================================= */
@media(max-width:680px){

  /* --- B1. HERO -----------------------------------------------
     Thứ tự đọc đúng: eyebrow → H1 → 1 câu → ẢNH → CTA → cam kết.
     display:contents cho .copy để các con trở thành ô của lưới hero
     rồi sắp bằng order — không phải đụng vào HTML. */
  .hero .grid{display:grid; grid-template-columns:1fr; padding-top:40px; padding-bottom:32px; min-height:0}
  .hero .copy{display:contents}
  .hero .tag-pill{order:1; margin-bottom:18px}
  .hero h1{order:2; font-size:36px; line-height:1.04}
  .hero .lead{order:3; font-size:16px; margin:16px 0 0; max-width:none}
  .hero .media{order:4; height:auto; margin:24px calc(-1 * var(--pad)) 0}
  .hero .media .frame{position:static; aspect-ratio:4/3}
  .hero .media img{aspect-ratio:4/3; object-fit:cover}
  .hero .actions{order:5; margin-top:24px; padding:0 0; flex-direction:column; gap:10px}
  .hero .actions .btn{width:100%; min-height:52px; display:flex; align-items:center; justify-content:center}
  .hero .promise{order:6; margin-top:28px; flex-direction:column; gap:14px; max-width:none}

  /* Slider xuống dưới ảnh, full-width, vuốt được */
  .hero-slider{position:static; width:auto; margin:0 var(--pad)}
  .hero-slider .hs-slide{padding:18px 20px}
  .hero-slider .hs-dots{justify-content:center}

  /* --- B2. 7 NHÓM: bỏ mosaic, về lưới 2 cột ảnh 4:3 ---------- */
  #danh-muc .sec-head{flex-direction:column; align-items:flex-start; gap:16px}
  .mosaic{grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; gap:10px}
  .mosaic .cat{grid-column:auto !important; grid-row:auto !important; aspect-ratio:4/3}
  .cat .tab,.cat--sm .tab{background:rgba(255,255,255,.96); padding:10px 12px; gap:8px; width:100%}
  .cat .tab .name,.cat--sm .tab .name{font-size:14px; font-weight:800}
  .bignum{font-size:64px}

  /* --- B3. SP NỔI BẬT: ảnh 1:1, siết padding -> ~2 card/màn --- */
  .prod-grid:not(.prod-grid--list) .card .thumb{aspect-ratio:1/1}
  .prod-grid:not(.prod-grid--list) .card .thumb img{padding:8%}
  .prod-grid:not(.prod-grid--list) .card .body{padding:14px 14px 16px}
  .prod-grid:not(.prod-grid--list) .card .price{font-size:19px; margin-top:8px}
  .prod-grid:not(.prod-grid--list) .card .row{padding-top:12px}

  /* --- B4. VỀ KRATEN: ảnh full-width 4:3, nằm TRÊN đoạn chữ ---
     margin-left:-120px của desktop nếu để nguyên sẽ đẩy ảnh ra
     ngoài màn hình -> trông như "ảnh biến mất". */
  .two-col{grid-template-columns:1fr; gap:0}
  .two-col .media{margin:0 calc(-1 * var(--pad)); height:auto; aspect-ratio:4/3; order:-1}
  .two-col .media .frame{position:static; height:100%}
  .about-band{margin-top:56px}
  .about-band h2{font-size:28px}
  .two-col .body{padding:28px 0 48px}

  /* --- B5. 4 LỢI ÍCH: 1 cột, giữ cảm giác card ---------------- */
  .strengths .grid{grid-template-columns:1fr}
  .strength{padding:24px 20px 26px}
  .strength + .strength::before{left:0; right:0; top:-1px; bottom:auto; width:auto; height:1px}

  /* --- B6. HEADER --------------------------------------------- */
  .site-header .kr-logo{font-size:22px}
  .nav-toggle{padding:0 14px}
  .mobile-call{padding:11px 12px}

  /* --- B7. CTA BAND ------------------------------------------- */
  .cta-band h2{font-size:30px}
  .cta-actions .big{font-size:17px; padding:18px 20px}
  .cta-actions .big.line{padding:16.5px 20px}
  .cta-actions .fine{font-size:12px; letter-spacing:.06em}

  /* --- B1. CTA cố định đáy ------------------------------------ */
  .kr-sticky-cta{
    display:grid; grid-template-columns:1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:45;
    border-top:1px solid var(--line); box-shadow:0 -6px 18px rgba(0,0,0,.10)}
  .kr-sticky-cta a{display:flex; align-items:center; justify-content:center; min-height:56px;
    font-size:15px; font-weight:800}
  .kr-sticky-cta .call{background:var(--red); color:#fff}
  .kr-sticky-cta .zalo{background:#fff; color:var(--ink)}
  /* Chừa chỗ để CTA không che nội dung cuối trang + không chồng lên drawer */
  body{padding-bottom:56px}
  body.kr-menu-open .kr-sticky-cta{display:none}
}
/* Desktop không hiện thanh CTA đáy.
   Phải dùng min-width chứ KHÔNG viết .kr-sticky-cta{display:none} trần ở đây:
   rule sau cùng cùng độ đặc hiệu sẽ đè mất display:grid trong khối mobile ở trên. */
@media(min-width:681px){
  .kr-sticky-cta{display:none}
}

/* --- Sửa hồi quy sau A8 --------------------------------------
   Logo 27px chỉ hợp khi menu nằm giữa (≥901px). Ở dải 681–900px
   menu chuyển sang dồn phải, cộng thêm logo to làm .header-cta
   tràn 29px. Giữ logo nhỏ trong dải đó. */
@media(max-width:900px){
  .site-header .kr-logo{font-size:22px}
  .site-header .inner{gap:20px}
  .header-cta{gap:14px}
}

/* Vùng chạm của chấm slider: giữ hình thức 16×3 nhưng mở rộng
   vùng bấm lên 44×44 bằng lớp phủ vô hình (không đổi layout). */
.hero-slider .hs-dots button{position:relative}
.hero-slider .hs-dots button::after{
  content:""; position:absolute; left:50%; top:50%; width:44px; height:44px;
  transform:translate(-50%,-50%)}
@media(max-width:680px){
  .hero-slider .hs-dots button{width:32px; height:44px}
  .about-hero .inner{padding-top:40px; padding-right:var(--pad); padding-bottom:40px; padding-left:var(--pad)}
  .contact-hero{padding-top:28px; padding-right:0; padding-left:0}
  .strengths{padding-top:48px; padding-right:var(--pad); padding-bottom:0; padding-left:var(--pad)}
}

/* =========================================================
   LÔ B — CHI TIẾT SẢN PHẨM
   ========================================================= */
.pd-gallery{min-width:0}
.pd-main-img{display:block;width:calc(100% + 100px);padding:0;cursor:zoom-in;text-align:left}
.pd-main-img .zoom-label{position:absolute;right:16px;bottom:16px;background:#fff;border:1px solid var(--line);padding:8px 12px;font-size:12px;font-weight:800}
.pd-thumbs .thumb{padding:0;cursor:pointer}.pd-thumbs .thumb.is-active{box-shadow:inset 0 0 0 2px var(--red)}
.pd-thumbs .empty{aspect-ratio:1/1;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:11px;color:var(--gray)}
.pd-info h1{font-size:42px}.pd-info .price{font-size:56px}
.pd-reassurance{display:grid;gap:10px;margin-top:24px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pd-reassurance span{font-size:14px;line-height:1.5;padding-left:22px;position:relative}.pd-reassurance span::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:900}
.pd-spec-accordion>summary{display:none}.pd-spec-accordion .pd-specs{margin-top:20px}
.pd-fit{border:1px solid var(--line);background:#fff;padding:34px 36px;display:flex;align-items:center;justify-content:space-between;gap:30px}.pd-fit h2{font-size:30px;margin:10px 0 0}.pd-fit p{font-size:16px;line-height:1.65;color:var(--gray);margin:10px 0 0}.pd-fit .btn{flex:none}
.pd-lightbox{width:min(1000px,calc(100vw - 40px));border:0;padding:48px;background:var(--studio)}.pd-lightbox::backdrop{background:rgba(0,0,0,.82)}.pd-lightbox img{width:100%;max-height:80vh;object-fit:contain;mix-blend-mode:multiply}.pd-lightbox button{position:absolute;right:12px;top:8px;width:44px;height:44px;border:0;background:var(--ink);color:#fff;font-size:28px;cursor:pointer}
.pd-bundle .section-row>span{font-size:14px;color:var(--gray)}.pd-bundle .section-row h2{margin:8px 0 0}
.bundle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.bundle-grid>a{display:grid;grid-template-columns:160px 1fr;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);padding:16px}.bundle-grid img{width:160px;height:120px;object-fit:contain;background:var(--studio);mix-blend-mode:multiply}.bundle-grid strong{font-size:17px;line-height:1.4}.bundle-grid b{display:block;font-size:22px;color:var(--red);margin-top:10px}
.pd-faq>h2{font-size:34px;margin:10px 0 24px}.pd-faq>div:last-child{border-top:1px solid var(--line)}.pd-faq details{border-bottom:1px solid var(--line)}.pd-faq summary{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:17px;font-weight:800;cursor:pointer;list-style:none}.pd-faq summary::-webkit-details-marker{display:none}.pd-faq summary span{font-size:22px}.pd-faq details[open] summary span{transform:rotate(45deg)}.pd-faq details p{font-size:15px;line-height:1.7;color:var(--gray);max-width:760px;margin:0 0 22px}
.pd-faq summary strong,.pd-spec-accordion>summary strong{min-width:0;font:inherit;overflow-wrap:anywhere}.pd-faq summary span,.pd-spec-accordion>summary span{flex:none}

@media(max-width:1024px){.pd-main-img{width:100%;margin-left:0}}
@media(max-width:680px){
  .pd-main-img{width:100%;margin-left:0}.pd-info h1{font-size:34px}.pd-info .price{font-size:40px}.pd-main-img .zoom-label{display:none}
  .pd-thumbs{gap:8px}.pd-spec-accordion{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:28px}.pd-spec-accordion>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;font-family:var(--f-label);font-size:13px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;list-style:none}.pd-spec-accordion>summary::-webkit-details-marker{display:none}.pd-spec-accordion[open]>summary span{transform:rotate(45deg)}.pd-spec-accordion .pd-specs{margin:0;border-top:0}.pd-specs .row{grid-template-columns:112px minmax(0,1fr)}
  .pd-fit{display:block;padding:26px 22px}.pd-fit h2{font-size:26px}.pd-fit .btn{width:100%;margin-top:20px;min-height:52px}
  .bundle-grid{grid-template-columns:1fr}.bundle-grid>a{grid-template-columns:104px minmax(0,1fr);gap:14px;padding:12px}.bundle-grid>a>span{min-width:0}.bundle-grid img{width:104px;height:92px}.bundle-grid strong{overflow-wrap:anywhere}.pd-bundle .section-row{display:block}.pd-bundle .section-row>span{display:block;margin-top:10px}
  .pd-lightbox{padding:40px 12px 12px}
  .kr-sticky-cta--product{grid-template-columns:minmax(90px,.8fr) 1fr 1fr}.kr-sticky-cta--product .sticky-price{display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-size:14px;font-weight:900}.kr-sticky-cta--product .call,.kr-sticky-cta--product .zalo{font-size:14px}.kr-sticky-cta--product.is-pending:not(.is-visible){display:none}
}

/* =========================================================
   LÔ B — GIỚI THIỆU
   ========================================================= */
.about-hero--lot-b{margin-top:26px}
.about-hero--lot-b>.breadcrumb{padding-top:0}
.about-hero-grid{display:grid;grid-template-columns:62fr 38fr;gap:56px;align-items:center;padding-top:34px}
.about-kicker{display:flex;align-items:center;gap:16px;margin-bottom:30px}
.about-kicker .eyebrow{color:var(--ink)}
.about-kicker .mono{font-size:12px;color:var(--gray)}
.about-hero--lot-b h1{font-size:56px;line-height:1.02;margin:0;max-width:680px}
.about-lead{font-size:21px;line-height:1.55;font-weight:600;margin:32px 0 0;max-width:680px}
.about-body{font-size:17px;line-height:1.7;color:var(--gray);margin:18px 0 0;max-width:680px}
.about-hero-media{height:520px;margin-right:-140px;background:var(--studio2);overflow:hidden}
.about-hero-media img{width:100%;height:100%;object-fit:cover;object-position:55% 50%}

.about-values{padding-top:80px}
.about-values-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:34px}
.about-values-head h2{font-size:44px;line-height:1;margin:12px 0 0}
.about-stat{display:flex;align-items:flex-end;gap:16px}
.about-stat .n{font-size:120px;font-weight:900;line-height:.76;letter-spacing:-.05em}
.about-stat .t{font-size:15px;color:var(--gray);max-width:140px;padding-bottom:12px;line-height:1.4}
.about-value-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.about-value{position:relative;background:var(--bg);padding:40px 36px 44px}
.about-value:nth-child(even)::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;background:var(--line)}
.about-value .no{width:34px;height:34px;border-radius:5px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:13px}
.about-value h3{font-size:24px;line-height:1.25;margin:20px 0 0}
.about-value p{font-size:16px;line-height:1.7;color:var(--gray);margin:12px 0 0;max-width:520px}

.about-material{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:96px;overflow:hidden}
.about-material-grid{display:grid;grid-template-columns:38fr 62fr;gap:56px;align-items:center}
.about-material-media{height:540px;margin-left:-140px;background:var(--studio);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.about-material-media img{width:100%;height:100%;object-fit:cover}
.about-material-copy{padding:64px 0}
.about-material-copy h2{font-size:40px;line-height:1.1;max-width:620px;margin:12px 0 0}
.material-list{display:flex;flex-direction:column;margin-top:28px;border-top:1px solid var(--line)}
.material-row{display:grid;grid-template-columns:210px 1fr;gap:28px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.material-row h3{font-size:19px;line-height:1.25;margin:0}
.material-row .mono{display:block;font-size:12px;color:var(--gray);margin-top:6px}
.material-row p{font-size:16px;color:var(--gray);line-height:1.7;max-width:560px;margin:0}

.about-sales{padding-top:80px}
.about-sales-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:end}
.about-sales-copy{grid-column:1/6}
.about-sales-copy h2{font-size:36px;line-height:1.12;margin:12px 0 0}
.about-sales-copy p{font-size:16px;line-height:1.7;color:var(--gray);margin:18px 0 0}
.about-sales-cards{grid-column:7/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.about-sales-cards article{background:var(--bg);padding:26px 22px 30px}
.about-sales-cards .eyebrow{font-size:13px;letter-spacing:.18em;color:var(--red)}
.about-sales-cards h3{font-size:18px;line-height:1.3;margin:14px 0 0}
.about-sales-cards p{font-size:14px;color:var(--gray);line-height:1.6;margin:8px 0 0}

@media(max-width:1024px){
  .about-hero-grid,.about-material-grid{grid-template-columns:1fr}
  .about-hero-media,.about-material-media{margin:0;height:auto;aspect-ratio:4/3}
  .about-sales-copy{grid-column:1/13}.about-sales-cards{grid-column:1/13}
}
@media(max-width:680px){
  .about-hero--lot-b{margin-top:0}
  .about-hero-grid{display:grid;grid-template-columns:1fr;gap:0;padding-top:28px}
  .about-hero-copy{display:contents}
  .about-kicker{order:1;margin-bottom:22px;flex-wrap:wrap}
  .about-hero--lot-b h1{order:2;font-size:36px;line-height:1.05}
  .about-lead{order:3;font-size:18px;line-height:1.55;margin-top:24px}
  .about-hero-media{order:4;margin:28px calc(-1 * var(--pad)) 0;aspect-ratio:4/3;height:auto}
  .about-body{order:5;font-size:16px;margin:24px 0 40px}
  .about-values{padding-top:56px}
  .about-values-head{display:block;margin-bottom:26px}
  .about-values-head h2{font-size:32px;line-height:1.08}
  .about-stat{margin-top:30px;display:block}
  .about-stat .n{display:block;font-size:88px}
  .about-stat .t{display:block;max-width:220px;padding:12px 0 0}
  .about-value-grid{grid-template-columns:1fr}
  .about-value{padding:26px 24px 28px}
  .about-value:nth-child(even)::before{left:0;right:0;top:-1px;bottom:auto;width:auto;height:1px}
  .about-material{margin-top:64px}
  .about-material-grid{gap:0}
  .about-material-media{margin:0 calc(-1 * var(--pad));aspect-ratio:4/3}
  .about-material-copy{padding:44px 0}
  .about-material-copy h2{font-size:30px}
  .material-row{grid-template-columns:1fr;gap:10px;padding:20px 0}
  .about-sales{padding-top:56px}
  .about-sales-grid{display:block}
  .about-sales-copy h2{font-size:30px}
  .about-sales-cards{grid-template-columns:1fr;margin-top:28px}
  .about-sales-cards article{padding:24px}
}

/* =========================================================
   LÔ B — HEADER/DRAWER & FOOTER MOBILE (ghi cuối để chốt cascade)
   ========================================================= */
.mobile-drawer{display:none}
@media(max-width:680px){
  .site-header .inner{height:64px;min-height:64px}
  .site-header .kr-logo{font-size:20px}
  .mobile-call{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--red);align-items:center;justify-content:center;font-size:21px;color:#fff}
  .nav-toggle{width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center}
  .nav-toggle>span{display:block;width:22px;height:2px;background:#fff}
  .main-nav{display:none!important}
  .mobile-drawer{display:block;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.4);visibility:hidden;pointer-events:none;transition:visibility 0s linear .25s}
  .mobile-drawer-panel{position:absolute;inset:0;background:var(--ink);color:#fff;transform:translateX(100%);transition:transform 250ms cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column;padding:0 20px}
  .mobile-drawer.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}.mobile-drawer.is-open .mobile-drawer-panel{transform:none}
  .mobile-drawer-head{height:64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #262625;flex:none}.mobile-drawer-head .kr-logo{color:#fff;font-size:22px}.drawer-close{width:44px;height:44px;border:0;background:transparent;color:#fff;font-size:34px;line-height:1;cursor:pointer}
  .mobile-drawer-nav{overflow-y:auto;padding-bottom:210px}.mobile-drawer-nav>a,.mobile-products>button{width:100%;min-height:61px;padding:0;display:flex;align-items:center;justify-content:space-between;border:0;border-bottom:1px solid #262625;background:transparent;color:#edebe6;font-family:var(--f-body);font-size:24px;font-weight:800;text-align:left}.mobile-products>button span{transition:transform .2s}.mobile-products.is-open>button span{transform:rotate(180deg)}
  .mobile-product-links{display:none;padding:4px 0 12px 16px}.mobile-products.is-open .mobile-product-links{display:block}.mobile-product-links a{min-height:44px;display:flex;align-items:center;color:#a9a7a0;font-size:16px;border-bottom:1px solid #262625}
  .mobile-drawer-foot{position:absolute;left:20px;right:20px;bottom:18px;background:var(--ink);display:grid;gap:9px}.mobile-drawer-foot a{height:52px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;color:#fff}.drawer-call{background:var(--red)}.drawer-zalo{border:1.5px solid #888780}.mobile-drawer-foot>span{font-family:var(--f-label);font-size:12px;letter-spacing:.12em;color:#888780;text-align:center}
  body.kr-menu-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
  .site-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;padding-top:40px}.site-footer .f-brand{grid-column:1/-1}.site-footer .f-group{min-width:0}.site-footer .f-group:last-child{grid-column:1/-1}.site-footer .f-group>summary{font-size:11px;letter-spacing:.12em}.site-footer .f-group .links a{font-size:13px}
}

/* =========================================================
   LÔ B.1 — HERO ĐỘNG + CÂN LẠI TRANG CHỦ
   ========================================================= */
.hero .hero-line{display:block}
.hero .hero-viet{font-size:1.28em;line-height:.88}
.hero .frame[data-hero-images]{background:#e8e4dc}
.hero-product-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s}
.hero-product-image.is-active{opacity:1;visibility:visible;transition-delay:0s}

@media(min-width:681px){
  .hero .grid{
    width:100%;max-width:none;margin:0;padding:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    min-height:680px;align-items:stretch}
  .hero .copy{
    position:relative;overflow:hidden;padding:72px 64px 64px max(40px,calc((100vw - 1280px)/2 + 40px));
    display:flex;flex-direction:column;justify-content:center}
  .hero .copy> :not(.hero-shape){position:relative;z-index:1}
  .hero h1{font-size:62px;line-height:.9;max-width:500px}
  .hero .lead{margin-top:28px;max-width:480px}
  .hero .actions{margin-top:34px}
  .hero .promise{margin-top:38px;max-width:500px}
  .hero .media{height:680px;margin:0}
  .hero-shape{
    position:absolute;z-index:0;right:-112px;top:104px;width:370px;height:370px;border-radius:50%;
    border:52px solid rgba(224,29,37,.055);box-shadow:0 0 0 1px rgba(224,29,37,.08)}
  .hero-shape::before,.hero-shape::after,.hero-shape>span{content:"";position:absolute;border-radius:50%}
  .hero-shape::before{width:108px;height:108px;left:-54px;top:80px;background:rgba(224,29,37,.045)}
  .hero-shape::after{width:18px;height:18px;left:24px;bottom:8px;background:rgba(224,29,37,.18)}
  .hero-shape>span{width:220px;height:220px;left:23px;top:23px;border:1px solid rgba(22,22,22,.07)}

  .about-band .two-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
  .about-band .two-col .media{margin-left:0;height:520px}
  .about-band .two-col .body{min-width:0}
}

@media(max-width:680px){
  .hero .grid{position:relative;padding:32px var(--pad) 30px}
  .hero .tag-pill{margin-bottom:22px}
  .hero h1{font-size:45px;line-height:.88;width:78%;z-index:2}
  .hero .hero-viet{font-size:1.42em;line-height:.9;margin-top:4px}
  .hero-shape{
    position:absolute;z-index:0;right:-42px;top:94px;width:210px;height:210px;border-radius:50%;
    border:30px solid rgba(224,29,37,.07);box-shadow:0 0 0 1px rgba(224,29,37,.1)}
  .hero-shape::before,.hero-shape::after,.hero-shape>span{content:"";position:absolute;border-radius:50%}
  .hero-shape::before{width:64px;height:64px;left:-32px;top:40px;background:rgba(224,29,37,.055)}
  .hero-shape::after{width:12px;height:12px;left:4px;bottom:5px;background:rgba(224,29,37,.22)}
  .hero-shape>span{width:118px;height:118px;left:16px;top:16px;border:1px solid rgba(22,22,22,.08)}
  .hero .lead{position:relative;z-index:1;margin-top:22px;max-width:300px}
  .hero .media{margin-top:28px}
  .hero .media .frame{position:relative;aspect-ratio:5/4}
  .hero .media img{aspect-ratio:auto}
  .hero-slider{margin:0 var(--pad)}
  .hero .actions{margin-top:26px}
  .hero .promise{margin-top:28px}
  .about-band .two-col .media{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad))}
}

.news-hero-copy>h1:first-child{margin-top:0}

/* =========================================================
   KRATEN MOTION SYSTEM — NHẸ, ĐỒNG NHẤT, ACCESSIBLE
   ========================================================= */
:root{
  --motion-fast:180ms;
  --motion-mid:420ms;
  --motion-slow:650ms;
  --motion-ease:cubic-bezier(.22,.61,.36,1);
  --motion-spring:cubic-bezier(.2,.8,.2,1)
}

@media(prefers-reduced-motion:no-preference){
  html.kr-motion [data-reveal]{
    opacity:0;
    transition-property:opacity,transform,translate;
    transition-duration:var(--motion-slow);
    transition-timing-function:var(--motion-ease);
    transition-delay:var(--reveal-delay,0ms);
    will-change:opacity,transform
  }
  html.kr-motion [data-reveal="up"]{transform:translate3d(0,22px,0)}
  html.kr-motion [data-reveal="left"]{transform:translate3d(-24px,0,0)}
  html.kr-motion [data-reveal="right"]{transform:translate3d(24px,0,0)}
  html.kr-motion [data-reveal="scale"]{transform:scale(.975)}
  html.kr-motion [data-reveal].is-in{opacity:1;transform:none;will-change:auto}

  html.kr-motion .site-header{animation:kr-header-in .55s var(--motion-ease) both}
  html.kr-motion .hero-shape{animation:kr-shape-float 9s ease-in-out 1s infinite alternate}
  html.kr-motion .kr-sticky-cta{animation:kr-sticky-in .45s var(--motion-ease) .25s both}
}

@keyframes kr-header-in{
  from{opacity:0;transform:translate3d(0,-18px,0)}
  to{opacity:1;transform:none}
}
@keyframes kr-shape-float{
  from{transform:translate3d(0,0,0) rotate(0deg)}
  to{transform:translate3d(-8px,10px,0) rotate(4deg)}
}
@keyframes kr-sticky-in{
  from{opacity:0;transform:translate3d(0,100%,0)}
  to{opacity:1;transform:none}
}

@view-transition{navigation:auto}
::view-transition-old(root){animation:kr-page-out .16s ease both}
::view-transition-new(root){animation:kr-page-in .34s var(--motion-ease) both}
@keyframes kr-page-out{to{opacity:0}}
@keyframes kr-page-in{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}

.kr-scroll-progress{
  position:fixed;z-index:9999;left:0;right:0;top:0;height:3px;pointer-events:none;
  background:var(--red);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 100ms linear;box-shadow:0 0 8px rgba(217,30,36,.28)
}
.site-header{
  transition:box-shadow var(--motion-mid) var(--motion-ease),background-color var(--motion-mid) ease}
.site-header.is-scrolled{background:#121212;box-shadow:0 10px 30px rgba(0,0,0,.18)}

.btn,.btn-ghost,.btn-zalo-dark,.pd-actions a,.cta-actions a,.news-filters a,.read-more,
.card,.post-card,.strength,.value,.quick-card,.cat,.about-value,.about-sales-cards article,.bundle-grid>a,
.pd-thumbs .thumb,.mobile-call,.nav-toggle{
  transition-property:color,background-color,border-color,box-shadow,opacity,translate;
  transition-duration:var(--motion-fast);
  transition-timing-function:var(--motion-ease)
}
.card .thumb img,.post-card .pthumb img,.cat img,.news-featured .pthumb img,.bundle-grid img,
.about-hero-media img,.about-material-media img,.two-col .media img{
  transition:transform 650ms var(--motion-ease)
}
.main-nav a,.site-footer a{transition:color var(--motion-fast) ease,opacity var(--motion-fast) ease}
.hero-slider .hs-dots button::before{transform-origin:left;transition:background var(--motion-fast) ease,transform var(--motion-mid) var(--motion-ease)}
.hero-slider .hs-dots button.is-active::before{transform:scaleX(1.25)}
.contact-form input,.contact-form textarea,.contact-form select{
  transition:border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,background-color var(--motion-fast) ease}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{
  outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(217,30,36,.10)}
.pd-faq summary span,.pd-spec-accordion>summary span{transition:transform var(--motion-mid) var(--motion-ease)}

@media(hover:hover) and (pointer:fine){
  .btn:hover,.btn-ghost:hover,.btn-zalo-dark:hover,.pd-actions a:hover,.cta-actions a:hover,.news-filters a:hover{
    translate:0 -2px;box-shadow:0 10px 24px rgba(22,22,22,.12)}
  .btn:active,.btn-ghost:active,.pd-actions a:active,.cta-actions a:active{translate:0 1px}
  .card:hover,.post-card:hover,.strength:hover,.value:hover,.quick-card:hover,.about-value:hover,
  .about-sales-cards article:hover,.bundle-grid>a:hover{
    translate:0 -6px;box-shadow:0 18px 38px rgba(22,22,22,.10)}
  .cat:hover{translate:0 -4px;box-shadow:0 14px 34px rgba(22,22,22,.14)}
  .card:hover .thumb img,.post-card:hover .pthumb img,.cat:hover img,.news-featured:hover .pthumb img,
  .bundle-grid>a:hover img,.about-hero-media:hover img,.about-material-media:hover img,.two-col .media:hover img{
    transform:scale(1.035)}
  .read-more:hover{translate:5px 0}
  .pd-thumbs .thumb:hover{translate:0 -3px;box-shadow:0 8px 18px rgba(22,22,22,.10)}
}

@media(max-width:680px){
  :root{--motion-mid:320ms;--motion-slow:500ms}
  .kr-scroll-progress{height:2px}
  .kr-sticky-cta--product.is-pending{display:grid;transition:opacity .32s var(--motion-ease),transform .32s var(--motion-ease),visibility 0s linear 0s}
  .kr-sticky-cta--product.is-pending:not(.is-visible){display:grid;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,105%,0);transition-delay:0s,0s,.32s}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important
  }
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  /* Heading hero: bỏ hẳn gradient, trả chữ về màu đặc thay vì để sheen đứng yên. */
  /* !important là bắt buộc: khối @supports ở cuối file có cùng độ ưu tiên
     nhưng đứng sau, nếu không ép thì text-fill vẫn trong suốt và chữ biến mất. */
  .hero .hero-line-ink{
    background-image:none!important;animation:none!important;
    -webkit-text-fill-color:currentColor!important}

  /* --- LÔ C — ticker danh mục -------------------------------------
     Quy tắc `*{animation-duration:.01ms}` ở trên KHÔNG đủ: nó chỉ chạy
     animation cho xong tức thì, nên track đứng lại ở translateX(-50%)
     — tức một dải bị cuộn dở, chữ cụt hai đầu. Phải tắt hẳn animation,
     xoá transform, rồi trải danh sách thành hàng tĩnh xuống dòng được.
     Bản sao (clone) bị ẩn để không hiện mỗi nhóm 2 lần. */
  .kr-ticker-track{
    animation:none!important; transform:none!important;
    width:100%!important; flex-wrap:wrap; justify-content:center;
    row-gap:2px}
  .kr-ticker-viewport{overflow:visible!important}
  .kr-ticker-item--clone{display:none!important}
  .kr-ticker-item:first-child::before{display:none}
}

/* =========================================================
   HERO REBALANCE 2.2 — TRỤC THƯƠNG HIỆU + TRUST TILES
   ========================================================= */
.hero .hero-line{white-space:nowrap}
.hero-axis{display:none}
.hero .promise{
  width:min(100%,560px);max-width:560px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;padding:1px;border:0;background:var(--line)}
.hero .promise-item{
  min-width:0;background:#fff;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;
  gap:12px;padding:14px 16px}
.hero .promise-mark{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(217,30,36,.08);color:var(--red);font-size:19px;font-weight:900}
.hero .promise-copy{min-width:0}
.hero .promise .k{font-size:12px;line-height:1.3}
.hero .promise .v{font-size:14px;line-height:1.35;margin-top:3px}

@media(min-width:1101px){
  .hero .copy{
    padding-left:clamp(104px,calc(64px + (100vw - 1280px)/4),220px);
    padding-right:clamp(48px,4.5vw,86px)}
  .hero h1{max-width:560px;font-size:clamp(62px,3.65vw,72px)}
  .hero .lead{max-width:520px}
  .hero .copy>.hero-axis{
    display:flex;position:absolute;z-index:2;left:clamp(28px,3.4vw,68px);top:50%;transform:translateY(-45%);
    flex-direction:column;align-items:center;gap:12px;color:var(--gray);pointer-events:none}
  .hero-axis>b{font-family:var(--f-mono);font-size:12px;color:var(--red);letter-spacing:.08em}
  .hero-axis>i{display:block;width:1px;height:82px;background:linear-gradient(to bottom,var(--red),rgba(217,30,36,.08))}
  .hero-axis>span{
    writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f-label);font-size:10px;
    letter-spacing:.22em;color:#aaa8a1}
}

@media(min-width:681px) and (max-width:1100px){
  .hero .copy{padding:56px 34px}
  .hero h1{max-width:100%;font-size:clamp(48px,5.4vw,58px)}
  .hero .lead{max-width:100%}
  .hero .promise-item{grid-template-columns:36px minmax(0,1fr);gap:9px;padding:12px 10px}
  .hero .promise-mark{width:34px;height:34px}
}

@media(max-width:680px){
  .hero .grid{padding-top:26px}
  .hero h1{
    width:100%;max-width:100%;font-size:clamp(56px,17.35vw,72px);line-height:.82;
    letter-spacing:-.055em}
  .hero .hero-viet{font-size:1.42em;line-height:.82;margin-top:8px}
  .hero-shape{
    right:-74px;top:102px;width:230px;height:230px;border-width:30px;
    border-color:rgba(224,29,37,.05);opacity:.72}
  .hero .lead{max-width:100%;font-size:16px;line-height:1.55;margin-top:28px}
  .hero .promise{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;padding:1px;
    width:100%;max-width:none;margin-top:24px;background:var(--line)}
  .hero .promise-item{
    display:grid;grid-template-columns:1fr;justify-items:center;align-content:center;gap:8px;
    min-height:116px;padding:14px 8px;text-align:center}
  .hero .promise-mark{width:38px;height:38px}
  .hero .promise-copy{text-align:center}
  .hero .promise .k{font-size:11px;line-height:1.3}
  .hero .promise .v{font-size:13px;line-height:1.3;margin-top:3px}
}

/* =========================================================
   CATEGORY HEADER 2.2.2 — NHỊP ĐỎ + SHAPE CHÌM + CROP ĐÚNG VÒI
   ========================================================= */
#danh-muc .sec-head{
  position:relative;isolation:isolate;overflow:hidden;min-height:148px;
  justify-content:space-between;align-items:center;gap:40px;margin-bottom:18px;padding:28px 34px;
  border:1px solid var(--line);border-left:4px solid var(--red);
  background:linear-gradient(115deg,#fff 0%,#fff 62%,#faf8f5 100%)}
#danh-muc .sec-head::before{
  content:"";position:absolute;z-index:-1;right:-58px;top:-82px;width:232px;height:232px;border-radius:50%;
  border:34px solid rgba(217,30,36,.045);box-shadow:0 0 0 1px rgba(217,30,36,.07)}
#danh-muc .sec-head::after{
  content:"";position:absolute;z-index:-1;right:60px;bottom:18px;width:13px;height:13px;border-radius:50%;
  background:rgba(217,30,36,.18)}
#danh-muc .sec-head>div{position:relative;z-index:1}
#danh-muc .sec-head>div:first-child{min-width:0}
#danh-muc .sec-head h2{
  margin-top:10px;max-width:650px;font-size:clamp(42px,3.9vw,56px);line-height:.94;letter-spacing:-.04em}
#danh-muc .category-title-number{color:var(--red)}
#danh-muc .eyebrow{display:flex;align-items:center;gap:9px}
#danh-muc .eyebrow::before{content:"";width:6px;height:6px;flex:none;background:var(--red)}
#danh-muc .category-stat{flex:none;margin-left:auto;padding-left:24px;border-left:1px solid var(--line)}
#danh-muc .category-stat-note{max-width:138px}

@media(max-width:680px){
  #danh-muc .sec-head{
    display:grid;grid-template-columns:minmax(0,1fr) 104px;align-items:end;gap:14px;
    min-height:154px;margin-bottom:12px;padding:22px 18px;border-left-width:3px}
  #danh-muc .sec-head::before{right:-88px;top:-66px;width:200px;height:200px;border-width:28px}
  #danh-muc .sec-head::after{right:76px;bottom:17px;width:10px;height:10px}
  #danh-muc .sec-head h2{max-width:190px;margin-top:8px;font-size:34px;line-height:.95;letter-spacing:-.035em}
  #danh-muc .eyebrow{font-size:11px;gap:7px}
  #danh-muc .eyebrow::before{width:5px;height:5px}
  #danh-muc .category-stat{display:block;width:auto;min-width:0;margin:0;padding-left:12px;border-left:1px solid var(--line)}
  #danh-muc .bignum{display:block;font-size:68px;line-height:.72}
  #danh-muc .category-stat-note{display:block;max-width:92px;padding:9px 0 0;font-size:11px;line-height:1.35}
  #danh-muc .mosaic{gap:12px 10px}
  #danh-muc .mosaic .cat{border:1px solid rgba(211,209,199,.7)}
  #danh-muc .cat-grid-voi img{object-position:80% 50%}
}

/* HERO MOBILE 2.2.3 — CARD SLIDER KHỚP TRỌN MÉP ẢNH */
@media(max-width:680px){
  .hero .hero-slider{width:auto;margin-left:0;margin-right:0}
  .hero .hero-slider .hs-slide{padding-left:var(--pad);padding-right:var(--pad)}
}

/* =========================================================
   HERO HEADING 2.2.4 — GLASS / TRÁNG GƯƠNG
   Dải sáng quét chậm qua H1, gốc màu lấy từ currentColor nên
   hai dòng đen theo --ink còn "Việt" tự theo .red, không hard-code.
   Chuyển động chỉ bật khi main.js gắn html.kr-motion, nên tự tắt
   khi reduce-motion hoặc khi JS không chạy.
   Đơn vị em: tự co theo mọi breakpoint, không cần media query riêng.
   ========================================================= */
.hero .hero-line-ink{
  display:inline-block;
  /* line-height của H1 là .82–.98, nhỏ hơn 1, nên dấu mũ/huyền/nặng
     của "Nâng", "tầm", "Việt" tràn ra ngoài line box. Nền chỉ được vẽ
     trong padding box, vì vậy phải nới hộp ra trước khi clip vào chữ,
     nếu không các dấu này sẽ mất. Margin âm bằng đúng padding nên
     chiều cao dòng và baseline không đổi. */
  padding:.28em .06em .22em;
  margin:-.28em -.06em -.22em}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero .hero-line-ink{
    background-image:linear-gradient(100deg,
      currentColor 0%,currentColor 40%,
      var(--sheen-mid,#4A4A48) 46%,
      var(--sheen-hot,#9A9892) 50%,
      var(--sheen-mid,#4A4A48) 54%,
      currentColor 60%,currentColor 100%);
    background-size:300% 100%;
    background-position:100% 0;
    background-repeat:no-repeat;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent}
  .hero .hero-viet .hero-line-ink{--sheen-mid:#F0575C;--sheen-hot:#FFD9DA}

  html.kr-motion .hero .hero-line-ink{
    animation:kr-hero-sheen 5.4s linear infinite}
  html.kr-motion .hero h1 .hero-line:nth-child(2) .hero-line-ink{animation-delay:.18s}
  html.kr-motion .hero h1 .hero-line:nth-child(3) .hero-line-ink{animation-delay:.36s}
  html.kr-motion .hero h1 .hero-line:nth-child(n+4) .hero-line-ink{animation-delay:.54s}
}

/* Quét hết trong ~62% chu kỳ rồi nghỉ, cho nhịp "bắt sáng" thay vì chạy liên tục. */
@keyframes kr-hero-sheen{
  0%{background-position:100% 0;animation-timing-function:cubic-bezier(.45,.05,.4,1)}
  62%{background-position:0 0}
  100%{background-position:0 0}
}


/* =========================================================
   LÔ C (09/08/2026) — DẢI CHẠY DANH MỤC (ticker)
   Yêu cầu khách 06/08/2026 09:07: đưa danh mục sản phẩm vào
   dải ngay dưới header ("khu vực kẻ tím").

   Nguyên tắc:
   · Chiều cao cố định bằng padding + line-height -> KHÔNG có layout shift
     (thuần HTML/CSS, không JS, không chờ font để tính chiều cao).
   · .kr-ticker overflow:hidden chặn track tràn ngang trên mobile.
   · Dừng khi hover / khi có focus bên trong -> link luôn bắt được.
   · Trạng thái reduce nằm trong khối @media(prefers-reduced-motion:reduce)
     có sẵn ở trên (mục "LÔ C — ticker"), không tạo khối mới.
   ========================================================= */
.kr-ticker{
  position:relative; width:100%; max-width:100%;
  background:var(--white); border-bottom:1px solid var(--line);
  overflow:hidden;
}
.kr-ticker-viewport{overflow:hidden}
.kr-ticker-track{
  display:flex; align-items:center; width:max-content;
  margin:0; padding:0; list-style:none;
  /* Tốc độ: đo trên trang thật — 1 lượt danh sách ≈ 797px ở desktop,
     ≈ 665px ở mobile. 19s/16s cho ra ~42px/s ở cả hai, đọc kịp mà không lờ đờ.
     (Bản đầu để 42s -> chỉ ~19px/s, nhìn như đứng yên.) */
  animation:kr-ticker-run var(--kr-ticker-dur,19s) linear infinite;
}
.kr-ticker-item{display:flex; align-items:center; flex:0 0 auto}
/* Dấu phân cách: chấm đỏ vuông — cùng ngôn ngữ với .tag-pill/.eyebrow */
.kr-ticker-item::before{
  content:""; flex:0 0 auto; width:5px; height:5px;
  background:var(--red); margin:0 22px;
}
.kr-ticker-item a{
  display:block; padding:9px 0;
  font-family:var(--f-label); font-weight:500; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; white-space:nowrap;
  transition:color .18s ease;
}
.kr-ticker-item a:hover{color:var(--red)}
.kr-ticker-item a:focus-visible{
  outline:2px solid var(--red); outline-offset:3px; color:var(--red);
}
/* Dừng để người dùng bắt kịp link đang chạy */
.kr-ticker:hover .kr-ticker-track,
.kr-ticker:focus-within .kr-ticker-track{animation-play-state:paused}

/* Quãng chạy = ĐÚNG BỀ RỘNG 1 BẢN danh sách, do JS đo rồi ghi vào
   --kr-ticker-shift. Không dùng -50% nữa: -50% chỉ đúng khi track có đúng
   2 bản, mà 2 bản chỉ đủ khi 1 bản RỘNG HƠN màn hình. Với 7 nhóm (~797px)
   thì ở 1440px cuối mỗi vòng hụt 44% bề ngang, ở 1920px hụt 58% rồi giật.
   JS nhân bản đủ số lượng theo viewport nên công thức này đúng ở mọi bề rộng
   và mọi số nhóm. Mặc định 50% để khi chưa có JS vẫn chạy như cũ. */
@keyframes kr-ticker-run{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--kr-ticker-shift, 50%)),0,0)}
}

@media(max-width:680px){
  .kr-ticker{--kr-ticker-dur:16s}
  .kr-ticker-item a{font-size:12px; letter-spacing:.12em; padding:8px 0}
  .kr-ticker-item::before{margin:0 16px}
}


/* =========================================================
   LÔ C (09/08/2026) — HERO USP · LƯỚI 3×2 · Ô GỘP · POLISH MOBILE
   Nguồn yêu cầu: Zalo [FLEXI x 1HOME] 06–07/08/2026.
   Chi tiết từng mục: deploy/FEEDBACK-KHACH-2026-08-06-07.md
   Khối này đặt CUỐI FILE để thắng các lớp @media(max-width:680px)
   trước đó (file có 5 lớp chồng nhau — xem cảnh báo trong tài liệu).
   ========================================================= */

/* --- C1. Dòng nhấn đỏ giờ là CỤM TỪ, không còn là 1 chữ "Việt" -------
   .hero-viet{font-size:1.42em} được canh cho đúng chữ "Việt". Với
   "Không Gian Sống" thì hệ số đó tràn khung. Trả về 1em và cho xuống dòng. */
.hero .hero-viet--phrase{font-size:1em; margin-top:0}
.hero .hero-viet--phrase .hero-line-ink{white-space:normal}
.hero .hero-line{white-space:normal}
.hero .lead--short{font-weight:600; letter-spacing:.01em}

/* --- C2. Khối 4 USP dưới hero (khách 07/08 11:11) ------------------- */
/* 2×2 ở MỌI bề rộng (LÔ E, 09/08/2026).
   Bản 4 cột hỏng trong khoảng 681–1024px: ở đó `.hero .copy` là display:contents
   nên khối này rơi vào cột trái hẹp (~260px) của .hero .grid, chia 4 còn 58–67px
   mỗi nhãn -> chữ gãy 3 dòng. 2 cột cho nhãn ~2 lần bề rộng, hết gãy, và hợp hơn
   với icon đã phóng to. */
.hero-usp{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 18px; margin:30px 0 0; padding:22px 0 0;
  border-top:1px solid var(--line); list-style:none;
  /* ⚠ BẮT BUỘC. Ở ≤1024px `.hero .copy` là display:contents nên các con
     trở thành grid item của `.hero .grid`, và thứ tự do `order` quyết định:
     tag-pill 1 · h1 2 · lead 3 · media 4 · actions 5 · promise 6.
     Không đặt order thì khối này mặc định 0 -> nhảy lên TRÊN cả eyebrow. */
  order:7;
}
.hero-usp-item{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
/* Icon phóng to: 42→52px khung, 24→30px hình.
   Ở 24px các nét mảnh dính vào nhau — bánh răng đọc thành dấu hoa thị, cờ đọc
   thành hình chữ nhật vô nghĩa. 30px là ngưỡng chi tiết còn sống. */
.hero-usp-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border:1px solid var(--line); border-radius:11px;
  color:var(--ink); background:var(--white); flex:0 0 auto;
}
.hero-usp-mark svg{width:30px; height:30px; display:block}
.hero-usp-label{
  font-size:13.5px; font-weight:700; line-height:1.35; color:var(--ink);
  letter-spacing:-.005em;
}

/* --- C3. Lưới danh mục 3×2 (khách 06/08 09:17) ---------------------
   ⚠ ĐẢO NGƯỢC bố cục mosaic bất đối xứng đã duyệt theo _design-goc/.
   Xem ghi chú dài trong front-page.php. */
.mosaic--3x2{
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:auto; gap:16px;
}
.mosaic--3x2 .cat{
  grid-column:auto!important; grid-row:auto!important;
  aspect-ratio:4/3;
}
.mosaic--3x2 .cat img{width:100%; height:100%; object-fit:cover; display:block}

/* --- C4. Ô gộp Lavabo / Bộ tủ lavabo (khách 06/08 09:13) ------------ */
.cat--combo{position:relative; overflow:visible}
.cat--combo > img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.cat-combo-toggle{
  position:absolute; left:0; bottom:0; z-index:2;
  display:flex; align-items:baseline; gap:12px;
  background:#fff; border:0; padding:16px 24px;
  font:inherit; text-align:left; cursor:pointer;
}
.cat-combo-toggle .n{font-family:var(--f-label); font-weight:500; font-size:13px; color:var(--red)}
.cat-combo-toggle .name{font-size:21px; font-weight:800; display:inline-flex; align-items:center; gap:9px}
.cat-combo-plus{
  width:9px; height:9px; flex:0 0 auto; position:relative; top:-1px;
  transition:transform .2s ease;
}
.cat-combo-plus::before,.cat-combo-plus::after{
  content:""; position:absolute; background:var(--red);
}
.cat-combo-plus::before{left:0; top:3.5px; width:9px; height:2px}
.cat-combo-plus::after{left:3.5px; top:0; width:2px; height:9px}
.cat--combo.is-open .cat-combo-plus{transform:rotate(45deg)}
.cat-combo-toggle:focus-visible{outline:2px solid var(--red); outline-offset:-2px}

.cat-combo-menu{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  background:var(--ink); display:flex; flex-direction:column;
}
.cat-combo-menu a{
  display:block; padding:15px 24px; color:#fff; text-decoration:none;
  font-size:16px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.1);
}
.cat-combo-menu a:last-child{border-bottom:0}
.cat-combo-menu a:hover,.cat-combo-menu a:focus-visible{background:var(--red); outline:0}
/* ⚠ BẮT BUỘC: `display:flex` ở trên ĐÈ luôn `display:none` mà thuộc tính
   [hidden] lấy từ UA stylesheet (khai báo của author luôn thắng UA).
   Không có dòng này thì menu mở toang ngay khi tải trang. */
.cat-combo-menu[hidden]{display:none}
/* Thoái lui khi không có JS: bàn phím vẫn mở được menu */
.cat--combo:focus-within .cat-combo-menu[hidden]{display:flex}

/* --- C5. Mobile ------------------------------------------------------ */
@media(max-width:680px){
  /* C5a. Logo header — khách 06/08 "Phần Logo Kraten hơi nhỏ".
     Giá trị đang thắng là 20px ở khối trước; đây là lớp cuối nên thắng. */
  .site-header .kr-logo{font-size:24px}

  /* C5b. Khối chữ hero — khách 06/08 "lớn quá, chiếm 2/4 màn hình".
     Rule đang thắng trước đó: clamp(56px,17.35vw,72px)/line-height .82.
     Ở 375px cho ~65px; dòng đỏ nhân 1.42 nữa thành ~92px. */
  .hero h1{font-size:clamp(32px,8.8vw,42px); line-height:.94; letter-spacing:-.03em}
  /* Eyebrow mới dài 37 ký tự (cũ 26) nên xuống 2 dòng ở 375px — giảm cỡ
     và giãn chữ để bớt 1 dòng, bù lại phần chiều cao khối USP thêm vào. */
  .hero .tag-pill{font-size:10.5px; letter-spacing:.1em; padding:9px 12px}
  .hero .hero-viet--phrase{font-size:1em; margin-top:2px}
  .hero .lead--short{font-size:15px; margin-top:16px}
  .hero .grid{padding-top:18px}
  .hero .copy{padding:28px 0 24px}

  /* C5c. 4 ô thế mạnh — khách 06/08 "cho ngắn lại 1 chút, đang bị rộng quá".
     Trên mobile chúng đang 1 cột full-width nên "rộng" = cao. Về 2×2. */
  .strengths{padding:36px 16px 0}
  .strengths .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strength{padding:16px 14px 18px}
  .strength .no{width:28px; height:28px; font-size:12px}
  .strength .t{font-size:15px; margin-top:12px; line-height:1.25}
  .strength .b{font-size:13px; line-height:1.5; margin-top:6px}

  /* C5d. USP 2×2 gọn (khung/hình phóng to ở LÔ E) */
  .hero-usp{gap:16px 14px; margin-top:22px; padding-top:18px}
  .hero-usp-mark{width:46px; height:46px; border-radius:10px}
  .hero-usp-mark svg{width:26px; height:26px}
  .hero-usp-label{font-size:12.5px; line-height:1.3}

  /* C5e. Lưới danh mục: 2 cột trên mobile (3 cột quá chật ở 375px) */
  .mosaic--3x2{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .cat-combo-toggle{padding:10px 12px; gap:8px}
  .cat-combo-toggle .name{font-size:14px; font-weight:800; gap:7px}
  .cat-combo-toggle .n{font-size:11px}
  .cat-combo-menu a{padding:12px 14px; font-size:14px}

  /* C5f. SẢN PHẨM NỔI BẬT — 2 cột.
     ⚠ ĐẢO NGƯỢC "quyết định #4" (xem chú thích quanh dòng 709 file này):
     bản trước CỐ Ý để 1 cột ảnh lớn ở trang chủ ("chế độ ngắm").
     Khách 06/08/2026 09:00 phản hồi ngược lại: "bị tách riêng lẻ ra…
     tạo cảm giác khó khăn khi tìm kiếm, hoặc ngại xem sản phẩm" và
     "Có thể để nhỏ như danh mục sản phẩm ntn đc k ạ. Nhìn n bao quát hơn".
     Đây là thay đổi theo yêu cầu khách, KHÔNG phải sửa lỗi.
     Trang danh sách/nhóm (.prod-grid--list) giữ nguyên card ngang. */
  .prod-grid:not(.prod-grid--list){grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .prod-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prod-grid:not(.prod-grid--list) .card .body{padding:10px 10px 12px}
  .prod-grid:not(.prod-grid--list) .card .name{font-size:13px; margin-top:4px; line-height:1.3}
  .prod-grid:not(.prod-grid--list) .card .price{font-size:15px; margin-top:6px}
  .prod-grid:not(.prod-grid--list) .card .sku{font-size:9px}
  .prod-grid:not(.prod-grid--list) .card .spec{display:none}
  .prod-grid:not(.prod-grid--list) .card .row{padding-top:8px}
  .prod-grid:not(.prod-grid--list) .card .row .detail{font-size:12px; min-height:34px}
}

@media(max-width:420px){
  .hero-usp-label{font-size:12px}
  .hero-usp-mark{width:42px; height:42px}
  .hero-usp-mark svg{width:24px; height:24px}
  .cat-combo-toggle .name{font-size:13px}
}

/* --- C6. Header ở dải 681–760px: siết khoảng cách để hết tràn ngang ------
   LỖI CÓ SẴN, không do lô C/D/E — phát hiện khi đo lại lô E.
   Nút "Nhắn Zalo" chỉ được ẩn ở ≤680px, nên trong dải 681–760px cụm
   logo + menu + hotline + nút Zalo rộng hơn khung: ở 681px trang bị đẩy
   ngang 75px, ở 700px là 56px (đo trên trang thật).
   Cách sửa giữ nguyên chức năng — không bỏ nút nào, chỉ siết khoảng cách. */
@media(min-width:681px) and (max-width:760px){
  .site-header .inner{gap:14px}
  .main-nav{gap:15px; font-size:13.5px}
  .header-cta{gap:10px}
  .header-cta .tel{font-size:15px}
  .btn-zalo-dark{padding:10px 11px; font-size:13px}
  .site-header .kr-logo{font-size:21px}
}


/* =========================================================
   LÔ F (09/08/2026) — KHÔI PHỤC MOSAIC 12 CỘT, 7 Ô
   Lần thứ ba khách đổi ý về khối này (xem front-page.php).

   KHÔNG PHẢI MASONRY THẬT. Đã tra `_design-goc/Trang chu.export.dc.html`:
   file thiết kế dùng `grid-template-columns:repeat(12,1fr)` với grid-column /
   grid-row đặt tay, KHÔNG có column-count / CSS columns ở bất kỳ đâu.
   Nghĩa là lưới CSS có ô kéo hàng, mép dưới THẲNG (3 hàng đầy đủ) — chứ không
   phải masonry chảy cột với mép dưới lởm chởm. Giữ đúng như thiết kế.

   Khác bản gốc đúng một chỗ: ô Bộ tủ lavabo (.cat-grid-tu) kéo xuống hàng 2-3
   để thành ô DỌC thứ hai, và hàng 3 chia lại 3+2+3 cho Bồn tắm/Lavabo/Nhà bếp.
   Bản gốc: tu ở hàng 2 (ngang), hàng 3 là 5+3+4.

   Vì sao Lavabo lấy ô hẹp nhất (2 cột): ảnh cat-lavabo.jpg là ảnh vuông 1:1
   nên cắt bớt bề ngang ít hại nhất. Bồn tắm (1.33) và Nhà bếp (1.33) là ảnh
   ngang, nhét vào ô 2 cột sẽ cắt mất sản phẩm.
   ========================================================= */
#danh-muc .mosaic{
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:238px; gap:16px;
}
#danh-muc .cat-grid-sen   {grid-column:1 / 5;  grid-row:1 / 3}  /* DỌC 4×2 */
#danh-muc .cat-grid-voi   {grid-column:5 / 13; grid-row:1}      /* banner 8 cột, khớp ảnh 3:1 */
#danh-muc .cat-grid-boncau{grid-column:5 / 9;  grid-row:2}
#danh-muc .cat-grid-tu    {grid-column:9 / 13; grid-row:2 / 4}  /* DỌC 4×2 */
#danh-muc .cat-grid-bontam{grid-column:1 / 4;  grid-row:3}
#danh-muc .cat-grid-lavabo{grid-column:4 / 6;  grid-row:3}
#danh-muc .cat-grid-bep   {grid-column:6 / 9;  grid-row:3}
#danh-muc .mosaic .cat img{width:100%; height:100%; object-fit:cover; display:block}

/* --- Mobile & tablet: 2 cột (khách chốt 09/08/2026) --------------------
   Ô dọc kéo 2 hàng; ô Vòi lavabo (ảnh 3:1) trải hết bề ngang làm banner đầu.
   Nhờ ô banner này tổng số ô lưới thành CHẴN (10) nên không hở ô trống nào.
   Thứ tự DOM là 01→07 nên số hiện ra tăng dần đúng thứ tự.

   ⚠ Phải dùng !important: hai khối cũ ở trên (dòng ~368 và ~908) đặt
   `.mosaic .cat{grid-column:auto!important; grid-row:auto!important}`,
   không ép lại thì ô dọc mất khả năng kéo hàng. */
/* Tablet 769–1024px: GIỮ mosaic 12 cột, chỉ hạ chiều cao hàng — đúng như
   bản gốc (`.mosaic{grid-auto-rows:180px}` ở khối @media 1024 cũ). Nếu để
   2 cột tới tận 1024px thì khối danh mục cao 1728px ở màn 1024 (đã đo). */
@media(min-width:769px) and (max-width:1024px){
  #danh-muc .mosaic{grid-auto-rows:180px}
}

/* Điện thoại ≤768px: 2 cột (khách chốt 09/08/2026). */
@media(max-width:768px){
  #danh-muc .mosaic{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; gap:10px}
  #danh-muc .mosaic .cat{grid-column:auto !important; grid-row:auto !important; aspect-ratio:4/3}
  #danh-muc .mosaic .cat-grid-voi{grid-column:1 / -1 !important; aspect-ratio:3/1}
  #danh-muc .mosaic .cat-grid-sen,
  #danh-muc .mosaic .cat-grid-tu{grid-row:span 2 !important; aspect-ratio:auto}
}


/* =========================================================
   LÔ G (09/08/2026) — BADGE USP CHUYỂN LÊN CẠNH TIÊU ĐỀ HERO

   Khách yêu cầu badge nằm BÊN PHẢI tiêu đề (nhắc 2 lần). Đã dựng thử
   3 phương án client-side rồi chụp ảnh cho khách chọn:
     · 1 hàng 4 badge : cần 535px / chỗ trống 317px -> 2 badge cuối chui
                        sau ảnh hero. LOẠI.
     · khối 2×2       : 261px, hở đúng 11px ở 1440 — vừa sát vừa dễ vỡ
                        khi khách sửa nhãn dài hơn. LOẠI.
     · XẾP DỌC 4 badge: 141px, hở 123px. => KHÁCH CHỌN, dựng bản này.

   ⚠ BÀI HỌC ĐO ĐẠC (suýt làm mất bố cục khách muốn):
   lần đầu báo "chỉ còn 113px bên phải tiêu đề" là SAI, vì đo bằng
   getBoundingClientRect() của <h1> — mà .hero-line là thẻ block nên
   H1 luôn rộng bằng cả cột, bất kể chữ ngắn hay dài. Phải đo bằng
   Range.selectNodeContents() để lấy bề rộng CHỮ THẬT: 317px.
   Trên hero có ảnh tràn mép, "mép phải của khối" và "mép phải của chữ"
   là hai con số khác hẳn nhau — và đó chính là toàn bộ câu hỏi.
   ========================================================= */
.hero-head{min-width:0}

/* Chip dùng chung cho mọi bề rộng */
.hero-head .hero-usp{list-style:none; margin:0; padding:0; border-top:0}
.hero-head .hero-usp-item{
  display:inline-flex; flex-direction:row; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px; background:var(--white);
  padding:8px 14px 8px 10px; white-space:nowrap;
}
.hero-head .hero-usp-mark{
  width:24px; height:24px; flex:0 0 auto;
  border:0; border-radius:0; background:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.hero-head .hero-usp-mark svg{width:24px; height:24px}
.hero-head .hero-usp-label{font-size:13px; font-weight:700; line-height:1.2; letter-spacing:-.005em}

/* ≥1280px — tiêu đề trái, badge xếp DỌC bên phải.
   NGƯỠNG 1280, KHÔNG PHẢI 1200 (09/08/2026): dựng xong đo lại thì thấy
   khe hở giữa mép phải cụm badge và mép trái ảnh hero co theo bề rộng màn:
     1200px →   4px   ← sát dính, coi như chạm
     1240px →  24px
     1280px →  44px
     1440px → 124px
     1920px → 204px
   Cụm badge đứng YÊN (uspRight = 613px không đổi từ 1200 tới 1440) vì nó
   bám theo bề rộng CHỮ của h1, còn ảnh hero thì trượt sang phải theo màn.
   Nên khe hở = 4 + 0,5 × (bề rộng màn − 1200).
   4px không phải là đè lên nhau, nhưng nhãn sửa được trong ACF: chỉ cần
   khách gõ dài thêm 1 ký tự là đâm vào ảnh. Đẩy ngưỡng lên 1280 để lúc nào
   cũng còn ≥44px, đủ cho nhãn kịch trần 14 ký tự (~+14px) mà vẫn hở ~30px.
   Dải 1200–1279 dùng hàng ngang cuộn được — giống 1024, đã kiểm là ổn. */
@media(min-width:1280px){
  .hero-head{display:flex; align-items:flex-start; gap:28px}
  .hero-head h1{flex:0 0 auto; width:max-content; max-width:100%}
  .hero-head .hero-usp{
    flex:0 0 auto; width:max-content;
    display:flex; flex-direction:column; align-items:flex-start;
    gap:9px; margin:12px 0 0;
  }
}

/* ≤1279px — tiêu đề full width, badge thành HÀNG NGANG CUỘN ĐƯỢC.
   Cột chữ hẹp lại nhưng ảnh hero thì không, nên xếp dọc bên phải sẽ đâm
   vào ảnh; hạ xuống thành hàng ngang là an toàn. Xem lý do chọn 1280 ở trên. */
@media(max-width:1279px){
  .hero-head{display:block}
  .hero-head .hero-usp{
    display:flex; flex-direction:row; gap:8px; margin:16px 0 0;
    overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:2px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .hero-head .hero-usp::-webkit-scrollbar{display:none}
  .hero-head .hero-usp-item{flex:0 0 auto}
}

/* ≤680px — .hero .copy là display:contents nên .hero-head thành ô lưới:
   phải đặt order để nằm đúng chỗ H1 cũ (giữa eyebrow 1 và câu lead 3). */
@media(max-width:680px){
  .hero-head{order:2}
  .hero-head .hero-usp{margin-top:14px}
  .hero-head .hero-usp-item{padding:7px 12px 7px 9px; gap:7px}
  .hero-head .hero-usp-mark,.hero-head .hero-usp-mark svg{width:22px; height:22px}
  .hero-head .hero-usp-label{font-size:12.5px}
}

/* ══════════════════════════════════════════════════════════════════════
   LÔ H (10/08/2026) — HERO ĐIỆN THOẠI: BADGE SANG PHẢI + CHỮ TO HƠN

   Khách xem bản 2.4.0 trên máy thật rồi đề nghị: đưa badge sang phải
   giống desktop, lấy chỗ trống bên phải (≈1/3 hero chỉ có vòng tròn
   trang trí), và nhân đó phóng to tiêu đề cho nổi hơn.

   Đã dựng 3 bản rồi ĐO, không tranh luận bằng lời (bài học lô G):

     bản 1  hiện trạng 2.4.0 ................ 993px @360 · 1008px @375
     bản 2  badge phải, chữ giữ nguyên ...... 1015px @360 · 1027px @375
     bản 3  badge phải, chữ to (bản này) .... 1009px @360 · 1021px @375

   Chọn bản 3 — và lý do KHÔNG phải là thẩm mỹ:

   a) Bản 3 THẤP HƠN bản 2 dù chữ to hơn 27%. Chiều cao khối đầu trang
      = max(chiều cao tiêu đề, chiều cao cột badge). Badge gọn lại
      (icon 19px, nhãn 11px, cột 84px) làm cột badge lùn xuống, nên
      tiêu đề có chỗ cao lên mà không đội tổng chiều cao.

   b) CHỐNG ĐƯỢC VIỆC KHÁCH TỰ SỬA NHÃN — điểm quyết định.
      Bản 2: chip rộng theo nội dung (max-content) nên nhãn dài thêm là
      đẩy tiêu đề hẹp lại → tiêu đề gãy dòng. Ở 360px chỉ còn 9px dư,
      tức thêm 1–2 ký tự là vỡ.
      Bản 3: cột badge rộng CỐ ĐỊNH 84px, nhãn dài thì XUỐNG DÒNG bên
      trong chip, không bao giờ lấn sang tiêu đề. Đã thử nhãn 14 ký tự
      (kịch trần ACF) kể cả từ dính liền không dấu cách: không tràn.
      Hai lần hôm nay bố cục suýt vỡ vì nhãn sửa được — lần này khoá lại
      bằng cấu trúc chứ không bằng lời dặn.

   Chiều cao so với mốc: lô D 1213px → lô F 1086px → 2.4.0 993px →
   bản này 1009px @360. Tiêu +16px để lấy chữ 40px thay 32px.

   ⚠ Số 996px báo ở lô G là ĐO SAI: iframe đo lúc đó bị thanh cuộn ăn
   15px nên thực chất đang đo ở 360px. Số đúng: 993px @360, 1008px @375.

   Ngưỡng 340px: dưới mức đó ép tiêu đề về 34px, nếu không cột badge
   84px + chữ sẽ tràn ra ngoài khung (đo ở 320px: tràn 17px).
   ══════════════════════════════════════════════════════════════════════ */

/* H1. Hàng badge cuộn ngang (681–1279px): mờ dần ở mép phải.
   Trước đây khung cuộn cắt ngang giữa chữ ("Công ng") — đọc ra như lỗi
   tràn chứ không ra tín hiệu "cuộn tiếp đi". Mask gradient làm chữ tan
   dần, vẫn nói được là còn nội dung bên phải. */
@media(max-width:1279px){
  .hero-head .hero-usp{
    padding-right:10px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(to right,#000 calc(100% - 34px),rgba(0,0,0,0) 100%);
  }
}

/* H2. ≤680px — badge xếp DỌC bên phải tiêu đề. Không còn cuộn ngang
   nên cũng không còn gì để cắt: lỗi cắt chữ biến mất theo bố cục. */
@media(max-width:680px){
  .hero h1{font-size:clamp(34px,11.2vw,52px)}
  .hero-head{display:flex; align-items:flex-start; gap:12px}
  .hero-head h1{flex:0 0 auto; width:max-content; max-width:none}
  .hero-head .hero-usp{
    flex:0 0 84px; width:84px;
    display:flex; flex-direction:column; align-items:stretch;
    gap:6px; margin:4px 0 0;
    overflow:visible; padding-right:0;
    -webkit-mask-image:none; mask-image:none;
  }
  .hero-head .hero-usp-item{
    flex:0 0 auto; padding:6px 8px 6px 7px; gap:6px;
    align-items:center; white-space:normal;
  }
  .hero-head .hero-usp-mark,.hero-head .hero-usp-mark svg{width:19px; height:19px}
  .hero-head .hero-usp-label{
    font-size:11px; line-height:1.15;
    white-space:normal; overflow-wrap:anywhere;
  }
}

/* H3. Máy rất nhỏ (≤340px): ép tiêu đề 34px, nếu không sẽ tràn khung. */
@media(max-width:340px){
  .hero h1{font-size:34px}
}

/* ══════════════════════════════════════════════════════════════════════
   LÔ I (10/08/2026) — CẮT ẢNH HERO TRANG DANH MỤC /nhom/<nhóm>/

   Khách báo: Sen tắm mất ảnh (cả máy tính lẫn điện thoại), Bộ tủ lavabo
   y hệt, Vòi lavabo trên điện thoại "không thấy vòi đâu".

   NGUYÊN NHÂN: cả 7 nhóm dùng CHUNG một giá trị
   `.list-hero .media img{object-position:62% 50%}` trong khi 7 ảnh nguồn
   có tỉ lệ rất khác nhau (0,75 → 3,00) và khung hiển thị cũng đổi theo
   bề rộng màn (1,25 ở điện thoại → 2,25 ở 1024px). Một giá trị không thể
   đúng cho cả bảy.

   ⚠ Giá trị `object-position:80% 50%` đã đặt cho Vòi lavabo là của
   `#danh-muc .cat-grid-voi img` — CHỈ áp cho mosaic trang chủ.
   Trang danh mục có rule riêng nên KHÔNG hưởng giá trị đó. Đúng như nghi
   ngờ: 62% là sai cho khung hẹp của điện thoại (chỉ thấy 77% cụm chậu+vòi,
   phần vòi nằm ngoài khung).

   CÁCH LÀM: dò vùng chủ thể từ dữ liệu ảnh (chi tiết sắc + tương phản
   tâm-nền), rồi ĐỐI CHIẾU BẰNG MẮT từng ảnh — xem mục "bài học" dưới.
   Sau đó quét toàn bộ 101×101 giá trị object-position, chọn giá trị làm
   TỐI ĐA độ phủ NHỎ NHẤT của chủ thể trên cả 5 khung
   (375 / 768 / 1024 / 1440 / 1920). Một giá trị cho mỗi nhóm là đủ —
   không cần tách theo breakpoint.

   Độ phủ chủ thể ở khung khắc nghiệt nhất (1024px, 944×420):
     Vòi lavabo    62%→77%   : 100% → 100%  (điện thoại 77% → 100%)
     Sen tắm       50% 12%   :  39% → 78%
     Bộ tủ lavabo  50% 78%   :  49% → 84%
     Bồn tắm       50% 71%   :  85% → 100%
     Bồn cầu       50% 37%   :  85% → 86%   (đổi để giữ NẮP, cắt đế)
     Nhà bếp       50% 34%   :  83% → 83%   (đổi để giữ ĐẦU VÒI)
     Lavabo        50% 50%   :  73% → 73%   (giữ nguyên trục dọc)

   ⚠ BÀI HỌC — "vùng nhiều chi tiết nhất" KHÔNG phải "sản phẩm":
   bộ dò tự động chỉ đúng 2/7 ảnh. Nó chỉ vào tấm vách sọc và cái kệ ở
   ảnh bồn cầu (bồn cầu trắng trên nền xám nhạt gần như không có tương
   phản), chỉ vào cái gương ở ảnh bộ tủ, chỉ vào khung kính ở ảnh sen tắm.
   Đây đúng kiểu lỗi "chấm vào tạp dề chứ không vào mặt người" của lần
   trước. Số máy tính ra chỉ dùng làm điểm khởi đầu; hộp chủ thể cuối cùng
   là do NHÌN từng ảnh mà xác định, rồi mới đưa lại vào máy để tối ưu.

   ⚠ GIỚI HẠN THẬT, nói rõ để khỏi tưởng đã hoàn hảo:
   - Sen tắm: ảnh gốc 770×1024 (dọc), khung desktop 2,19 chỉ hiện được
     ~34% chiều cao ảnh. KHÔNG BAO GIỜ thấy trọn cây sen ở desktop —
     chỉ thấy bát sen + thân trên. Muốn thấy trọn cây thì phải CHỤP LẠI
     theo khổ ngang. Bản cắt hiện tại vẫn đọc ra "sen tắm" nên chưa cần.
   - Lavabo: chậu (27–88%) cao hơn cửa sổ hiển thị (46%) nên vòi luôn bị
     cắt ở desktop. Ưu tiên giữ MIỆNG CHẬU, cắt phần đáy.
   - Bồn cầu / Nhà bếp: chủ thể cũng cao hơn cửa sổ; chọn cắt ĐÁY thay vì
     cắt ĐỈNH, vì sản phẩm bị cụt nóc trông hỏng hơn bị cụt chân.

   ⚠ Nếu khách đặt ảnh riêng qua ACF (trường `banner_nhom` của term) thì
   ảnh đổi nhưng object-position dưới đây GIỮ NGUYÊN — phải chỉnh lại.
   ══════════════════════════════════════════════════════════════════════ */
.term-voi-lavabo   .list-hero .media img{object-position:50% 50%}
.term-sen-tam      .list-hero .media img{object-position:50% 12%}
.term-bon-cau      .list-hero .media img{object-position:50% 50%}
.term-bon-tam      .list-hero .media img{object-position:50% 50%}
.term-lavabo       .list-hero .media img{object-position:50% 50%}
.term-bo-tu-lavabo .list-hero .media img{object-position:50% 50%}
.term-nha-bep      .list-hero .media img{object-position:50% 50%}

/* ══════════════════════════════════════════════════════════════════════
   LÔ J (13/08/2026) — HERO TRANG /san-pham/ (kho "Tất cả sản phẩm")

   BỐI CẢNH: trang này KHÔNG có body class .term-* (đã kiểm bằng trình
   duyệt: body = "archive post-type-archive post-type-archive-san_pham")
   nên nó ăn rule gốc ở dòng 180:
       .list-hero .media img{object-position:62% 50%}
   62% là giá trị đúng cho ảnh theme cũ cat-voi-lavabo.jpg (1000×333).
   Vì vậy KHÔNG sửa rule gốc — sửa là hỏng chỗ khác.

   ẢNH MỚI: attachment 200 = uploads/2026/08/cat-voi-lavabo.jpg (1916×821),
   đúng tấm đang dùng cho nhóm Vòi lavabo. Tiêu điểm 50% 50% lấy nguyên
   theo số đã đo ở LÔ I cho CHÍNH tấm ảnh này trong CHÍNH khung
   .list-hero .media (phủ chủ thể 100% ở cả 375 / 768 / 1024 / 1440 / 1920).
   Ảnh 2,33 vs khung 2,19 (desktop) nên gần như không cắt; ở 375px khung
   1,25 chỉ hiện ~54% bề ngang, 50% giữ trọn cụm chậu + vòi.

   PHẠM VI: selector thêm 1 class nên đặc hiệu (0,3,1) > rule gốc (0,2,1),
   thắng bất kể thứ tự, và chỉ trúng /san-pham/ — 7 trang nhóm dùng
   .term-* ở khối LÔ I bên trên, không đổi.

   ⚠ Đổi ảnh hero trang này thì phải đo lại giá trị dưới đây.
   ══════════════════════════════════════════════════════════════════════ */
.post-type-archive-san_pham .list-hero .media img{object-position:50% 50%}

/* =========================================================
   LÔ K (14/08/2026) — LOGO DẠNG ẢNH
   Ảnh cao tối đa 1em. .kr-logo có line-height:1 nên 1em đúng bằng chiều cao
   khối chữ cũ => mọi rule font-size đang có tiếp tục quyết định kích thước:
   27px desktop · 24px ở ≤680px · 22px ở ≤900px và trong menu điện thoại ·
   21px ở 681–760px · 26px chân trang. KHÔNG thêm breakpoint mới.
   max-width chặn trường hợp khách tải lên logo quá dài làm vỡ hàng header.
   ========================================================= */
.kr-logo img{display:block; max-height:1em; max-width:min(210px,45vw); width:auto; height:auto}
.kr-logo.has-img{letter-spacing:normal}