/* VK Asia - CSS chính (giao diện "mạch ron"). Một tệp, không thư viện. Font tự host (WOFF2). */

/* ---------- Font: Be Vietnam Pro 400 / 600 / 800 (latin + vietnamese) ---------- */
@font-face{font-family:"Be Vietnam Pro";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-weight:800;font-style:normal;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-800-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-weight:800;font-style:normal;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Font dự phòng được chỉnh cho khớp kích thước Be Vietnam Pro (đo bằng canvas): giảm dịch chuyển bố cục khi font tải xong */
@font-face{font-family:"BVP Fallback";font-weight:400;src:local("Arial"),local("Helvetica");size-adjust:109.3%;ascent-override:91.5%;descent-override:24.7%;line-gap-override:0%}
@font-face{font-family:"BVP Fallback";font-weight:600;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold");size-adjust:105.4%;ascent-override:94.9%;descent-override:25.6%;line-gap-override:0%}
@font-face{font-family:"BVP Fallback";font-weight:800;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold");size-adjust:107.5%;ascent-override:93%;descent-override:25.1%;line-gap-override:0%}

/* ---------- Design tokens ---------- */
:root{
	--red:#a01820;          /* màu logo */
	--red-2:#c41e28;        /* đỏ sáng (hover) */
	--red-ink:#8a1219;      /* chữ đỏ trên nền sáng */
	--tint:#fbeced;         /* nền đỏ rất nhạt */
	--bg:#fff;              /* nền chung của web: MỌI ảnh sản phẩm nằm trên nền này */
	--bg-2:#f3f4f6;         /* nền khối xen kẽ (xám bê tông nhạt) */
	--ink:#101317;
	--cement:#62676d;        /* xám xi măng: nền của các khối từng là màu đen */
	--text:#2a3038;
	--mute:#59616c;
	--line:#e3e6ea;

	--sans:"Be Vietnam Pro","BVP Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

	--fs-0:1rem;--fs-1:1.125rem;--fs-2:1.375rem;
	--fs-3:clamp(1.75rem,1.2rem + 2vw,2.75rem);
	--fs-4:clamp(2.5rem,1.5rem + 4.4vw,4.75rem);
	--s-1:.5rem;--s-2:1rem;--s-3:1.5rem;--s-4:2.5rem;--s-5:4rem;--s-6:6.5rem;
	--r:12px;--r-lg:20px;--r-xl:28px;--pill:999px;
	--gutter:clamp(1rem,3.5vw,4rem);   /* lề hai bên: trang rộng hết màn hình */
	--ease:cubic-bezier(.23,1,.32,1);
	--sh-1:0 1px 2px rgba(16,19,23,.05),0 6px 20px rgba(16,19,23,.06);
	--sh-2:0 2px 4px rgba(16,19,23,.05),0 18px 48px rgba(16,19,23,.13);
	--header-h:4.5rem;
}

/* ---------- Nền tảng ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-0)/1.7 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-ink);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--red)}
h1,h2,h3{font-family:var(--sans);font-weight:800;color:var(--ink);line-height:1.14;margin:0 0 var(--s-2);letter-spacing:-.025em;text-wrap:balance}
h1{font-size:var(--fs-4);letter-spacing:-.035em;line-height:1.08}
h2{font-size:var(--fs-3)}
h3{font-size:var(--fs-1);letter-spacing:-.015em}
p{margin:0 0 var(--s-2)}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:8px}
.wrap{width:calc(100% - 2 * var(--gutter));margin-inline:auto}
.narrow{max-width:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--cement);color:#fff;padding:.7rem 1.1rem;z-index:100;border-radius:var(--pill);transition:transform .15s var(--ease)}
.skip:focus{transform:translateY(5rem)}

/* ---------- Nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.9rem;padding:.65rem 1.5rem;font:600 .95rem/1.2 var(--sans);text-decoration:none;border:2px solid var(--red);border-radius:var(--pill);cursor:pointer;transition:transform 160ms var(--ease),background-color 160ms ease,color 160ms ease,box-shadow 200ms var(--ease),border-color 160ms ease}
.btn-solid{background:var(--red);color:#fff}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
	.btn-solid:hover{background:var(--red-2);border-color:var(--red-2);color:#fff;box-shadow:0 8px 22px rgba(160,24,32,.32)}
	.btn-line:hover{background:var(--cement);color:#fff}
}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:var(--header-h)}
.brand img{height:2.99rem;width:auto}
@media (max-width:25rem){.brand img{height:2.6rem}}
@media (max-width:22rem){.menu-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.nav ul{display:flex;gap:.15rem}
.nav a{text-decoration:none;color:var(--ink)}
.nav>ul>li>a{display:block;padding:.6rem .95rem;font-weight:600;font-size:.95rem;border-radius:var(--pill);transition:background-color 150ms ease,color 150ms ease}
.nav>ul>li>a:hover{background:var(--bg-2);color:var(--red-ink)}
.nav .btn-solid{color:#fff}
.has-sub{position:relative}
.sub{position:absolute;left:0;top:calc(100% + .35rem);min-width:15rem;flex-direction:column;gap:0!important;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:.5rem;box-shadow:var(--sh-2);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 150ms var(--ease),transform 150ms var(--ease),visibility 150ms}
.sub a{display:block;padding:.65rem .9rem;font-size:.95rem;border-radius:var(--r)}
.sub a:hover{background:var(--bg-2);color:var(--red-ink)}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.nav-tools{display:flex;align-items:center;gap:var(--s-2)}
.tel{font-weight:600;font-size:.95rem;white-space:nowrap}
.menu-btn{display:none}
.nav{display:flex;align-items:center;gap:var(--s-3);margin-left:auto;order:1}
.head-tools{display:flex;align-items:center;gap:.5rem;order:2}
.lang{display:flex;padding:.2rem;background:var(--bg-2);border-radius:var(--pill)}
.lang a{text-decoration:none;display:flex;align-items:center;justify-content:center;min-height:2.75rem;min-width:2.75rem;padding:.2rem .6rem;font-size:.85rem;font-weight:600;color:var(--mute);border-radius:var(--pill);transition:background-color 150ms ease,color 150ms ease}
.lang a[aria-current]{background:var(--cement);color:#fff}
@media (max-width:75rem) and (min-width:64rem){.tel{display:none}}

@media (max-width:63.99rem){
	.head-tools{margin-left:auto}
	.menu-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:2.9rem;padding:.4rem 1rem;background:var(--cement);border:0;border-radius:var(--pill);font:600 .9rem var(--sans);color:#fff;cursor:pointer;transition:transform 160ms var(--ease)}
	.menu-btn:active{transform:scale(.96)}
	.menu-ico,.menu-ico::before{display:block;width:1.1rem;height:2px;background:currentColor;position:relative;border-radius:2px}
	.menu-ico::before{content:"";position:absolute;top:-5px;left:0;box-shadow:0 10px 0 currentColor}
	.nav{margin-left:0;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);border-radius:0 0 var(--r-xl) var(--r-xl);box-shadow:var(--sh-2);padding:.75rem 1rem 1.5rem;max-height:calc(100dvh - var(--header-h));overflow:auto}
	.js .nav{display:none}
	.js .nav.open{display:flex}
	.nav ul{flex-direction:column}
	.nav>ul>li>a{padding:.9rem .5rem;border-radius:var(--r);font-size:1.05rem}
	.sub{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;padding:0 0 .25rem .75rem;min-width:0;background:transparent}
	.nav-tools{flex-wrap:wrap;margin-top:var(--s-2)}
}

/* ---------- Hero ---------- */
.hero{position:relative;padding:var(--s-5) 0 var(--s-5);overflow:hidden}
.hero::before,.page-head::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(16,19,23,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(16,19,23,.055) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);mask-image:linear-gradient(180deg,#000 0%,transparent 85%)}
.hero .wrap{position:relative}
.hero-grid{display:grid;gap:var(--s-4);align-items:center}
.hero-copy .lead{margin:var(--s-2) 0 var(--s-3)}
.hero-copy .actions{margin:0}
.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;margin:var(--s-4) 0 0;padding:var(--s-3) 0 0;border-top:1px solid var(--line)}
.stats div{display:flex;flex-direction:column;padding:0 var(--s-3)}
.stats div:first-child{padding-left:0}
.stats div+div{border-left:1px solid var(--line)}
.stats dt{order:1;font-size:clamp(1.9rem,1.4rem + 2vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--red);font-variant-numeric:tabular-nums}
.stats dd{order:2;margin:.4rem 0 0;font-size:.9rem;color:var(--mute);font-weight:600}
.system{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);padding:clamp(.5rem,1.2vw,.9rem);max-width:36rem;width:100%;justify-self:center}
.system-img{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2)}
.system-img img{display:block;width:100%;height:auto}
.pin{position:absolute;margin:-.95rem 0 0 -.95rem;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:#fff;color:var(--red);font-size:.85rem;font-weight:800;box-shadow:0 0 0 3px rgba(160,24,32,.85),0 4px 12px rgba(0,0,0,.3)}
a.pin{text-decoration:none;transition:transform 160ms var(--ease),background-color 160ms ease,color 160ms ease}
a.pin::before{content:"";position:absolute;inset:-.6rem}
a.pin:active{transform:scale(.94)}
.layers a{display:flex;flex:1;align-items:center;min-height:2.75rem;color:inherit;text-decoration:none}
.layers a::after{content:"\2192";margin-left:auto;padding-left:.75rem;color:var(--red);transition:transform 160ms var(--ease)}
@media (hover:hover) and (pointer:fine){a.pin:hover{background:var(--red);color:#fff}.layers a:hover{color:var(--red)}.layers a:hover::after{transform:translateX(3px)}}
.layers li:has(a){padding-block:0}
.p1{left:48.5%;top:18.5%}.p2{left:51%;top:34%}.p3{left:17%;top:32.5%}.p4{left:37%;top:58%}.p5{left:22%;top:74%}
.layers{list-style:none;display:grid;gap:.15rem;margin:var(--s-2) .35rem .35rem;padding:0}
.layers li{display:flex;align-items:center;gap:.7rem;font-size:.92rem;color:var(--text);padding:.4rem 0;border-bottom:1px solid var(--line)}
.layers li:last-child{border-bottom:0}
.layers .n{flex:none;display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:#6b7280;color:#fff;font-size:.78rem;font-weight:700}
.layers .hl{font-weight:600;color:var(--ink)}
.layers .hl .n{background:var(--red)}
@media (min-width:56rem){.hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--s-5);align-items:stretch}.hero-copy{display:flex;flex-direction:column;align-items:flex-start}.hero-copy .stats{margin-top:auto}.hero h1{margin-top:.1em}.system{align-self:start}.hero{padding:var(--s-6) 0 var(--s-5)}}
@media (max-width:30rem){.stats div{padding:0 .75rem}.stats dd{font-size:.8rem}}

.hero h1{margin:0;font-size:clamp(1.575rem,.945rem + 2.52vw,2.8rem);line-height:1.2;color:var(--red)}
.hero h1 .ln{display:block}
.lead{font-size:var(--fs-1);color:var(--mute);line-height:1.65}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s-3)}

/* Sơ đồ mặt cắt hệ thống sàn */

/* Dải số liệu */

/* Xem trước mạch ron (dùng ở trang Bảng màu) */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;padding:.55rem;aspect-ratio:4/3;background:var(--grout,#6c7274);transition:background-color 240ms var(--ease);border-radius:var(--r-lg)}
.tiles i{background:#f4f2ee;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -12px 20px rgba(16,19,23,.06);animation:tile-in 520ms var(--ease) both}
.tiles i:nth-child(3n+2){background:#ebe7e0}
.tiles i:nth-child(5n+1){background:#faf8f5}
.tiles i:nth-child(7n+3){background:#e6e1d9}
.tiles i:nth-child(1){animation-delay:40ms}.tiles i:nth-child(2){animation-delay:80ms}.tiles i:nth-child(3){animation-delay:120ms}.tiles i:nth-child(4){animation-delay:160ms}
.tiles i:nth-child(5){animation-delay:100ms}.tiles i:nth-child(6){animation-delay:140ms}.tiles i:nth-child(7){animation-delay:180ms}.tiles i:nth-child(8){animation-delay:220ms}
.tiles i:nth-child(9){animation-delay:160ms}.tiles i:nth-child(10){animation-delay:200ms}.tiles i:nth-child(11){animation-delay:240ms}.tiles i:nth-child(12){animation-delay:280ms}
@keyframes tile-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.grout-name{margin:1rem .25rem .7rem;font-size:.95rem;display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;color:var(--ink)}

/* ---------- Khối nội dung ---------- */
.sec{padding:var(--s-5) 0}
.sec>.wrap>h2{max-width:30ch;margin-bottom:var(--s-4)}
@media (min-width:56rem){.sec{padding:var(--s-6) 0}}
.groups{background:var(--bg-2)}

/* Thẻ nhóm sản phẩm: ảnh nằm trên nền trắng của web */
.group-grid{display:grid;gap:var(--s-3)}
.group{position:relative;display:flex;flex-direction:column;background:var(--bg);border-radius:var(--r-xl);color:var(--ink);text-decoration:none;box-shadow:var(--sh-1);overflow:hidden;transition:transform 220ms var(--ease),box-shadow 220ms var(--ease)}
.group-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.group-img img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease)}
@media (hover:hover) and (pointer:fine){.group:hover .group-img img{transform:scale(1.05)}}
.group-body{display:flex;flex-direction:column;gap:.55rem;padding:var(--s-3) var(--s-3) var(--s-3)}
.group-title{font:800 var(--fs-2)/1.2 var(--sans);letter-spacing:-.02em}
.group-desc{color:var(--mute);font-size:.95rem}
.group-meta{align-self:flex-start;margin-top:.5rem;padding:.3rem .8rem;border-radius:var(--pill);background:var(--tint);font-weight:600;font-size:.85rem;color:var(--red-ink)}
.group::after{content:"";position:absolute;right:1.4rem;bottom:1.4rem;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--cement) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/1.2rem no-repeat;transition:transform 220ms var(--ease),background-color 200ms ease}
@media (hover:hover) and (pointer:fine){.group:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}.group:hover::after{background-color:var(--red);transform:translateX(3px)}}
@media (min-width:48rem){.group-grid{grid-template-columns:repeat(3,1fr)}}

.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.6rem,1fr));gap:.5rem}
.chips li{aspect-ratio:1;background:var(--c);border:1px solid rgba(16,19,23,.14);border-radius:12px}

