/* ===== Quang Hằng — giao diện cửa hàng gạch ốp lát (phong cách tham khảo Hải Linh) ===== */
:root {
  --do: #d60027;          /* màu nhấn chính */
  --do-dam: #a8001f;
  --vang: #ffcc00;
  --chu: #333;
  --chu-nhat: #777;
  --vien: #e6e6e6;
  --nen: #fff;
  --nen-xam: #f5f5f5;
  --xanh-zalo: #0068ff;
  --bo-goc: 8px;
  --rong: 1240px;
  --bong: 0 2px 10px rgba(0,0,0,.08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--nen); color: var(--chu);
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
.khung { max-width: var(--rong); margin: 0 auto; padding: 0 16px; }

/* ---------- Thanh trên cùng ---------- */
.thanh-tren { background: var(--do); color: #fff; font-size: 13px; }
.thanh-tren .khung { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 36px; }
.thanh-tren ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.thanh-tren li::before { content: "✓ "; color: var(--vang); font-weight: 700; }
.thanh-tren a { font-weight: 600; }

/* ---------- Đầu trang ---------- */
.dau-trang { background: #fff; border-bottom: 1px solid var(--vien); position: sticky; top: 0; z-index: 50; }
.dau-trang .khung { display: flex; align-items: center; gap: 24px; padding-top: 12px; padding-bottom: 12px; }
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo svg { height: 50px; width: auto; }
.logo b { display: block; font-size: 22px; line-height: 1; color: #E31E24; letter-spacing: .5px; font-weight: 800; }
.logo small { display: block; font-size: 11px; color: var(--chu-nhat); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px; }
.tim-kiem { flex: 1; display: flex; border: 2px solid var(--do); border-radius: 30px; overflow: hidden; max-width: 560px; }
.tim-kiem input { flex: 1; border: 0; padding: 10px 18px; font: inherit; outline: none; min-width: 0; }
.tim-kiem button { border: 0; background: var(--do); color: #fff; padding: 0 22px; font-weight: 600; }
.lien-he-nhanh { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.lien-he-nhanh a { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--chu-nhat); }
.lien-he-nhanh a b { display: block; color: var(--do); font-size: 16px; }
.icon-tron { width: 40px; height: 40px; border-radius: 50%; background: #fdecef; color: var(--do); display: grid; place-items: center; position: relative; flex-shrink: 0; }
.icon-tron svg { width: 20px; height: 20px; }
.so-luong { position: absolute; top: -4px; right: -4px; background: var(--do); color: #fff; font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
.nut-menu { display: none; border: 0; background: none; padding: 6px; }
.nut-menu svg { width: 28px; height: 28px; }

/* ---------- Menu chính ---------- */
.menu-chinh { background: #222; color: #fff; }
.menu-chinh > .khung > ul { list-style: none; margin: 0; padding: 0; display: flex; }
.menu-chinh li { position: relative; }
.menu-chinh > .khung > ul > li > a { display: block; padding: 12px 16px; font-weight: 600; font-size: 14px; text-transform: uppercase; }
.menu-chinh > .khung > ul > li > a:hover, .menu-chinh li.dang-chon > a { background: var(--do); }
.menu-con { display: none; position: absolute; left: 0; top: 100%; background: #fff; color: var(--chu); min-width: 230px; box-shadow: var(--bong); border-top: 3px solid var(--do); list-style: none; margin: 0; padding: 6px 0; z-index: 60; }
.menu-chinh li:hover > .menu-con { display: block; }
.menu-con a { display: block; padding: 8px 18px; font-size: 14px; }
.menu-con a:hover { background: var(--nen-xam); color: var(--do); }

/* ---------- Banner ---------- */
.banner { position: relative; overflow: hidden; border-radius: var(--bo-goc); margin-top: 16px; aspect-ratio: 1240/420; background: #111; }
.banner .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; display: flex; align-items: center; }
.banner .slide.hien { opacity: 1; z-index: 1; }
.banner .slide-nen { position: absolute; inset: 0; background: 50% 3% / 112% auto no-repeat; }
.banner .slide-nen.ghep { display: grid; grid-template-columns: repeat(4, 1fr); }
.banner .slide-nen.ghep div { background: center 70% / cover no-repeat; }
.banner .slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.05) 100%); }
.banner .noi-dung { position: relative; z-index: 2; color: #fff; padding: 0 56px; max-width: 640px; }
.banner .nhan { display: inline-block; background: var(--vang); color: #222; font-weight: 700; font-size: 13px; padding: 4px 12px; border-radius: 4px; text-transform: uppercase; }
.banner h2 { font-size: clamp(22px, 3.4vw, 42px); line-height: 1.15; margin: 14px 0 10px; }
.banner p { font-size: clamp(14px, 1.4vw, 17px); opacity: .92; margin: 0 0 20px; }
.banner .cham { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 3; }
.banner .cham button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); padding: 0; }
.banner .cham button.hien { background: #fff; width: 26px; border-radius: 5px; }

.nut { display: inline-flex; align-items: center; gap: 8px; background: var(--do); color: #fff; padding: 11px 22px; border-radius: 30px; font-weight: 600; border: 0; }
.nut:hover { background: var(--do-dam); }
.nut.vien { background: #fff; color: var(--do); border: 1.5px solid var(--do); }
.nut.vien:hover { background: var(--do); color: #fff; }
.nut.zalo { background: var(--xanh-zalo); }

/* ---------- Cam kết ---------- */
.cam-ket { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px auto; }
.cam-ket div { display: flex; align-items: center; gap: 12px; background: var(--nen-xam); border-radius: var(--bo-goc); padding: 14px 16px; }
.cam-ket svg { width: 34px; height: 34px; color: var(--do); flex-shrink: 0; }
.cam-ket b { display: block; font-size: 14px; }
.cam-ket span { font-size: 12.5px; color: var(--chu-nhat); }

/* ---------- Khối nội dung ---------- */
.khoi { margin: 36px auto; }
.tieu-de-khoi { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--vien); margin-bottom: 18px; }
.tieu-de-khoi h2 { margin: 0; font-size: 22px; text-transform: uppercase; padding-bottom: 10px; border-bottom: 3px solid var(--do); margin-bottom: -2px; }
.tieu-de-khoi p { margin: 0 0 10px; color: var(--chu-nhat); font-size: 14px; }
.tieu-de-khoi a.xem-them { color: var(--do); font-weight: 600; font-size: 14px; white-space: nowrap; padding-bottom: 10px; }

/* Cần gì hôm nay */
.can-gi { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.can-gi a { text-align: center; border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 14px 8px; transition: .2s; background: #fff; }
.can-gi a:hover { border-color: var(--do); box-shadow: var(--bong); transform: translateY(-2px); }
.can-gi .anh { width: 74px; height: 74px; margin: 0 auto 8px; border-radius: 50%; background: var(--nen-xam) center/cover; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--vien); }
.can-gi b { font-size: 14px; display: block; }
.can-gi span { font-size: 12px; color: var(--chu-nhat); }

/* Ô kích thước (giống lưới kích thước của Hải Linh) */
.o-kich-thuoc { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.o-kich-thuoc a { position: relative; border-radius: var(--bo-goc); overflow: hidden; aspect-ratio: 1; background: #ddd center/cover; display: flex; align-items: flex-end; }
.o-kich-thuoc a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.75)); transition: .2s; }
.o-kich-thuoc a:hover::after { background: linear-gradient(transparent 20%, rgba(214,0,39,.85)); }
.o-kich-thuoc b { position: relative; z-index: 1; color: #fff; padding: 10px 12px; font-size: 17px; line-height: 1.2; }
.o-kich-thuoc b small { display: block; font-size: 12px; font-weight: 400; opacity: .9; }
.o-kich-thuoc .the { position: absolute; top: 8px; right: 8px; z-index: 1; background: var(--vang); color: #222; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }

/* ---------- Thẻ sản phẩm ---------- */
.luoi-sp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.the-sp { background: #fff; border: 1px solid var(--vien); border-radius: var(--bo-goc); overflow: hidden; display: flex; flex-direction: column; transition: .2s; position: relative; }
.the-sp:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); border-color: transparent; }
.the-sp .anh { aspect-ratio: 3/4; background: var(--nen-xam); overflow: hidden; }
.the-sp .anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.the-sp:hover .anh img { transform: scale(1.05); }
.the-sp.tbvs .anh { background: #fff; }
.the-sp.tbvs .anh img { object-fit: contain; padding: 2px; }
.chi-tiet .anh-lon.tbvs { background: #fff; }
/* Phóng to soi chi tiết khi rê chuột (máy tính) */
.chi-tiet .anh-lon { position: relative; overflow: hidden; }
.chi-tiet .anh-lon img { transition: transform .12s ease-out; }
.chi-tiet .anh-lon.dang-soi img { transform: scale(2.4); cursor: zoom-in; }
.chi-tiet .nhan-anh { position: absolute; left: 10px; bottom: 10px; z-index: 2; background: rgba(0,0,0,.72); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; pointer-events: none; }
.chi-tiet .goi-y-soi { position: absolute; right: 10px; bottom: 10px; z-index: 2; background: rgba(255,255,255,.92); color: var(--chu); font-size: 12px; padding: 4px 10px; border-radius: 20px; pointer-events: none; box-shadow: var(--bong); }
.chi-tiet .anh-lon.dang-soi .goi-y-soi, .chi-tiet .anh-lon.dang-soi .nhan-anh { opacity: 0; }
.hop-anh .goi-y { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #ddd; font-size: 13px; }

/* Ô hãng thiết bị vệ sinh */
.o-hang { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.o-hang a { border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 14px 16px; background: #fff; display: flex; flex-direction: column; gap: 2px; transition: .2s; }
.o-hang a:hover { border-color: var(--do); box-shadow: var(--bong); }
.o-hang b { font-size: 20px; letter-spacing: .5px; }
.o-hang span { font-size: 12.5px; color: var(--chu-nhat); }
.o-loai { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.o-loai a { display: flex; align-items: center; gap: 8px; border: 1px solid var(--vien); border-radius: 30px; padding: 4px 14px 4px 4px; background: #fff; font-size: 14px; }
.o-loai a:hover { border-color: var(--do); color: var(--do); }
.o-loai img { width: 36px; height: 36px; border-radius: 50%; object-fit: contain; background: var(--nen-xam); }
.o-loai small { color: var(--chu-nhat); }
.the-sp .nhan-goc { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 1; }
.the-sp .nhan-goc span { background: var(--do); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 3px; }
.the-sp .nhan-goc span.xx { background: #222; }
.the-sp .thong-tin { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.the-sp h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; line-height: 1.35; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.the-sp .size { font-size: 13px; color: var(--chu-nhat); }
.the-sp .gia { color: var(--do); font-weight: 700; margin-top: 6px; }
.the-sp .hanh-dong { display: flex; gap: 6px; margin-top: auto; padding-top: 10px; }
.the-sp .hanh-dong a, .the-sp .hanh-dong button { flex: 1; text-align: center; font-size: 12.5px; font-weight: 600; padding: 7px 4px; border-radius: 4px; border: 1px solid var(--do); background: #fff; color: var(--do); }
.the-sp .hanh-dong button.da-them { background: var(--do); color: #fff; }

/* Banner giữa trang */
.banner-giua { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 36px auto; }
.banner-giua a { position: relative; border-radius: var(--bo-goc); overflow: hidden; min-height: 170px; background: #222 center/cover; color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 24px 28px; }
.banner-giua a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.8), rgba(0,0,0,.2)); }
.banner-giua a > * { position: relative; }
.banner-giua h3 { font-size: 22px; margin: 0 0 6px; }
.banner-giua p { margin: 0 0 12px; opacity: .9; font-size: 14px; }
.banner-giua span { color: var(--vang); font-weight: 600; }

/* Xu hướng tìm kiếm */
.the-tu-khoa { display: flex; flex-wrap: wrap; gap: 8px; }
.the-tu-khoa a { border: 1px solid var(--vien); border-radius: 20px; padding: 6px 14px; font-size: 13.5px; background: #fff; }
.the-tu-khoa a:hover { border-color: var(--do); color: var(--do); }

/* Showroom + bản đồ */
.showroom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; }
.the-showroom { border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 20px 22px; background: var(--nen-xam); }
.the-showroom h3 { margin: 0 0 12px; color: var(--do); font-size: 18px; }
.the-showroom p { margin: 6px 0; display: flex; gap: 8px; font-size: 14.5px; }
.the-showroom p b { min-width: 92px; color: var(--chu); }
.ban-do { border-radius: var(--bo-goc); overflow: hidden; min-height: 320px; border: 1px solid var(--vien); }
.ban-do iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* Kênh video */
.kenh { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kenh a { display: flex; align-items: center; gap: 14px; border-radius: var(--bo-goc); padding: 18px; color: #fff; }
.kenh a svg { width: 42px; height: 42px; flex-shrink: 0; }
.kenh a b { display: block; font-size: 16px; }
.kenh a span { font-size: 13px; opacity: .9; }
.kenh .yt { background: #ff0000; } .kenh .tt { background: #111; } .kenh .fb { background: #1877f2; }

/* ---------- Trang danh sách ---------- */
.duong-dan { font-size: 13px; color: var(--chu-nhat); margin: 14px auto; }
.duong-dan a:hover { color: var(--do); }
.trang-ds { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; margin-bottom: 40px; }
.bo-loc { border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 4px 16px 16px; align-self: start; position: sticky; top: 90px; }
.bo-loc h4 { margin: 14px 0 8px; font-size: 14px; text-transform: uppercase; }
.bo-loc label { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 0; cursor: pointer; }
.bo-loc label span { margin-left: auto; color: var(--chu-nhat); font-size: 12px; }
.bo-loc input { accent-color: var(--do); }
.thanh-cong-cu { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.thanh-cong-cu h1 { font-size: 22px; margin: 0; }
.thanh-cong-cu select { padding: 7px 10px; border: 1px solid var(--vien); border-radius: 4px; font: inherit; }
.trong { padding: 50px 20px; text-align: center; color: var(--chu-nhat); border: 1px dashed var(--vien); border-radius: var(--bo-goc); }
.phan-trang { display: flex; justify-content: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.phan-trang span { min-width: 24px; text-align: center; align-self: center; color: var(--chu-nhat); }
.phan-trang button { min-width: 36px; height: 36px; border: 1px solid var(--vien); background: #fff; border-radius: 4px; }
.phan-trang button.hien { background: var(--do); color: #fff; border-color: var(--do); }
.nut-loc-mobile { display: none; }

/* ---------- Chi tiết ---------- */
.chi-tiet { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.chi-tiet .anh-lon { border: 1px solid var(--vien); border-radius: var(--bo-goc); overflow: hidden; background: var(--nen-xam); cursor: zoom-in; }
.chi-tiet .anh-lon img { width: 100%; max-height: 640px; object-fit: contain; }
.chi-tiet h1 { font-size: 26px; margin: 0 0 8px; }
.chi-tiet .gia-lon { font-size: 24px; color: var(--do); font-weight: 700; margin: 12px 0; padding: 12px 16px; background: #fdecef; border-radius: var(--bo-goc); }
.bang-tt { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 14.5px; }
.bang-tt td { padding: 9px 12px; border-bottom: 1px solid var(--vien); }
.bang-tt td:first-child { color: var(--chu-nhat); width: 40%; background: var(--nen-xam); }
.nhom-nut { display: flex; gap: 10px; flex-wrap: wrap; }
.uu-dai { margin-top: 20px; border: 1px dashed var(--do); border-radius: var(--bo-goc); padding: 12px 16px; font-size: 14px; }
.uu-dai p { margin: 4px 0; }

/* ---------- Trang nội dung ---------- */
.noi-dung-trang { max-width: 900px; margin: 0 auto 50px; }
.noi-dung-trang h1 { font-size: 28px; }
.noi-dung-trang h2 { font-size: 20px; color: var(--do); margin-top: 28px; }
.bang-cty { width: 100%; border-collapse: collapse; }
.bang-cty td { padding: 10px 14px; border: 1px solid var(--vien); }
.bang-cty td:first-child { background: var(--nen-xam); font-weight: 600; width: 34%; }

/* Danh sách báo giá */
.ds-bao-gia { border: 1px solid var(--vien); border-radius: var(--bo-goc); }
.ds-bao-gia .dong { display: grid; grid-template-columns: 70px 1fr 130px 40px; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--vien); }
.ds-bao-gia .dong img { width: 70px; height: 90px; object-fit: cover; border-radius: 4px; }
.ds-bao-gia input[type=number] { width: 100%; padding: 6px; border: 1px solid var(--vien); border-radius: 4px; font: inherit; }
.ds-bao-gia .xoa { border: 0; background: none; color: var(--chu-nhat); font-size: 20px; }
.form-bao-gia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.form-bao-gia input, .form-bao-gia textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--vien); border-radius: 4px; font: inherit; }
.form-bao-gia textarea { grid-column: 1 / -1; min-height: 80px; }

/* ---------- Chân trang ---------- */
.chan-trang { background: #1c1c1c; color: #cfcfcf; margin-top: 50px; font-size: 14px; }
.chan-trang .dang-ky { background: var(--do); color: #fff; }
.chan-trang .dang-ky .khung { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.chan-trang .dang-ky b { font-size: 18px; }
.chan-trang .mxh { display: flex; gap: 10px; }
.chan-trang .mxh a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; }
.chan-trang .mxh a:hover { background: #fff; color: var(--do); }
.chan-trang .mxh svg { width: 19px; height: 19px; }
.chan-trang .cot { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 30px; padding: 34px 16px; }
.chan-trang h4 { color: #fff; text-transform: uppercase; font-size: 14px; margin: 0 0 14px; }
.chan-trang ul { list-style: none; padding: 0; margin: 0; }
.chan-trang li { margin: 7px 0; }
.chan-trang a:hover { color: #fff; }
.chan-trang .cty b { color: #fff; }
.chan-trang .cty p { margin: 6px 0; }
.chan-trang .ban-quyen { border-top: 1px solid #333; text-align: center; padding: 14px; font-size: 12.5px; color: #8a8a8a; }

/* ---------- Nút nổi ---------- */
.nut-noi { position: fixed; right: 16px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 90; }
.nut-noi a { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); position: relative; }
.nut-noi a svg { width: 26px; height: 26px; }
.nut-noi .goi { background: var(--do); animation: rung 2s infinite; }
.nut-noi .zalo { background: var(--xanh-zalo); font-weight: 800; font-size: 13px; }
.nut-noi .mess { background: #1877f2; }
.nut-noi a span { position: absolute; right: 62px; background: #222; color: #fff; font-size: 12.5px; padding: 4px 10px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: .2s; }
.nut-noi a:hover span { opacity: 1; }
@keyframes rung { 0%,100% { box-shadow: 0 0 0 0 rgba(214,0,39,.6); } 50% { box-shadow: 0 0 0 12px rgba(214,0,39,0); } }

/* Phóng to ảnh */
.hop-anh { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 100; display: none; place-items: center; padding: 20px; cursor: zoom-out; }
.hop-anh.hien { display: grid; }
.hop-anh img { max-height: 92vh; max-width: 96vw; object-fit: contain; }

.thong-bao { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(80px); background: #222; color: #fff; padding: 10px 18px; border-radius: 6px; z-index: 110; transition: .3s; font-size: 14px; }
.thong-bao.hien { transform: translateX(-50%) translateY(0); }

/* ---------- Gợi ý tìm kiếm ---------- */
.tim-kiem-boc { position: relative; flex: 1; max-width: 560px; }
.tim-kiem-boc .tim-kiem { max-width: none; }
.goi-y-tim { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border-radius: var(--bo-goc); box-shadow: 0 10px 30px rgba(0,0,0,.18); z-index: 80; overflow: hidden; display: none; }
.goi-y-tim.hien { display: block; }
.goi-y-tim a { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--nen-xam); }
.goi-y-tim a:hover, .goi-y-tim a.chon { background: #fdecef; }
.goi-y-tim img { width: 48px; height: 48px; object-fit: contain; background: var(--nen-xam); border-radius: 4px; }
.goi-y-tim b { font-size: 13.5px; font-weight: 600; display: block; line-height: 1.3; }
.goi-y-tim small { color: var(--chu-nhat); font-size: 12px; }
.goi-y-tim .g { color: var(--do); font-weight: 700; font-size: 13px; white-space: nowrap; }
.goi-y-tim .tat-ca { display: block; text-align: center; color: var(--do); font-weight: 600; padding: 10px; font-size: 13.5px; }

/* Banner dạng sản phẩm (nền sáng) */
.banner .slide.sang { background: linear-gradient(110deg, #1f1f1f 0%, #3a1018 55%, #d60027 140%); }
.banner .slide.sang::after { display: none; }
.banner .slide.sang .noi-dung { max-width: 54%; }
.banner .slide .anh-sp { position: absolute; right: 4%; top: 8%; bottom: 8%; display: flex; gap: 2%; align-items: center; width: 46%; justify-content: flex-end; }
.banner .slide .anh-sp img { height: 100%; max-width: 32%; object-fit: contain; background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* Thanh hành động cố định (điện thoại, trang chi tiết) */
.thanh-mua { display: none; }

/* Nút lên đầu trang */
.len-dau { position: fixed; left: 16px; bottom: 20px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(34,34,34,.85); color: #fff; font-size: 20px; z-index: 89; opacity: 0; pointer-events: none; transition: .25s; }
.len-dau.hien { opacity: 1; pointer-events: auto; }

/* ---------- Đáp ứng màn hình ---------- */
@media (max-width: 1240px) {
  .thanh-tren ul li:nth-child(n+3) { display: none; }
  .menu-chinh > .khung > ul > li > a { padding: 12px 11px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 1000px) {
  .menu-chinh > .khung > ul > li > a { padding: 12px 8px; font-size: 12.5px; }
}
@media (max-width: 1100px) {
  .luoi-sp { grid-template-columns: repeat(4, 1fr); }
  .lien-he-nhanh .chu { display: none; }
}
@media (max-width: 900px) {
  .thanh-tren ul { display: none; }
  .luoi-sp { grid-template-columns: repeat(3, 1fr); }
  .can-gi { grid-template-columns: repeat(3, 1fr); }
  .cam-ket { grid-template-columns: repeat(2, 1fr); }
  .trang-ds { grid-template-columns: 1fr; }
  .bo-loc { position: static; display: none; }
  .bo-loc.mo { display: block; }
  .nut-loc-mobile { display: inline-flex; }
  .chi-tiet, .showroom { grid-template-columns: 1fr; }
  .chan-trang .cot { grid-template-columns: 1fr 1fr; }
  .nut-menu { display: block; }
  .menu-chinh { display: none; }
  .menu-chinh.mo { display: block; }
  .menu-chinh > .khung > ul { flex-direction: column; }
  .menu-con { position: static; display: block; box-shadow: none; border: 0; background: #2c2c2c; color: #ddd; }
  .menu-con a:hover { background: #333; }
  .kenh { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 14px; }
  .dau-trang .khung { flex-wrap: wrap; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .tim-kiem-boc { order: 3; flex-basis: 100%; max-width: none; }
  .tim-kiem input { padding: 8px 14px; }
  .logo svg { height: 40px; width: auto; }
  .logo b { font-size: 17px; }
  .logo small { font-size: 9.5px; letter-spacing: .5px; }
  .lien-he-nhanh { gap: 8px; }
  .icon-tron { width: 36px; height: 36px; }
  .nut-menu { padding: 2px; }
  .cam-ket div { padding: 10px; gap: 8px; }
  .cam-ket svg { width: 26px; height: 26px; }
  .o-kich-thuoc { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .o-kich-thuoc b { font-size: 14px; padding: 6px 8px; }
  .o-kich-thuoc .the { font-size: 9.5px; padding: 1px 6px; }
  .can-gi .anh { width: 56px; height: 56px; }
  .the-sp .thong-tin { padding: 8px 8px 10px; }
  .the-sp .hanh-dong { gap: 4px; }
  .the-sp .hanh-dong a, .the-sp .hanh-dong button { font-size: 11.5px; padding: 6px 2px; white-space: nowrap; }
  .luoi-sp { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .banner { aspect-ratio: 16/11; }
  .banner .noi-dung p { display: none; }
  .banner .noi-dung { padding: 0 20px; }
  .banner .slide-nen.ghep { grid-template-columns: repeat(2, 1fr); }
  .banner-giua { grid-template-columns: 1fr; }
  .chan-trang .cot { grid-template-columns: 1fr; }
  .o-hang { grid-template-columns: 1fr 1fr; gap: 8px; }
  .o-hang a { padding: 10px 12px; }
  .o-hang b { font-size: 17px; }
  .o-loai { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .o-loai a { flex-shrink: 0; white-space: nowrap; }
  .thanh-mua { display: grid; grid-template-columns: 1fr 1fr 1.3fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: #fff; box-shadow: 0 -4px 16px rgba(0,0,0,.12); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px; }
  .thanh-mua a, .thanh-mua button { border: 0; border-radius: 8px; padding: 10px 6px; font-weight: 700; font-size: 13.5px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
  .thanh-mua .goi { background: var(--do); color: #fff; }
  .thanh-mua .zalo { background: var(--xanh-zalo); color: #fff; }
  .thanh-mua .bg { background: #fff; color: var(--do); border: 1.5px solid var(--do); }
  .co-thanh-mua .nut-noi { display: none; }
  .co-thanh-mua .len-dau { bottom: 78px; }
  .co-thanh-mua { padding-bottom: 70px; }
  .banner .slide .anh-sp { width: 40%; right: 3%; }
  .banner .slide .anh-sp img:nth-child(n+2) { display: none; }
  .banner .slide .anh-sp img { max-width: 100%; }
  .ds-bao-gia .dong { grid-template-columns: 56px 1fr 80px 30px; }
  .ds-bao-gia .dong img { width: 56px; height: 72px; }
  .form-bao-gia { grid-template-columns: 1fr; }
  .tieu-de-khoi h2 { font-size: 18px; }
}

/* Trang danh mục SEO */
.tieu-de-khoi h1 { margin: 0; font-size: 22px; text-transform: uppercase; padding-bottom: 10px; border-bottom: 3px solid var(--do); margin-bottom: -2px; }
.gioi-thieu-dm p { margin: 4px 0 6px; color: #444; line-height: 1.65; }
.gioi-thieu-dm a { color: var(--do); }
.gioi-thieu-seo { background: var(--nen-xam); border-radius: var(--bo-goc); padding: 18px 20px; color: #444; line-height: 1.7; font-size: 14.5px; }
.gioi-thieu-seo h2 { font-size: 18px; margin: 0 0 8px; color: var(--chu); }
.gioi-thieu-seo a { color: var(--do); }
@media (max-width: 640px) { .tieu-de-khoi h1 { font-size: 18px; } }
.h1-trang-chu { font-size: 15px; font-weight: 600; color: var(--chu-nhat); margin: 12px 0 0; line-height: 1.4; }
.the-showroom a, .the-showroom span { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 900px) { .showroom, .trang-ds { grid-template-columns: minmax(0, 1fr); } }
.tim-kiem-boc { min-width: 0; }
.lien-he-nhanh { flex-shrink: 0; }
@media (max-width: 1100px) and (min-width: 901px) {
  .menu-chinh > .khung > ul > li > a { padding: 12px 7px; font-size: 12px; }
}
/* Hotline 2 số ở đầu trang */
.hotline-2 { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--chu-nhat); }
.hotline-2 .chu a { display: block; }
.hotline-2 .chu b { display: block; color: var(--do); font-size: 15px; line-height: 1.25; }
.thanh-tren span a + a::before { content: ""; }

/* ===== Giá chiết khấu ===== */
.the-sp .nhan-giam { position: absolute; top: 8px; right: 8px; z-index: 1; background: #f44336; color: #fff; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 6px rgba(244,67,54,.35); }
.the-sp .gia { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.gia-goc { color: #8a8a8a; font-weight: 600; font-size: .86em; }
.chi-tiet .gia-lon .nhan-gia { font-size: 13px; font-weight: 600; color: var(--chu-nhat); display: block; }
.chi-tiet .gia-lon .gia-goc { font-size: 16px; }
.nhan-giam-lon { display: inline-block; vertical-align: middle; background: #f44336; color: #fff; font-size: 14px; font-weight: 800; padding: 2px 10px; border-radius: 999px; margin-left: 6px; }
.chi-tiet .gia-lon .dong-goc { display: block; font-size: 14px; font-weight: 500; color: var(--chu); margin-top: 4px; }
.chi-tiet .gia-lon .dong-goc del { color: #8a8a8a; }

/* Menu máy tính: bỏ "Trang chủ" (bấm logo) và "Liên hệ" (có trên thanh trên) cho gọn; điện thoại vẫn hiện */
@media (min-width: 901px) { .menu-chinh li.chi-dt { display: none; } .menu-chinh > .khung > ul { justify-content: space-between; } }
.thanh-tren li a { color: inherit; text-decoration: underline; }

/* Menu con dài (ngói nhiều hãng): chia 2 cột trên máy tính */
@media (min-width: 901px) { .menu-con.menu-cot { columns: 2; column-gap: 0; min-width: 440px; } .menu-con.menu-cot li { break-inside: avoid; } }

/* Menu máy tính nhiều mục: các mục giãn đều; màn hẹp thì tự xuống dòng thứ 2 (không bao giờ bị cắt) */
@media (min-width: 901px) {
  .menu-chinh > .khung > ul { flex-wrap: wrap; justify-content: center; }
  .menu-chinh > .khung > ul > li { flex: 1 1 auto; }
  .menu-chinh > .khung > ul > li > a { text-align: center; padding-left: 9px; padding-right: 9px; font-size: 13px; white-space: nowrap; }
  .menu-chinh > .khung > ul > li:nth-last-child(-n+3) > .menu-con { left: auto; right: 0; }
}

/* ===== Bảng danh mục theo hãng (rê chuột vào TOTO / INAX / Viglacera / Vela) ===== */
.mega-con { display: none; }
@media (min-width: 901px) {
  .menu-chinh > .khung { position: relative; }
  .menu-chinh > .khung > ul > li.co-mega { position: static; }
  .menu-chinh li.co-mega:hover > .mega-con { display: block; }
  .mega-con { left: 0; right: 0; top: 100%; min-width: 0; padding: 18px 22px 12px; max-height: 75vh; overflow-y: auto; }
  .luoi-mega { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 22px; }
  .cot-mega { break-inside: avoid; }
  .tieu-de-mega { display: block; color: var(--do) !important; font-weight: 700; font-size: 14.5px; padding: 0 0 6px !important; margin-bottom: 4px; border-bottom: 1px solid var(--vien); }
  .tieu-de-mega small { color: var(--chu-nhat); font-weight: 400; }
  .tieu-de-mega:hover { background: none !important; text-decoration: underline; }
  .cot-mega ul { list-style: none; margin: 0; padding: 0; }
  .cot-mega li a { display: block; padding: 4px 0 4px 12px !important; font-size: 13.5px; position: relative; }
  .cot-mega li a::before { content: '›'; position: absolute; left: 0; color: var(--do); }
  .cot-mega li a:hover { background: none !important; color: var(--do); }
  .xem-het-mega { display: inline-block !important; margin-top: 12px; padding: 8px 0 !important; font-weight: 700; color: var(--do) !important; }
}
@media (min-width: 901px) and (max-width: 1150px) { .luoi-mega { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 901px) { .menu-chinh > .khung > ul > li.co-mega > .mega-con { left: 0; right: 0; } }
@media (max-width: 900px) { .menu-chinh .mega-con { display: none !important; } }

/* Trang hãng: các khối theo chủng loại */
.nhom-chip { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.nhom-chip > b { white-space: nowrap; padding-top: 6px; font-size: 14px; }
.nhom-chip .the-tu-khoa { margin: 0; }
.khoi-loai { margin: 26px 0 8px; padding-top: 6px; border-top: 1px solid var(--vien); }
.khoi-loai h2 small { font-size: .7em; color: var(--chu-nhat); font-weight: 500; }
.khoi-loai .the-tu-khoa { margin: 0 0 12px; }
@media (max-width: 600px) { .nhom-chip { flex-direction: column; gap: 4px; } }
@media (min-width: 901px) { .menu-chinh > .khung > ul > li > a { font-size: 12px; padding-left: 6px; padding-right: 6px; letter-spacing: 0; } }
/* (bỏ cỡ chữ lớn hơn ở màn rộng: khung tối đa 1240px nên giữ 12px để vừa 1 hàng) */