/* Web Bradwell Acoustic – giao diện (Khoa C1, 06/11/2026). Màu, chữ theo mẫu Vy (CEO duyệt); bố cục, hiệu ứng gần web Âu Viễn theo lời anh (Mai chuyển 05/11 tối). */
:root{--kem:#F5F1EB;--kem2:#EAE2D6;--than:#1D1B18;--go:#8A6A4B;--vang:#F7D21E;--xam:#6E665D;--trang:#fff;--vien:#E2D9CC}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',sans-serif;color:var(--than);background:var(--kem);line-height:1.6;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,.m{font-family:Montserrat,sans-serif}
h1{font-weight:800;font-size:clamp(28px,4.4vw,52px);line-height:1.1}
h2{font-weight:800;font-size:clamp(22px,3vw,34px);line-height:1.18}
h3{font-weight:700;font-size:18px;line-height:1.3}
.khung{max-width:1240px;margin:0 auto;padding:0 24px}
.nhan{font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--go);font-weight:600}
.vach{width:48px;height:5px;background:var(--vang);margin:12px 0 16px}
.giua{text-align:center}.giua .vach{margin-left:auto;margin-right:auto}
.nut{display:inline-flex;align-items:center;gap:8px;background:var(--vang);color:var(--than);font-weight:700;padding:13px 22px;border-radius:4px;border:0;font:inherit;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s}
.nut:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.15)}
.nut.vien{background:transparent;border:1.5px solid currentColor}
.nut.toi{background:var(--than);color:#fff}
.hang-nut{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
section.k{padding:76px 0}
section.trang{background:#fff}
/* thanh trên cùng */
.tren{background:var(--than);color:#e9e3da;font-size:13px}
.tren .khung{display:flex;align-items:center;gap:22px;height:40px}
.tren a:hover{color:var(--vang)}
.tren .nut{margin-left:auto;padding:6px 14px;font-size:13px}
/* đầu trang dính */
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);box-shadow:0 1px 0 var(--vien)}
header .khung{display:flex;align-items:center;gap:24px;height:72px}
.logo{display:flex;align-items:center;gap:10px}.logo svg{width:36px;height:27px}.logo b{font-family:Montserrat;font-weight:800;letter-spacing:.16em;font-size:15px}
.logo small{display:block;font-size:10px;letter-spacing:.3em;color:var(--go);font-weight:600}
nav.menu{display:flex;gap:4px;margin-left:auto;font-weight:600;font-size:15px;height:100%}
nav.menu > div{position:static;display:flex;align-items:center}
nav.menu > div > a{padding:0 14px;height:100%;display:flex;align-items:center;border-bottom:3px solid transparent}
nav.menu > div > a:hover,nav.menu > div > a[aria-current]{color:var(--go);border-bottom-color:var(--vang)}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.12);border-top:1px solid var(--vien);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s}
nav.menu > div:hover .mega,nav.menu > div:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega .khung{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;height:auto;padding:22px 24px 26px}
.mega a{display:block;font-size:14px;font-weight:600}
.mega a .a{aspect-ratio:4/3;background:var(--kem2) center/cover;margin-bottom:8px;transition:transform .35s}
.mega a:hover .a{transform:scale(1.03)}.mega a:hover{color:var(--go)}
header .nut{padding:10px 16px;font-size:14px}
.mo-menu{display:none;margin-left:auto;background:none;border:0;font-size:28px;cursor:pointer}
/* ảnh trượt đầu trang chủ */
.truot{position:relative;height:min(78vh,680px);min-height:460px;overflow:hidden;color:#fff;background:var(--than)}
.truot .tam{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;background-size:cover;background-position:center}
.truot .tam.dang{opacity:1;z-index:1}
.truot .tam:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,27,24,.86) 0%,rgba(29,27,24,.5) 48%,rgba(29,27,24,.05) 80%)}
.truot .chu{position:absolute;left:0;right:0;bottom:90px;z-index:2}
.truot .chu .khung > *{max-width:620px}
.truot .tam .chu{transform:translateY(20px);transition:transform 1.1s ease}.truot .tam.dang .chu{transform:none}
.truot p{font-size:18px;color:#e9e3da;margin:16px 0 24px}
.truot .nhan{color:var(--vang)}
.truot .nut.vien{color:#fff}
.cham{position:absolute;z-index:3;left:0;right:0;bottom:30px;display:flex;justify-content:center;gap:10px}
.cham button{width:34px;height:4px;border:0;background:rgba(255,255,255,.45);cursor:pointer}.cham button.dang{background:var(--vang)}
/* con số */
.so{background:#fff}
.so .khung{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.so .khung > div{padding:34px 24px;border-right:1px solid var(--vien)}.so .khung > div:last-child{border-right:0}
.so b{display:block;font-family:Montserrat;font-weight:800;font-size:clamp(34px,4vw,50px);color:var(--go);line-height:1}
.so span{display:block;font-weight:700;margin-top:8px}.so p{font-size:14px;color:var(--xam);margin-top:4px}
/* lưới thẻ */
.luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.luoi.ba{grid-template-columns:repeat(3,1fr)}
.the{background:#fff;display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s}
.the:hover{box-shadow:0 14px 34px rgba(29,27,24,.12);transform:translateY(-3px)}
.the .c{padding:16px 18px 20px}.the p{font-size:14px;color:var(--xam);margin-top:6px}
.the .xem{display:inline-block;margin-top:12px;font-size:14px;font-weight:700;color:var(--go)}
.khung-anh{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--kem2)}
.khung-anh img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease,opacity .5s ease}
.the:hover .khung-anh img,a:hover > .khung-anh img{transform:scale(1.06)}
.doi-anh img + img{position:absolute;inset:0;opacity:0}
.the:hover .doi-anh img + img{opacity:1}
/* giới thiệu, khối ảnh – chữ */
.gt{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.gt img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gt p{color:var(--xam);margin-top:14px;font-size:17px}
.khoi-anh{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:start;margin:36px 0}
.khoi-anh img{width:100%;aspect-ratio:4/3;object-fit:cover}
.khoi-anh h2{margin-top:0!important}
/* ưu điểm (nền tối) */
.toi-nen{background:var(--than);color:#fff}.toi-nen .nhan{color:var(--vang)}
.ud{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#3a3631;margin-top:28px}
.ud div{background:var(--than);padding:24px}.ud b{display:block;font-family:Montserrat;font-size:16px;margin-bottom:6px;color:var(--vang)}.ud p{font-size:14px;color:#cfc8bd}
/* lối vào */
.loi{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.loi a{background:#fff;display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px;border-top:5px solid var(--vang);transition:box-shadow .3s}
.loi a:hover{box-shadow:0 12px 30px rgba(29,27,24,.12)}
.loi .khung-anh{aspect-ratio:1}.loi p{font-size:14px;color:var(--xam);margin-top:4px}.loi span{font-size:14px;font-weight:700;color:var(--go)}
/* công trình theo không gian */
.ct{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ct a{position:relative;aspect-ratio:3/4;overflow:hidden;color:#fff;display:flex;align-items:flex-end;padding:20px;background:var(--than)}
.ct a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ct a:hover img{transform:scale(1.07)}
.ct a:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,0) 60%)}
.ct a > div{position:relative;z-index:2}.ct .xem{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;border:1.5px solid #fff;padding:6px 14px;transition:.3s}
.ct a:hover .xem{background:var(--vang);border-color:var(--vang);color:var(--than)}
/* vì sao */
.vs{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:28px}
.vs div{background:#fff;padding:24px 20px;border-bottom:4px solid var(--vang)}
.vs i{font-style:normal;font-family:Montserrat;font-weight:800;font-size:30px;color:var(--kem2)}
.vs b{display:block;margin:6px 0}.vs p{font-size:14px;color:var(--xam)}
/* dải trang (trang trong) */
.dau-trang{position:relative;color:#fff;padding:70px 0 54px;background:var(--than) center/cover}
.dau-trang:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,27,24,.88),rgba(29,27,24,.45))}
.dau-trang .khung{position:relative}
.dau-trang p.gioi{max-width:720px;color:#e9e3da;margin-top:12px;font-size:17px}
.duong{font-size:13px;color:#d9d1c4;margin-bottom:14px}.duong a{color:#fff}.duong a:hover{color:var(--vang)}.duong span{margin:0 8px;opacity:.6}
.duong.sang{color:var(--xam)}.duong.sang a{color:var(--go)}
/* nội dung bài */
.noi{padding:52px 0 64px}
.noi .hep{max-width:900px}
.noi h2{margin:44px 0 4px}.noi h2:after{content:"";display:block;width:48px;height:5px;background:var(--vang);margin:12px 0 16px}
.noi h3{margin:24px 0 8px}
.noi p{margin:12px 0}.noi ul,.noi ol{margin:12px 0 12px 22px}.noi li{margin:6px 0}
.noi a:not(.nut):not(.the):not(.ko){color:var(--go);text-decoration:underline;text-underline-offset:3px}
.noi figure{margin:24px 0}.noi figure img{width:100%;height:auto}.noi figcaption{font-size:13px;color:var(--xam);margin-top:6px}
.bang{overflow-x:auto;margin:16px 0}
.bang table{border-collapse:collapse;width:100%;background:#fff;font-size:15px}
.bang th,.bang td{padding:11px 14px;border-bottom:1px solid var(--kem2);text-align:left;vertical-align:top}
.bang th{background:var(--than);color:#fff;font-weight:600}
.bang tr:nth-child(even) td{background:#FBF9F6}
.bang img{width:64px;height:48px;object-fit:cover}
details{background:#fff;padding:18px 22px;margin-bottom:10px;border-left:4px solid var(--vang)}
summary{font-weight:700;cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}summary::after{content:"+";float:right;color:var(--go);font-size:20px;line-height:1}
details[open] summary::after{content:"–"}details p{color:var(--xam)}
/* trang nhóm hàng */
.nhom-trang{display:grid;grid-template-columns:270px 1fr;gap:36px;align-items:start}
.cot-trai{position:sticky;top:96px;background:#fff}
.cot-trai b{display:block;background:var(--than);color:#fff;padding:14px 18px;font-family:Montserrat;letter-spacing:.06em}
.cot-trai a{display:block;padding:12px 18px;border-bottom:1px solid var(--kem2);font-weight:600;font-size:15px;transition:.2s}
.cot-trai a:hover{background:var(--kem);padding-left:24px}
.cot-trai a[aria-current]{background:var(--vang)}
.sp-the{display:grid;grid-template-columns:1fr 1fr;gap:26px;background:#fff;padding:22px;margin-bottom:24px;transition:box-shadow .3s}
.sp-the:hover{box-shadow:0 14px 34px rgba(29,27,24,.1)}
.sp-the .anh{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sp-the .anh .khung-anh:first-child{grid-column:1/-1}
.sp-the h3{font-size:21px}.sp-the h3 a:hover{color:var(--go)}
.dau-cham{list-style:none;margin:14px 0 18px}
.dau-cham li{position:relative;padding-left:28px;margin:8px 0;font-size:15px}
.dau-cham li:before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--vang);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
/* trang sản phẩm */
.sp{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.sp > *,.nhom-trang > *,.gt > *,.bg > *,.khoi-anh > *,.sp-the > *{min-width:0} /* dải ảnh nhỏ không đẩy khung rộng ra (lỗi tràn ngang trên điện thoại 05/11) */
.bo-anh .lon{position:relative;aspect-ratio:4/3;overflow:hidden;background:#fff;cursor:zoom-in}
.bo-anh .lon img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bo-anh .lon:hover img{transform:scale(1.04)}
.bo-anh .nho{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.bo-anh .nho button{flex:0 0 92px;aspect-ratio:4/3;border:2px solid transparent;padding:0;background:none;cursor:pointer;opacity:.7;transition:.2s}
.bo-anh .nho button.dang,.bo-anh .nho button:hover{border-color:var(--vang);opacity:1}
.bo-anh .nho img{width:100%;height:100%;object-fit:cover}
.sp-tt .phu{color:var(--xam);font-style:italic;margin-top:6px}
.sp-tt .nhom-sp{margin-top:10px;font-size:14px}.sp-tt .nhom-sp a{color:var(--go);font-weight:700}
.lien-he-nhanh{background:#fff;padding:18px 20px;margin-top:20px;border-top:4px solid var(--vang)}
.lien-he-nhanh a.so-dt{display:block;font-family:Montserrat;font-weight:800;font-size:22px;margin:4px 0 12px}
.mau{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin:16px 0}
.mau figure{margin:0!important;background:#fff;padding:6px;text-align:center;font-size:12px;font-weight:600;cursor:zoom-in;transition:box-shadow .2s}
.mau figure:hover{box-shadow:0 6px 16px rgba(0,0,0,.12)}
.mau img{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:6px}
.anh-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.anh-luoi img{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in;transition:opacity .2s}.anh-luoi img:hover{opacity:.88}
/* form báo giá */
.bg{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:start}
form.bao-gia{background:#fff;padding:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;box-shadow:0 10px 30px rgba(29,27,24,.06)}
form.bao-gia label{font-size:13px;font-weight:600;display:flex;flex-direction:column;gap:6px}
form.bao-gia .ca{grid-column:1/-1}
form.bao-gia input:not([type=checkbox]),form.bao-gia select,form.bao-gia textarea{width:100%;min-width:0;font:inherit;font-size:15px;padding:11px 12px;border:1px solid #d8d0c4;background:var(--kem);border-radius:3px}
.dong-y{flex-direction:row!important;align-items:flex-start;font-weight:400!important;font-size:13px!important;color:var(--xam)}
.dong-y input{margin-top:3px}
.tb{grid-column:1/-1;padding:12px 14px;font-size:14px;display:none}
.tb.loi{display:block;background:#fdecea;color:#8a1c12}.tb.dat{display:block;background:#eaf6ee;color:#1d5e33}
.an{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* chân trang */
footer{background:#141311;color:#cfc8bd;padding:56px 0 0;font-size:14px}
footer .cot{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1.2fr;gap:28px}
footer b{color:#fff;display:block;margin-bottom:12px;font-family:Montserrat;letter-spacing:.04em}
footer a{display:block;margin:6px 0}footer a:hover{color:var(--vang)}
footer .day{border-top:1px solid #2c2925;margin-top:40px;padding:18px 0 96px;font-size:12px;opacity:.8}
/* nút nổi bên phải */
.noi-nut{position:fixed;right:16px;bottom:22px;display:flex;flex-direction:column;gap:10px;z-index:35}
.noi-nut a,.noi-nut button{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;box-shadow:0 6px 18px rgba(0,0,0,.25);border:0;cursor:pointer;transition:transform .2s}
.noi-nut a:hover,.noi-nut button:hover{transform:scale(1.08)}
.zalo{background:#0068FF}.goi{background:#1f9d55}.thu{background:var(--go)}.len{background:var(--than);opacity:0;pointer-events:none}.len.hien-ra{opacity:1;pointer-events:auto}
/* hộp phóng ảnh */
.hop-anh{position:fixed;inset:0;z-index:60;background:rgba(10,9,8,.92);display:flex;align-items:center;justify-content:center;padding:40px 70px}
.hop-anh img{max-width:100%;max-height:100%;object-fit:contain}
.hop-anh button{position:absolute;background:none;border:0;color:#fff;font-size:42px;cursor:pointer;padding:10px 16px}
.hop-anh .dong{top:10px;right:14px}.hop-anh .truoc{left:10px}.hop-anh .sau{right:10px}
/* hiện dần khi cuộn (web.js gắn lớp; không có JS thì vẫn hiện đủ) */
.hien{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.hien.ro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hien{opacity:1;transform:none;transition:none}.truot .tam{transition:none}}
/* cookie, xem trước */
.cookie{position:fixed;left:16px;right:96px;bottom:16px;z-index:40;max-width:780px;background:var(--than);color:#fff;padding:14px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;box-shadow:0 8px 24px rgba(0,0,0,.3);font-size:14px}
.cookie[hidden]{display:none}
.cookie p{flex:1 1 260px;margin:0}.cookie a{color:var(--vang);text-decoration:underline}
.cookie button{font:inherit;font-weight:700;flex:0 0 112px;width:112px;padding:10px 0;border:1.5px solid #fff;background:transparent;color:#fff;border-radius:4px;cursor:pointer}
.xem-truoc{background:var(--vang);color:var(--than);text-align:center;font-size:13px;font-weight:600;padding:6px}
nav.menu > div > a,header .nut,.tren a{white-space:nowrap}
@media (max-width:1180px){nav.menu > div > a{padding:0 9px;font-size:14px}header .khung{gap:14px}}
@media (max-width:1000px){
 header > .khung > .nut{display:none}
 .sp{grid-template-columns:1fr}.nhom-trang{grid-template-columns:220px 1fr}.sp-the{grid-template-columns:1fr}
 .mega .khung{grid-template-columns:repeat(3,1fr)}.luoi,.ct{grid-template-columns:repeat(2,1fr)}.vs{grid-template-columns:repeat(2,1fr)}
 footer .cot{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
 .tren .an-dt{display:none}
 nav.menu,header > .khung > .nut{display:none}.mo-menu{display:block}
 nav.menu.mo{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;height:auto;background:#fff;border-bottom:1px solid var(--vien);padding:6px 24px 16px;max-height:80vh;overflow:auto}
 nav.menu.mo > div{display:block}nav.menu.mo > div > a{height:auto;padding:12px 0;border-bottom:1px solid var(--kem2)}
 .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;display:none}
 nav.menu.mo > div.mo-con .mega{display:block}
 .mega .khung{grid-template-columns:1fr 1fr;padding:10px 0}
 .so .khung,.luoi,.luoi.ba,.loi,.ud,.gt,.bg,.sp,.nhom-trang,.sp-the,.khoi-anh{grid-template-columns:1fr}
 .so .khung > div{border-right:0;border-bottom:1px solid var(--vien)}
 .ct,.ud,.vs{grid-template-columns:1fr 1fr}.anh-luoi{grid-template-columns:1fr 1fr}
 .cot-trai{position:static}
 .truot{height:560px;min-height:0}.truot .chu{bottom:56px}.truot h1{font-size:30px}.truot h2{font-size:26px!important}
 .truot p{font-size:15px;margin:10px 0 16px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
 .truot .nut{padding:11px 16px;font-size:14px}
 section.k{padding:52px 0}.noi{padding:32px 0 48px}
 form.bao-gia{grid-template-columns:minmax(0,1fr);padding:20px}
 .hop-anh{padding:50px 10px}
 footer .cot{grid-template-columns:1fr}
}