.faq details{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:.75rem;transition:background-color 200ms ease,box-shadow 200ms var(--ease)}
.faq details[open]{background:var(--bg-2);border-color:transparent}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);padding:1.05rem 1.35rem;font-weight:600;color:var(--ink);min-height:3.25rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--tint);color:var(--red);font-size:1.3rem;line-height:1;transition:transform 200ms var(--ease)}
.faq details[open] summary::after{content:"\2212";transform:rotate(180deg)}
.faq details p{color:var(--mute);padding:0 1.35rem 1.2rem;margin:0}
.sec.faq{padding-top:var(--s-5)}

/* Khối liên hệ: nền đỏ thương hiệu + lưới gạch, thẻ form trắng */
.contact{position:relative;background:var(--red);color:#fff;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(135deg,#000,transparent 70%);mask-image:linear-gradient(135deg,#000,transparent 70%)}
.contact .wrap{position:relative}
.contact h2{color:#fff}
.contact p{color:rgba(255,255,255,.92)}
.contact a{color:#fff}
.contact-grid{display:grid;gap:var(--s-4);align-items:start}
.contact-list{display:grid;gap:.2rem;margin-top:var(--s-3)}
.contact-list a{font-weight:600}
@media (min-width:56rem){.contact-grid{grid-template-columns:.9fr 1.1fr;gap:var(--s-5)}}

/* ---------- Form ---------- */
.quote{background:#fff;color:var(--text);padding:var(--s-3);border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.quote p{max-width:none;color:var(--text)}
.quote label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem;color:var(--ink)}
.quote input[type=text],.quote input[type=tel],.quote input[type=email],.quote textarea{width:100%;font:inherit;padding:.75rem .9rem;border:1.5px solid #c3c8cf;border-radius:var(--r);background:#fff;color:var(--ink);min-height:2.9rem;transition:border-color 150ms ease,box-shadow 150ms ease}
.quote textarea{resize:vertical}
.quote input:focus-visible,.quote textarea:focus-visible{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(160,24,32,.16)}
.row2{display:grid;gap:0 var(--s-2)}
@media (min-width:40rem){.row2{grid-template-columns:1fr 1fr}}
.consent label{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.875rem;color:var(--text)}
.consent input{margin-top:.25rem;width:1.15rem;height:1.15rem;flex:none;accent-color:var(--red)}
.hp{position:absolute!important;left:-9999px;height:0;overflow:hidden}
.form-status{margin:.9rem 0 0;font-weight:600;min-height:1.5em}
.form-status.ok{color:#1b6b3a}
.form-status.err{color:#b42318}

/* ---------- Footer ---------- */
.site-footer{background:var(--cement);color:#f1f3f5;padding:var(--s-5) 0 var(--s-3);font-size:.95rem;border-top:4px solid var(--red)}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer h2{font:600 1rem var(--sans);color:#fff;margin-bottom:.75rem;letter-spacing:0}
.foot-grid{display:grid;gap:var(--s-4)}
.foot-brand img{height:2.9rem;width:auto;background:#fff;padding:.4rem .75rem;border-radius:var(--r);margin-bottom:var(--s-2)}
.foot-grid ul{display:grid;gap:0}
.foot-contact address{display:grid;gap:.35rem;font-style:normal}
.foot-legal{display:flex;flex-wrap:wrap;gap:.5rem var(--s-3);justify-content:space-between;margin-top:var(--s-4);padding-top:var(--s-2);border-top:1px solid rgba(255,255,255,.3);font-size:.85rem;color:#eceff2}
.foot-legal p{margin:0;max-width:none;display:flex;flex-wrap:wrap;column-gap:1rem}
.foot-legal a{color:#fff}
@media (min-width:48rem){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1.4fr}}

/* ---------- Thanh liên hệ nhanh ---------- */
.quick{position:fixed;z-index:40;display:flex;gap:.5rem;left:.75rem;right:.75rem;bottom:.75rem;padding:.4rem;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--pill);box-shadow:var(--sh-2)}
.quick a{flex:1;text-align:center;padding:.75rem .5rem;min-height:2.75rem;color:var(--ink);font-weight:600;font-size:.9rem;text-decoration:none;border-radius:var(--pill)}
.quick a:first-child{background:var(--red);color:#fff}
body{padding-bottom:5rem}
@media (min-width:48rem){
	body{padding-bottom:0}
	.quick{left:auto;right:1.25rem;bottom:1.25rem;flex-direction:column;width:7.5rem;border-radius:var(--r-lg);padding:.35rem;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity 200ms var(--ease),transform 200ms var(--ease),visibility 200ms}
	.quick.show{opacity:1;visibility:visible;transform:none}
	.quick a{border-radius:14px}
}

/* ---------- Trang con ---------- */
.page-head{position:relative;padding:var(--s-2) 0 var(--s-4);background:var(--bg-2);overflow:hidden}
.page-head .wrap{position:relative}
.page-head h1{font-size:clamp(2rem,1.4rem + 2.8vw,3.5rem);margin-bottom:var(--s-1)}
.page-head .lead{margin:var(--s-1) 0 0}
.crumbs{margin-bottom:var(--s-2);font-size:.875rem;color:var(--mute)}
.crumbs ol{display:flex;flex-wrap:nowrap;gap:0 .5rem;padding:0;margin:0;list-style:none;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.crumbs ol::-webkit-scrollbar{display:none}
.crumbs li{flex:none}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:#9aa1ab}
.crumbs a{color:var(--mute)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.sec-sm{padding-top:var(--s-4);padding-bottom:var(--s-4)}
.sec-sm>h2,.wrap>h2{margin-bottom:var(--s-2)}
.note{font-size:.875rem;color:var(--mute);margin:.6rem 0 0}
.prose h2{margin-top:var(--s-4);font-size:var(--fs-2)}
.prose .note{margin-bottom:var(--s-3)}
.prose .tbl-wrap{margin:var(--s-2) 0 var(--s-3)}
.prose td,.prose th{min-width:7rem}
.prose ul{list-style:disc;padding-left:1.25rem;margin:0 0 var(--s-2)}
.prose li{margin:.3rem 0}
.btn-sm{min-height:2.75rem;padding:.4rem 1.1rem;font-size:.875rem}

/* Trang sản phẩm */
.prod-hero{display:grid;gap:var(--s-3);padding-top:var(--s-4);padding-bottom:var(--s-3)}
.prod-img{display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s-3);height:22rem;box-shadow:var(--sh-1)}
.prod-img img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
@media (min-width:56rem){.prod-img{height:28rem}}
.prod-summary p{font-size:var(--fs-1)}
@media (min-width:56rem){.prod-hero{grid-template-columns:.9fr 1.1fr;gap:var(--s-5);align-items:center}}
.facts{display:grid;gap:.75rem;margin:0}
.facts>div{display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.15rem;background:var(--bg-2);border-radius:var(--r-lg)}
.facts dt{font-weight:600;color:var(--mute);font-size:.85rem}
.facts dd{margin:0;color:var(--ink);font-weight:600}
@media (min-width:40rem){.facts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.facts{grid-template-columns:repeat(3,1fr)}}
.tbl-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff}
.tbl th,.tbl td{padding:.8rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl thead th{background:var(--cement);color:#fff;font-weight:600;white-space:nowrap;border-bottom:0}
.tbl tbody th{font-weight:600;color:var(--ink);min-width:9rem;width:32%}
.tbl tbody tr:last-child>*{border-bottom:0}
.tbl tbody tr:nth-child(even){background:#f8f9fa}
.tbl a{font-weight:600;display:inline-block;padding:.5rem 0}
@media (max-width:39.99rem){.tbl tbody th{width:auto;min-width:8rem}}
.lists{display:grid;gap:var(--s-3)}
@media (min-width:56rem){.lists{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}}
.lists>div{padding:var(--s-3);background:var(--bg-2);border-radius:var(--r-lg)}
.lists h2{font-size:var(--fs-2)}
.bullets{list-style:none;display:grid;gap:.6rem}
.bullets li{position:relative;padding-left:1.3rem}
.bullets li::before{content:"";position:absolute;left:0;top:.6em;width:.55rem;height:.55rem;background:var(--red);border-radius:3px}
.steps{padding-left:1.25rem;display:grid;gap:.65rem}
.updated{font-size:.85rem;color:var(--mute);padding-bottom:var(--s-3)}

/* Lưới sản phẩm */
.pgrid-d{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.pcard-d{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-1)}
.pcard-d-img{display:flex;align-items:center;justify-content:center;height:16rem;padding:var(--s-2);background:#fff;border-bottom:1px solid var(--line)}
.pcard-d-img img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
.pcard-d-body{display:flex;flex:1;flex-direction:column;gap:.7rem;padding:var(--s-3) 1.25rem}
.pcard-d-std{margin:0;font-size:.82rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--red)}
.pcard-d-name{margin:0;font-size:1.35rem;line-height:1.25;letter-spacing:-.02em}
.pcard-d-name a{color:var(--ink);text-decoration:none}
.pcard-d-name sup{font-size:.55em;line-height:0}
.pcard-d-sum{margin:0;color:var(--text)}
.pcard-d-feat{margin:0;padding-left:1.2rem;list-style:disc;color:var(--mute);font-size:.92rem}
.pcard-d-feat li{margin:.3rem 0}
.pcard-d-foot{margin-top:auto;padding-top:var(--s-2);border-top:1px solid var(--line)}
.pcard-d-pack{margin:0 0 .8rem;font-size:.9rem;font-weight:600;color:var(--ink)}
.pcard-d-act{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1rem;margin:0}
.pcard-d-tds{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.pcard-d-name a:hover,.pcard-d-tds:hover{color:var(--red)}}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 var(--s-3)}
.chips[hidden]{display:none}
.chip-f{min-height:2.75rem;padding:.5rem 1.1rem;font:inherit;font-weight:600;font-size:.92rem;color:var(--ink);background:#fff;border:1.5px solid #c3c8cf;border-radius:var(--pill);cursor:pointer;transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease,transform 160ms var(--ease)}
.chip-f:active{transform:scale(.97)}
.chip-f[aria-pressed=true]{background:var(--cement);border-color:var(--cement);color:#fff}
@media (hover:hover) and (pointer:fine){.chip-f[aria-pressed=false]:hover{border-color:var(--ink)}}
.pcard-a[hidden]{display:none}
.pcard-a-spec{margin:0 0 .8rem;padding:0;list-style:none;font-size:.9rem;color:var(--text)}
.pcard-a-spec li{margin:.15rem 0}
.pcard-d-quote{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:700;color:var(--red);text-decoration:underline;text-underline-offset:3px}
@media (min-width:48rem){.pgrid-2{grid-template-columns:repeat(2,1fr)}}
.pgrid{display:grid;gap:var(--s-2);grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.pcard{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--ink);text-decoration:none;overflow:hidden;transition:transform 220ms var(--ease),box-shadow 220ms var(--ease),border-color 220ms ease}
.pcard-img{display:flex;align-items:center;justify-content:center;height:12rem;padding:var(--s-2);background:var(--bg)}
.pcard-img img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
.pcard-body{display:flex;flex-direction:column;gap:.3rem;padding:var(--s-1) var(--s-2) var(--s-2)}
.pcard-name{font-weight:800;line-height:1.25;letter-spacing:-.01em}
.pcard-type{font-size:.875rem;color:var(--mute)}
.pcard-std{align-self:flex-start;margin-top:.3rem;padding:.15rem .65rem;border-radius:var(--pill);background:var(--tint);font-size:.78rem;font-weight:600;color:var(--red-ink)}
@media (hover:hover) and (pointer:fine){.pcard:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent}}

/* Bảng màu */
.chart-grid{display:grid;gap:var(--s-4)}
.chart-preview{max-width:30rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:1.1rem;box-shadow:var(--sh-2);align-self:start}
.chart-preview p:last-child{margin:0 .25rem .25rem}
.lbl{color:var(--mute)}
.chips-big{grid-template-columns:repeat(auto-fill,minmax(3.4rem,1fr));gap:.6rem}
.chips-big li{aspect-ratio:auto;background:none;border:0}
.chip{position:relative;display:block;width:100%;aspect-ratio:1;min-height:2.75rem;background:var(--c);border:1px solid rgba(16,19,23,.16);border-radius:14px;cursor:pointer;padding:0;transition:transform 160ms var(--ease),box-shadow 160ms var(--ease)}
.chip:active{transform:scale(.93)}
@media (hover:hover) and (pointer:fine){.chip:hover{transform:translateY(-3px) scale(1.04);box-shadow:var(--sh-1)}}
.chip[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.chip-no{position:absolute;left:5px;bottom:5px;font-size:.65rem;font-weight:600;line-height:1;padding:3px 5px;background:rgba(255,255,255,.9);color:var(--ink);border-radius:6px}
@media (min-width:56rem){.chart-grid{grid-template-columns:28rem 1fr;align-items:start}.chart-preview{position:sticky;top:calc(var(--header-h) + 1rem)}}
.color-table summary{cursor:pointer;font-weight:600;min-height:2.9rem;display:flex;align-items:center;list-style:none;color:var(--ink)}
.color-table summary::-webkit-details-marker{display:none}
.color-table summary::before{content:"+";display:grid;place-items:center;width:2rem;height:2rem;margin-right:.7rem;border-radius:50%;background:var(--tint);color:var(--red);font-size:1.3rem;line-height:1}
.color-table[open] summary::before{content:"\2212"}
.color-table .tbl-wrap{margin-top:var(--s-2)}
.dot{display:inline-block;width:1rem;height:1rem;margin-right:.6rem;background:var(--c);border:1px solid rgba(16,19,23,.3);border-radius:5px;vertical-align:-.15rem}

/* Liên hệ */
.contact-page{display:grid;gap:var(--s-4)}
.info-list{display:grid;gap:.1rem;margin-bottom:var(--s-3)}
.info-list li{display:grid;gap:.1rem 1rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.info-list span{font-weight:600;color:var(--mute);font-size:.9rem}
.info-list address{font-style:normal}
@media (min-width:40rem){.info-list li{grid-template-columns:8rem 1fr}}
@media (min-width:56rem){.contact-page{grid-template-columns:.9fr 1.1fr;gap:var(--s-5)}}
.contact-page .quote{border:1px solid var(--line);box-shadow:var(--sh-1)}
.contact-info h2{font-size:var(--fs-2)}
.map iframe{width:100%;height:22rem;border:0;border-radius:var(--r-lg)}
.posts{display:grid;gap:var(--s-3)}
.posts article{padding:var(--s-3);background:var(--bg-2);border-radius:var(--r-lg)}
.posts h2{font-size:var(--fs-2);margin-bottom:.3rem}
.posts p a{display:inline-flex;align-items:center;min-height:2.75rem}
.grid-sec{padding-top:var(--s-3)}
.page-404{padding:var(--s-6) 0}
.prose{padding:var(--s-4) 0}
.prose>article>*{max-width:none}

/* Banner cookie (chỉ khi bật GA4). Tên class riêng, không trùng với ô đồng ý trong form (.consent). */
.cookie-bar{position:fixed;left:1rem;right:1rem;bottom:5.5rem;z-index:60;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between;background:var(--cement);color:#fff;padding:1rem 1.25rem;border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.cookie-bar[hidden]{display:none}
.cookie-bar p{margin:0;max-width:60ch;color:#fff}.cookie-bar a{color:#fff}
.cookie-actions{display:flex;gap:.5rem}
.cookie-bar .btn-line{color:#fff;border-color:#fff}
@media (min-width:48rem){.cookie-bar{left:1.25rem;right:auto;bottom:1.25rem;max-width:34rem}}

/* Vùng bấm >= 44px cho liên kết điều hướng dạng chữ (mobile/tablet) */
.crumbs a,.foot-grid a,.foot-legal a,.foot-contact a,.contact-list a,.info-list a,.posts h2 a,.posts p a,.sec-sm h2 a{display:inline-flex;align-items:center;min-height:2.75rem}
.crumbs li{min-height:2.75rem}
.prose a,.faq details p a{padding:.25rem 0}

.tel{display:inline-flex;align-items:center;min-height:2.75rem}
@media (max-width:75rem) and (min-width:64rem){.tel{display:none}} /* tablet ngang: nhường chỗ cho menu */

.nav a,.nav .btn{white-space:nowrap}
@media (min-width:64rem) and (max-width:75rem){
	.nav{gap:.75rem}
	.nav>ul>li>a{padding:.6rem .55rem;font-size:.9rem}
	.nav .btn{padding:.6rem 1.1rem;min-height:2.75rem}
	.lang a{min-width:2.4rem;padding:.2rem .4rem}
}

/* ---------- Tính định mức keo chà ron ---------- */
.gc-intro{color:var(--mute)}
.gc-grid{display:grid;gap:var(--s-3);align-items:start}
.gc-form,.gc-out{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-1,0 2px 8px rgba(16,19,23,.06));padding:var(--s-3)}
.gc-form p{margin:0 0 var(--s-2)}
.gc-form label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem;color:var(--ink)}
.gc-form .unit{font-weight:400;color:var(--mute)}
.gc-form input,.gc-form select{width:100%;min-height:2.75rem;font:inherit;padding:.6rem .9rem;border:1.5px solid #c3c8cf;border-radius:var(--r-md,12px);background:#fff;color:var(--ink)}
.gc-form input:focus-visible,.gc-form select:focus-visible{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(160,24,32,.16)}
.gc-form small{display:block;margin-top:.3rem;color:var(--mute);font-size:.82rem}
.gc-out{background:var(--bg-2)}
.gc-out h3{margin:0 0 var(--s-2)}
.gc-result dl{margin:0;display:grid;gap:.5rem}
.gc-result dl div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.gc-result dt{color:var(--mute);font-size:.95rem}
.gc-result dd{margin:0;font-weight:800;color:var(--red);text-align:right}
.gc-bad{margin:.75rem 0 0;color:var(--ink);font-weight:600}
.gc-result .big{font-size:1.25rem}
.gc-note{margin:var(--s-2) 0;font-size:.88rem;color:var(--mute)}
@media (min-width:56rem){.gc-grid{grid-template-columns:1.2fr .8fr}.gc-out{position:sticky;top:6rem}}

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0ms!important}
}

/* Bộ chọn keo chà ron 3 bước */
.gpick{background:var(--cement);color:#fff;padding:var(--s-5) 0}
.gpick[hidden]{display:none}
.gpick h2,.gpick h3{color:#fff}
.gpick-lead{margin:0 0 var(--s-3);color:#f1f3f5}
.gpick-out{background:#f5f3f0;color:var(--text);border-left:6px solid #145f8f;padding:var(--s-3)}
.gpick-out h3{color:var(--ink);font-size:1.25rem;margin-bottom:var(--s-2)}
.gpick-list{list-style:none;margin:0;padding:0}
.gpick-list li{padding:.9rem 0;border-top:1px solid #c9ced4}
.gpick-list li:first-child{border-top:0;padding-top:0}
.gpick-list strong{display:block;color:var(--ink);margin-bottom:.25rem}
.gpick-list p{margin:0 0 .35rem;font-size:.95rem}
.gpick-list a{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:700;color:var(--red-ink);text-decoration:underline;text-underline-offset:3px}
.gpick-note{margin:var(--s-2) 0 0;font-size:.85rem;color:var(--mute)}

/* Bảng màu keo chà ron tương tác (trang Keo chà ron) */
.cchart{background:var(--bg-2);padding:var(--s-5) 0}
.cc-lead{margin:0 0 var(--s-3);color:var(--mute)}
.cc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);align-items:start}
@media (min-width:60rem){.cc-grid{grid-template-columns:minmax(0,4.9fr) minmax(0,7.1fr)}}
.cc-preview{--j:4.48px;--cx:4;--cy:2.4;--tile:#ecebe7;aspect-ratio:5/3;border:2px solid var(--grout);background-color:var(--tile);background-image:linear-gradient(to right,var(--grout) var(--j),transparent var(--j)),linear-gradient(to bottom,var(--grout) var(--j),transparent var(--j)),var(--tile-img,none);background-size:calc(100%/var(--cx)) 100%,100% calc(100%/var(--cy)),calc(100%/var(--cx)) calc(100%/var(--cy))}
.cc-now{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;justify-content:space-between;margin:var(--s-2) 0}
.cc-now strong{display:block;font-size:1.4rem;line-height:1.2;color:var(--ink)}
.cc-now small{color:var(--mute)}
.cc-add[aria-pressed=true]{background:var(--cement);border-color:var(--cement)}
.cc-ctl{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-3)}
.cc-seg{display:inline-flex;flex-wrap:wrap;gap:.4rem;max-width:100%}
.cc-seg button,.cc-chips button{font:inherit;font-weight:600;font-size:.92rem;min-height:2.75rem;padding:.5rem 1rem;color:var(--ink);background:transparent;border:0;cursor:pointer;transition:background-color 160ms ease,color 160ms ease}
.cc-seg button{border:1px solid var(--ink)}
.cc-seg button[aria-pressed=true],.cc-chips button[aria-pressed=true]{background:var(--cement);color:#fff}
.cc-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s-3)}
.cc-chips[hidden]{display:none}
.cc-chips button{border:1px solid var(--ink)}
.cc-sel-h{font-size:1.05rem;margin:0 0 .5rem}
.cc-sel{list-style:none;margin:0 0 var(--s-2);padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.cc-sel button{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;padding:.3rem .8rem;font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);background:#fff;border:1px solid #c3c8cf;cursor:pointer}
.cc-sel i{width:1rem;height:1rem;border:1px solid rgba(0,0,0,.25)}
.cc-sel button::after{content:"\00d7";font-size:1.1rem;line-height:1;color:var(--mute)}
.cc-empty{margin:0 0 var(--s-2);color:var(--mute)}
.cc-empty[hidden]{display:none}
.cc-note{margin:var(--s-3) 0 0;font-size:.82rem;color:var(--mute)}
.cc-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(6.2rem,1fr))}
.cc-list li[hidden]{display:none}
.cc-sw{display:flex;flex-direction:column;width:100%;height:100%;padding:0;font:inherit;text-align:left;background:#f5f3f0;border:2px solid #d4d1cc;cursor:pointer;position:relative}
.cc-sw[aria-pressed=true]{border-color:var(--ink)}
.cc-chip{display:block;height:3rem}
.cc-lbl{display:block;padding:.4rem .5rem;font-size:.82rem;font-weight:700;line-height:1.25;color:var(--ink);min-height:2.6rem}
.cc-sw.on::after{content:"\2713";position:absolute;top:.3rem;right:.3rem;width:1.4rem;height:1.4rem;display:grid;place-items:center;font-size:.9rem;font-weight:800;color:#fff;background:var(--red);border-radius:50%}
.cc-sw:focus-visible,.cc-seg button:focus-visible,.cc-chips button:focus-visible,.cc-sel button:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* Trang Keo chà ron: lưới thẻ liền khung, nút lọc vuông, thông số từng dòng */
.chips-sq{gap:.6rem}
.chips-sq .chip-f{border-radius:0;border:1px solid var(--ink);font-size:.95rem}
.pgrid-j{gap:0;border-top:1px solid var(--ink);border-left:1px solid var(--ink);grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.pgrid-j .pcard-d{border:0;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);border-radius:0;box-shadow:none;background:#f5f3f0}
.pgrid-j .pcard-d-img{border-bottom:1px solid var(--ink)}
.pgrid-j .pcard-d-foot{border-top:1px solid #c9ced4}
.pcard-g-spec{display:grid;gap:.15rem;margin:0 0 .8rem;font-size:.85rem;color:var(--text)}
.pgrid-j .pcard-d-std{text-transform:none;letter-spacing:0;font-size:.95rem}

/* Vị trí lớp cách âm trong hệ sàn */
.apos{background:var(--bg-2);padding:var(--s-5) 0}
.apos-lead{margin:0 0 var(--s-4);color:var(--mute)}
.apos-steps{list-style:none;margin:0 0 var(--s-3);padding:0;display:grid;gap:var(--s-2);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.apos-steps li{display:flex;flex-direction:column;gap:.35rem;padding:var(--s-3);background:#f5f3f0;border:1px solid var(--ink);color:var(--text)}
.apos-steps strong{font-size:1.15rem;color:var(--ink);line-height:1.25}
.apos-steps li.on{background:var(--cement);color:#fff;border-left:8px solid var(--red)}
.apos-steps li.on strong{color:#fff}
.apos-n{display:grid;place-items:center;width:2.2rem;height:2.2rem;margin-bottom:.6rem;font-weight:800;color:var(--ink);background:#fff;border:1px solid var(--ink)}
.apos-figs{display:grid;gap:var(--s-2);grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));margin-bottom:var(--s-3)}
.apos-figs figure{margin:0;padding:var(--s-3);background:#f5f3f0;border:1px solid var(--ink)}
.apos-figs svg{display:block;width:100%;height:auto;margin-bottom:var(--s-2)}
.apos-t text{font:600 19px var(--sans);fill:var(--ink);letter-spacing:.01em}
.apos-figs figcaption{display:grid;gap:.2rem;font-size:.9rem;color:var(--mute)}
.apos-figs figcaption strong{color:var(--ink);font-size:.95rem}
.apos-note{margin:0;font-size:.85rem;color:var(--mute)}

.apick-grid{display:grid;gap:var(--s-4);align-items:start}
@media (min-width:56rem){.apick-grid{grid-template-columns:5fr 7fr}}
.apick-form p{margin:0 0 var(--s-3)}
.apick-form label{display:block;margin-bottom:.6rem;font-weight:800;font-size:1.1rem;color:#fff}
.apick-form select{width:100%;min-height:3.5rem;font:inherit;font-size:1.05rem;padding:.8rem 1rem;color:var(--ink);background:#fff;border:0;border-radius:0}
.apick-form select:focus-visible{outline:3px solid #ffb4b9;outline-offset:2px}
.apick-r{color:#145f8f;font-weight:600}
.apick-help{margin-top:var(--s-2)}

.gpick-list p a{display:inline;min-height:0}
.apick .gpick-list strong{display:inline}

.apick-with{margin:.3rem 0 0}

.contact-list-ico{list-style:none;padding:0;gap:.6rem}
.contact-list-ico li{display:flex;align-items:center;gap:.7rem}
.contact-list-ico .ico{flex:none}

/* Trình chiếu ảnh công trình trên trang chủ */
.banner-box{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--cement)}
.banner-slides{display:grid}
.banner-slide{grid-area:1/1;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.banner-slide.on{opacity:1;visibility:visible;transition:opacity .5s ease}
.banner-slide img{display:block;width:100%;height:auto;aspect-ratio:1584/672;object-fit:cover}
.banner-cap{padding:var(--s-3);background:var(--cement);color:#fff}
.banner-cap h2{margin:0 0 .4rem;color:#fff;font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem)}
.banner-cap p{margin:0 0 var(--s-2);color:#fff;max-width:34rem}
.banner-ctl{display:flex;align-items:center;gap:.5rem;padding:0 var(--s-3) var(--s-3);background:var(--cement)}
.banner-ctl[hidden]{display:none}
.banner-pp,.banner-dot{display:inline-grid;place-items:center;min-width:2.75rem;min-height:2.75rem;padding:0;color:#fff;background:transparent;border:0;cursor:pointer}
.banner-pp{border:1.5px solid rgba(255,255,255,.7);border-radius:var(--pill)}
.banner-pp .i-play,.banner-pp[data-paused] .i-pause{display:none}
.banner-pp[data-paused] .i-play{display:block}
.banner-dot::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:rgba(255,255,255,.45);transition:background-color 160ms ease,transform 160ms var(--ease)}
.banner-dot[aria-current=true]::before{background:#fff;transform:scale(1.25)}
.banner-pp:focus-visible,.banner-dot:focus-visible{outline:3px solid #ffb4b9;outline-offset:2px}
@media (min-width:56rem){
	.banner-cap{position:absolute;left:var(--s-4);bottom:var(--s-4);max-width:28rem;padding:var(--s-3);background:rgba(98,103,109,.92);border-radius:var(--r-lg)}
	.banner-slide{position:relative}
	.banner-ctl{position:absolute;right:var(--s-3);bottom:var(--s-3);padding:.25rem .5rem;background:rgba(98,103,109,.88);border-radius:var(--pill)}
}
@media (prefers-reduced-motion:reduce){.banner-slide,.banner-slide.on{transition:none}}
.pgrid-d,.pgrid{grid-auto-rows:1fr}

/* Dòng giới thiệu ngành hàng cạnh logo. Thanh đầu trang rộng hơn khung nội dung để đủ chỗ cho logo, dòng chữ và menu. */
.site-header .bar{width:calc(100% - 2 * var(--gutter))}
.brand-wrap{display:flex;align-items:center;gap:.8rem;min-width:0;flex:none}
.brand-tag{display:none;margin:0;padding-left:.8rem;border-left:1.5px solid var(--ink);font:700 .82rem/1.35 "Times New Roman",Times,Georgia,serif;color:var(--ink);max-width:none}
.brand-tag span{display:block;white-space:nowrap}
@media (min-width:40rem) and (max-width:63.99rem){.brand-tag{display:block}}
@media (min-width:85rem){.brand-tag{display:block}}
@media (min-width:85rem) and (max-width:89.99rem){.nav>ul>li>a{padding:.6rem .65rem}.nav{gap:var(--s-2)}}

/* Thanh menu chính cân đối: logo bên trái, các mục menu nằm giữa, số điện thoại, nút báo giá và chọn ngôn ngữ bên phải */
@media (min-width:64rem){
	.bar{gap:var(--s-3)}
	.brand-wrap{order:0}
	.nav{display:contents}
	.nav>ul{order:1;margin-inline:auto;gap:.35rem}
	.nav>ul>li>a{padding:.6rem 1.05rem}
	.nav-tools{order:2}
	.head-tools{order:3}
}
@media (min-width:85rem) and (max-width:89.99rem){.nav>ul>li>a{padding:.6rem .9rem}}

/* Biểu tượng liên hệ */
.ico{flex:none;width:1.2rem;height:1.2rem}
.ico-line{display:flex;align-items:flex-start;gap:.6rem}
.foot-contact a.ico-line{align-items:center;min-height:2.75rem}
.ico-line .ico{margin-top:.15rem}
.foot-contact a.ico-line .ico{margin-top:0}
.info-list li>span{display:flex;align-items:center;gap:.5rem}
.info-list li>span .ico{color:var(--red)}
.contact-list a .ico,.quick a .ico{margin-right:.45rem}
.quick a{display:flex;align-items:center;justify-content:center}
.contact-list a{display:inline-flex;align-items:center}

.cc-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.4rem,1fr));gap:.4rem;width:100%}
.cc-tiles button{display:flex;flex-direction:column;align-items:center;gap:.2rem;width:auto;padding:.2rem;font:inherit;font-size:.7rem;font-weight:600;line-height:1.15;text-align:center;color:var(--ink);background:#fff;border:2px solid #c3c8cf;cursor:pointer}
.cc-tiles img{display:block;width:100%;height:auto;aspect-ratio:1}
.cc-tiles button[aria-pressed=true]{border-color:var(--red)}
.cc-tiles button:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.cc-send[hidden]{display:none}

.cc-ctl{flex-direction:column;align-items:flex-start;gap:.4rem}
.cc-ctl .cc-seg{margin-bottom:var(--s-2)}
.cc-cap{margin:0;font-weight:700;font-size:.95rem;color:var(--ink)}

.pcard-d-stdl{text-transform:none;letter-spacing:0}
.pcard-d-pack:has(+.pcard-d-pack){margin-bottom:.2rem}
.cchart-sm .cc-grid{grid-template-columns:minmax(0,1fr)}
.cchart-sm .cc-sw{cursor:default}
@media (min-width:48rem) and (max-width:59.99rem){.cchart:not(.cchart-sm) .cc-side{width:70%}} /* cột bên trái (xem trước, kích thước, mẫu gạch) thu còn 70%; khung xem trước và hàng mẫu gạch cùng chiều rộng */
.gc-uw{display:block;margin-top:.15rem;font-size:.85rem;font-weight:600;color:var(--mute);text-align:right}

/* Menu chính có 6 mục (thêm Tính định mức, Chọn màu ron): thu gọn khoảng cách và ẩn số điện thoại trên thanh menu khi màn hình chưa đủ rộng */
@media (min-width:64rem) and (max-width:99.99rem){
	.tel{display:none}
	.bar{gap:var(--s-2)}
	.nav>ul{gap:.1rem}
	.nav>ul>li>a{padding:.55rem .55rem;font-size:.88rem}
	.nav .btn{padding:.6rem 1.1rem}
}

/* Menu chính nổi bật: chữ đậm, gạch chân đỏ chạy ra từ giữa khi rê chuột hoặc ở mục của trang đang xem, danh sách xổ xuống bo tròn có vạch đỏ */
.nav>ul>li>a{position:relative;font-weight:700;letter-spacing:.005em;background:transparent}
.nav>ul>li>a::after{content:"";position:absolute;left:50%;bottom:.15rem;width:calc(100% - 1.1rem);height:3px;border-radius:3px;background:var(--red);transform:translateX(-50%) scaleX(0);transform-origin:center;transition:transform 260ms var(--ease)}
.nav>ul>li>a:hover,.nav>ul>li>a:focus-visible,.nav>ul>li.has-sub:focus-within>a,.nav>ul>li>a.is-current{background:transparent;color:var(--red)}
.nav>ul>li>a:hover::after,.nav>ul>li>a:focus-visible::after,.nav>ul>li.has-sub:hover>a::after,.nav>ul>li.has-sub:focus-within>a::after,.nav>ul>li>a.is-current::after{transform:translateX(-50%) scaleX(1)}
.sub{border-top:3px solid var(--red);box-shadow:0 18px 40px -18px rgba(16,19,23,.35)}
.sub a{font-weight:600;transition:background-color 160ms ease,color 160ms ease,padding-left 200ms var(--ease)}
.sub a:hover,.sub a:focus-visible{background:var(--tint);color:var(--red);padding-left:1.15rem}
@media (min-width:85rem){.nav>ul>li.has-sub>a{padding-right:1.5rem}.nav>ul>li.has-sub>a::before{content:"";position:absolute;right:.7rem;top:50%;width:.4rem;height:.4rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform 220ms var(--ease)}.nav>ul>li.has-sub:hover>a::before,.nav>ul>li.has-sub:focus-within>a::before{transform:translateY(-30%) rotate(225deg)}}
@media (max-width:63.99rem){.sub{border:0;box-shadow:none}.sub a:hover,.sub a:focus-visible{padding-left:.9rem}.nav>ul>li>a::after{display:none}.nav>ul>li>a.is-current{color:var(--red);box-shadow:inset 3px 0 0 var(--red);border-radius:0;padding-left:.8rem}}
@media (prefers-reduced-motion:reduce){.nav>ul>li>a::after,.nav>ul>li.has-sub>a::before,.sub a{transition:none}}