-> bỏ gạch chân, kế thừa màu */
a.prod-card{color:inherit;}
/* Trạng thái */
.state-msg{padding:60px 0;text-align:center;color:var(--text-muted);}
.state-msg a{color:var(--green-600);font-weight:700;}
/* ---------- trang chi tiết sản phẩm ---------- */
.pd-back{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text-muted);font-weight:600;margin-bottom:18px;}
.pd-back:hover{color:var(--green-600);}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}
.pd-gallery .pd-main{
aspect-ratio:1/.82;background:#fff;border:1px solid var(--border);padding:24px;
border-radius:var(--radius-md);overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.pd-main img{width:100%;height:100%;object-fit:contain;} /* contain trên nền trắng: hiện đủ sản phẩm, không lệch tông */
.pd-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px;}
.pd-thumb{
aspect-ratio:1;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;
background:#fff;cursor:pointer;padding:6px;
}
.pd-thumb.active{border-color:var(--green-600);}
.pd-thumb img{width:100%;height:100%;object-fit:contain;}
.pd-info h1{font-size:1.8rem;margin-bottom:6px;}
.pd-badges{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;}
.pd-badge{
background:var(--green-100);color:var(--green-700);font-size:.74rem;font-weight:700;
padding:5px 12px;border-radius:999px;
}
.pd-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--orange-600);font-size:1.5rem;margin:8px 0;}
.pd-price.contact{color:var(--orange-600);} /* "Liên hệ" cũng màu cam như giá, không còn xám */
.pd-price-label{font-weight:600;} /* nhãn "Giá:" to & cùng màu cam như phần giá/Liên hệ */
.pd-desc{margin-top:22px;}
/* ">" : chỉ áp cho nhãn "Mô tả"; không có nó thì H2 admin viết TRONG mô tả cũng thành chữ nhỏ xám. */
.pd-desc > h2{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-family:'IBM Plex Mono',monospace;font-weight:600;margin-bottom:10px;}
.pd-desc .rich{line-height:1.75;color:var(--text);}
.pd-cta{margin-top:28px;}
@media (max-width:1020px){ .pd-grid{grid-template-columns:1fr;gap:28px;} }
/* thẻ sản phẩm: media bấm được, nút tim active, trạng thái rỗng */
.prod-media[data-href]{cursor:pointer;}
.prod-fav.active{color:var(--orange-600);}
.prod-fav.active svg{fill:var(--orange-600);}
.cms-state{padding:48px 10px;text-align:center;color:var(--text-muted);}
/* ---------- Cột danh mục trang Sản phẩm ---------- */
.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start;}
/* Thanh sắp xếp trên lưới SP: canh phải, dùng biến theme để tự hợp sáng/tối. */
.shop-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-bottom:16px;}
.sort-label{font-size:.9rem;color:var(--muted,#6b6f66);}
.sort-select{
padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm,8px);
background:var(--surface);color:var(--text);font-size:.9rem;cursor:pointer;
}
.sort-select:focus{outline:2px solid var(--brand,#2f6df6);outline-offset:1px;}
/* ---------- Lớp phủ chế độ bảo trì (public) ---------- */
.maint-overlay{
position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
background:var(--bg,#FAF7F1);padding:24px;text-align:center;
}
.maint-box{max-width:520px;}
.maint-logo{max-width:180px;height:auto;margin:0 auto 24px;display:block;}
.maint-title{font-size:1.6rem;font-weight:800;color:var(--text);margin:0 0 12px;}
.maint-msg{font-size:1.05rem;line-height:1.7;color:var(--muted,#6b6f66);margin:0;white-space:pre-line;}
.shop-sidebar{
background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
padding:16px 12px;position:sticky;top:90px;
}
.sidebar-title{
font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);
font-family:'IBM Plex Mono',monospace;font-weight:600;padding:0 10px 10px;
}
.cat-list{list-style:none;margin:0;padding:0;}
.cat-top{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:9px 12px;border-radius:9px;font-weight:600;font-size:.9rem;color:var(--text);
}
.cat-top:hover{background:var(--surface-2);}
.cat-top.active{background:var(--green-100);color:var(--green-700);}
.cat-top .caret{display:inline-flex;align-items:center;color:var(--text-muted);font-size:1.15rem;line-height:1;transition:transform .15s;flex:none;}
.cat-children{list-style:none;margin:2px 0 6px;padding:0 0 0 14px;display:none;}
/* Cảm ứng (không hover): tap danh mục cha -> .open -> xổ con; caret › xoay xuống. */
@media (hover:none){
.cat-parent.open .cat-children{display:block;}
.cat-parent.open > .cat-top .caret{transform:rotate(90deg);}
}
/* Máy tính (có chuột): mở theo .hover-open do hover-intent.js gắn — một nhóm một lúc, có trễ mở/đóng.
Màn rộng: danh mục con XỔ SANG PHẢI (đồng bộ dropdown header) -> cột trái đứng yên, không dịch dưới con trỏ.
Màn hẹp (<= 860px, cột nằm trên lưới, không có chỗ bên phải): vẫn xổ xuống. */
@media (hover:hover) and (max-width:860px){
.cat-parent.hover-open .cat-children{display:block;}
.cat-parent.hover-open > .cat-top .caret{transform:rotate(90deg);}
}
@media (hover:hover) and (min-width:861px){
/* Sidebar sticky = khung chứa của flyout (canh theo cả cột); z-index để flyout đè lên lưới sản phẩm
(thẻ sản phẩm có transform khi hover -> tạo lớp xếp chồng riêng, dễ trồi lên trên flyout). */
.shop-sidebar{z-index:30;}
.cat-parent{position:static;}
.cat-parent.hover-open > .cat-top{background:var(--green-100);color:var(--green-700);}
.cat-parent.hover-open > .cat-top .caret{color:var(--green-700);}
.cat-parent.hover-open .cat-children{
display:block;position:absolute;
top:-1px;left:100%;min-height:calc(100% + 2px);width:240px; /* -1px/+2px: đè khít viền cột trái */
max-height:calc(100vh - 110px);overflow-y:auto; /* nhóm nhiều con -> cuộn, không tràn màn hình */
margin:0;padding:16px 8px;background:var(--surface);
border:1px solid var(--border);border-radius:0 var(--radius-md) var(--radius-md) 0;
box-shadow:var(--shadow-lg);
}
.cat-children a{padding:8px 12px;}
.cat-children a:hover{background:var(--green-100);}
/* Khung phải đang mở -> bỏ bo 2 góc phải của cột trái để hai khung liền khít. */
.shop-sidebar:has(.hover-open){border-top-right-radius:0;border-bottom-right-radius:0;}
}
.cat-children a{display:block;padding:6px 12px;border-radius:8px;font-size:.85rem;color:var(--text-muted);}
.cat-children a:hover{color:var(--green-600);}
.cat-children a.active{color:var(--green-700);font-weight:600;background:var(--surface-2);}
.logo-img{height:80px;width:auto;display:block;} /* header không set height cố định nên tự giãn; đổi 1 số này để to/nhỏ logo */
@media (max-width:860px){
.shop-layout{grid-template-columns:1fr;}
.shop-sidebar{position:static;}
}
/* ---------- Cột "DANH MỤC SẢN PHẨM" ở trang chủ (kiểu trang cũ) ---------- */
.home-top-sec{padding:26px 0 6px;}
.home-top{display:grid;grid-template-columns:264px 1fr;gap:26px;align-items:stretch;}
.home-menu{align-self:start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);position:relative;z-index:5;}
.hcm-head{
background:var(--orange-600);color:#fff;font-weight:800;font-size:.82rem;
letter-spacing:.02em;text-transform:uppercase;padding:14px 16px;
border-radius:var(--radius-md) var(--radius-md) 0 0;
}
.hcm-list{list-style:none;margin:0;padding:6px;max-height:min(60vh,460px);overflow-y:auto;} /* nhiều danh mục -> cuộn trong cột, không tràn dài hơn banner */
.hcm-item{position:relative;}
.hcm-link{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:10px 12px;border-radius:9px;font-weight:600;font-size:.88rem;color:var(--text);
}
.hcm-link:hover{background:var(--green-100);color:var(--green-700);}
.hcm-arrow{color:var(--text-muted);font-size:1.05rem;line-height:1;transition:transform .15s;display:inline-flex;}
.hcm-item:hover > .hcm-link .hcm-arrow{transform:rotate(90deg);} /* › xoay xuống khi mở */
.hcm-flyout{display:none;padding:2px 0 8px 26px;} /* thụt vào cho ra cấp con, giống sidebar trang SP */
.hcm-item:hover .hcm-flyout{display:block;}
.hcm-fly-title{display:none;} /* inline rồi -> không cần lặp lại tên cha */
.hcm-flyout ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.hcm-flyout a{color:var(--text-muted);font-size:.86rem;font-weight:500;}
.hcm-flyout a:hover{color:var(--green-600);}
.home-hero{
display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
background:linear-gradient(135deg,var(--green-100),var(--sand-100));
border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px 40px;
}
@media (max-width:980px){
.home-top{grid-template-columns:1fr;}
.home-menu{display:none;}
.home-hero{grid-template-columns:1fr;padding:26px;}
.home-hero .hero-visual{display:none;}
}
.page-prose p{margin-bottom:14px;line-height:1.75;color:var(--text-muted);}
.page-prose strong{color:var(--text);}
/* Chi tiết bài viết */
.news-article h1{font-size:1.7rem;margin:14px 0 8px;color:var(--logo-orange);}
.news-hero{width:100%;border-radius:var(--radius-md);margin:14px 0;max-height:420px;object-fit:cover;}
/* Nội dung đã là HTML có cấu trúc (richText) -> bỏ pre-line, nếu giữ thì xuống dòng giữa các thẻ
cũng thành dòng trống. Khoảng cách dùng "* + *" để phần tử đầu không bị đẩy xuống thừa. */
/* .rich = nội dung từ richText() — DÙNG CHUNG cho bài viết, mô tả sản phẩm, mô tả dịch vụ.
Mỗi nơi chỉ chỉnh khung ngoài (cỡ chữ, lề); định dạng bên trong đồng nhất ở một chỗ. */
.rich{overflow-wrap:anywhere;}
.news-content{line-height:1.8;color:var(--text);margin-top:14px;}
.rich > * + *{margin-top:14px;}
/* :where() = độ ưu tiên 0 -> chỉ xoá lề mặc định của trình duyệt, KHÔNG đè khoảng cách "* + *" ở trên.
color:inherit vì CSS chung tô màu nhạt (dành cho mô tả phụ), còn thân bài cần chữ đậm rõ. */
:where(.rich p){margin:0;}
.rich > :first-child{margin-top:0;} /* tiêu đề đứng đầu mô tả không bị đẩy xuống 32px thừa */
.rich p{color:inherit;}
/* Tiêu đề mục theo màu logo để bài viết mang nhận diện thương hiệu.
#018CD6 trên nền kem ~3.4:1 -> chỉ đạt WCAG AA cho CHỮ LỚN (>= 18.66px đậm),
nên h3 để 1.17rem (~18.7px) thay vì 1.12rem; đừng giảm cỡ chữ xuống dưới mức này. */
.rich h2{font-size:1.35rem;line-height:1.35;margin:32px 0 0;color:var(--logo-blue);}
.rich h3{font-size:1.17rem;line-height:1.4;margin:24px 0 0;color:var(--logo-blue);}
.rich strong{font-weight:700;}
/* Tô sáng kiểu bút dạ: chỉ phủ nửa dưới chữ nên vẫn dễ đọc, và theo biến màu nên tự đổi ở dark mode. */
.rich mark{background:linear-gradient(transparent 55%, var(--sand-300) 55%);color:inherit;padding:0 .1em;}
.rich a{color:var(--green-600);text-decoration:underline;text-underline-offset:2px;}
.rich ul, .rich ol{margin-left:0;padding-left:1.4em;}
.rich ul{list-style:disc;}
.rich ol{list-style:decimal;}
.rich li + li{margin-top:6px;}
.rich blockquote{
margin-left:0;margin-right:0;padding:14px 18px;
background:var(--orange-100);border-left:4px solid var(--orange-500);
border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.news-source{
margin:36px 0 0;padding-top:14px;border-top:1px solid var(--border);
font-size:.85rem;font-style:italic;color:var(--text-muted);overflow-wrap:anywhere;
}
.news-source a{font-style:normal;font-weight:600;color:var(--green-600);}
.news-source a:hover{text-decoration:underline;}
.rt-figure{margin:24px 0 0;text-align:center;}
.rt-figure img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:var(--radius-md);}
.rt-figure figcaption{margin-top:8px;font-size:.85rem;font-style:italic;color:var(--text-muted);}
/* PHẢI đứng SAU khối .rich: cùng độ ưu tiên nên rule viết sau thắng.
Thẻ dịch vụ hẹp (4 cột) -> thu nhỏ khoảng cách và tiêu đề trong mô tả cho cân với thẻ. */
.rich-sm{font-size:.85rem;line-height:1.6;color:var(--text-muted);}
.rich-sm > * + *{margin-top:8px;}
.rich-sm .rt-figure{margin-top:10px;}
/* Chữ nhỏ: xanh logo chỉ đạt 3.4:1 (dưới chuẩn 4.5:1 cho chữ thường) -> dùng xanh đậm của theme (~5:1). */
.rich-sm h2, .rich-sm h3{font-size:.92rem;margin-top:12px;color:var(--green-600);}
/* ---------- Sản phẩm liên quan (cuối trang chi tiết) ---------- */
/* Ngăn cách rõ với phần trên; lưới tái dùng .prod-grid nên tự responsive theo. */
.related-wrap{margin-top:48px;padding-top:32px;border-top:1px solid var(--border);}
.related-title{font-size:1.15rem;font-weight:700;color:var(--text);margin:0 0 20px;}
/* ---------- Banner slider trang chủ ---------- */
/* Chiều cao khung banner tính bằng ::before (padding-top %) thay cho aspect-ratio.
Lý do: .hero-slider là grid item của .home-top, mà Safari KHÔNG đưa aspect-ratio vào
phép tính chiều cao dòng grid. Hậu quả trên Safari: desktop thì khung bị kéo theo
chiều cao cột danh mục (banner hụt), mobile thì cột danh mục ẩn nên dòng grid = 0
-> banner cao 0px, coi như mất hẳn. ::before là phần tử in-flow thật nên mọi
trình duyệt đều tính ra chiều cao giống nhau, không phụ thuộc cột bên cạnh. */
.hero-slider{
--banner-ratio:55.56%; /* = 1/1.8. Số càng LỚN khung càng cao; chỉnh 1 chỗ này là đổi độ cao mọi banner */
position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-2);
align-self:start; /* chặn grid stretch kéo giãn khung theo cột danh mục -> giữ đúng tỉ lệ */
width:100%;min-width:0; /* min-width:0 để grid item không bị đẩy tràn khỏi cột 1fr */
}
.hero-slider::before{content:"";display:block;padding-top:var(--banner-ratio);}
.hero-slider .slides{position:absolute;inset:0;}
.hero-slider .slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;display:block;}
.hero-slider .slide.active{opacity:1;}
.hero-slider .slide img{width:100%;height:100%;object-fit:cover;display:block;} /* cover: phủ kín khung. Cắt ảnh cho vừa tỉ lệ khung trước khi up để không mất phần quan trọng */
.slider-arrow{
position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
border:none;background:rgba(255,255,255,.82);color:var(--text);font-size:1.6rem;line-height:1;
cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:var(--shadow-sm);
}
.slider-arrow:hover{background:#fff;}
.slider-arrow.prev{left:14px;} .slider-arrow.next{right:14px;}
.slider-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:3;}
.slider-dots .dot{width:26px;height:5px;border-radius:3px;border:none;background:rgba(255,255,255,.55);cursor:pointer;padding:0;transition:background .2s;}
.slider-dots .dot.active{background:var(--orange-600);}
@media (max-width:980px){ .hero-slider{--banner-ratio:56.25%;} } /* 9/16 = 56.25% -> khung 16:9 trên mobile */