/* Bổ sung cho bản thiết kế khi chuyển sang dữ liệu động. */
.page-banner { background-image: linear-gradient(120deg, rgba(10, 42, 82, .88), rgba(22, 78, 158, .78)), var(--banner-lg); background-size: cover; background-position: center; }
.toast.error { background: #c0392b; }
.lead-form textarea.input { resize: vertical; min-height: 96px; }
.is-dropdown .mega { width: 240px; grid-template-columns: 1fr; padding: 14px; }
.mega-h a { color: inherit !important; padding: 0 !important; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.socials a { border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.float .custom { background: var(--primary); }
.float img { width: 26px; height: 26px; object-fit: contain; }
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); font-weight: 600; }
.pager .active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pager a:hover { border-color: var(--accent); color: var(--accent); }
/* Nội dung bài viết (CKEditor/WordPress cũ): không phần tử nào được tràn khỏi cột. */
.prose { line-height: 1.75; min-width: 0; overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose h2, .prose h3, .prose h4 { margin: 1.4em 0 .6em; line-height: 1.3; }
.prose ul, .prose ol { padding-left: 1.4em; margin: .8em 0; }
.prose li { margin: .3em 0; }
.prose p { margin: .8em 0; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose blockquote { margin: 1.2em 0; padding: 12px 18px; border-left: 4px solid var(--accent); background: rgba(0,0,0,.03); border-radius: 0 10px 10px 0; }
/* Ảnh, video: bỏ qua width/height cố định trong HTML, co theo cột. */
.prose img, .prose video { max-width: 100%; height: auto; border-radius: 12px; }
.prose figure, .prose .wp-caption { max-width: 100% !important; margin: 1.4em auto; }
.prose figure img { display: block; margin: 0 auto; }
.prose figcaption, .prose .wp-caption-text { margin-top: 8px; text-align: center; font-size: .9em; font-style: italic; color: var(--muted); }
.prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.prose .alignleft { float: left; margin: .3em 1.2em .8em 0; }
.prose .alignright { float: right; margin: .3em 0 .8em 1.2em; }
.prose iframe { display: block; max-width: 100%; margin: 1.2em auto; border: 0; border-radius: 12px; }
.prose iframe[src*="youtube"], .prose iframe[src*="youtu.be"], .prose iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.prose p:has(> iframe) { margin: 1.2em 0; }
/* Bảng: cuộn ngang trong khung thay vì làm vỡ layout. */
.prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.2em 0; font-size: .95em; }
.prose td, .prose th { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; min-width: 90px; }
.prose th, .prose thead td { background: rgba(0,0,0,.04); font-weight: 700; }
.prose pre { max-width: 100%; overflow-x: auto; padding: 12px; border-radius: 10px; background: rgba(0,0,0,.05); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; }
.prose::after { content: ""; display: table; clear: both; }
@media (max-width: 640px) { .prose .alignleft, .prose .alignright { float: none; margin: 1em auto; } }
.empty-state { text-align: center; color: var(--muted); padding: 48px 16px; }
.page-banner .banner-title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; color: #fff; font-family: "Roboto Condensed", "RC Fallback Roboto", sans-serif; }
/* Slide 2+ dùng h2.h1 (chỉ 1 thẻ h1/trang) nên phải mang cùng kiểu chữ trắng như h1. */
.hero .h1 { display: block; color: #fff; font-size: clamp(34px, 5vw, 58px); line-height: 1.1; font-weight: 800; margin: 14px 0 18px; }
.hero .h1 em { font-style: normal; color: var(--accent-2); }
/* Ảnh sản phẩm thường có chữ/thông số in sẵn: hiện trọn ảnh, không cắt. */
.product .img { background: #fff; }
.product .img img { object-fit: contain; padding: 8px; }
/* Ảnh danh mục admin tải lên nằm gọn trong ô icon. */
.icon-box { overflow: hidden; flex: none; }
.icon-box img { width: 100%; height: 100%; object-fit: contain; }
.card.feature p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Slide "Chỉ hiện ảnh banner": ảnh thiết kế sẵn chữ, hiện trọn, không phủ tối, nằm trên lớp overlay. */
.hero-slide-bg.image-only { z-index: 1; background: var(--primary); }
.hero-slide-bg.image-only img { object-fit: contain; opacity: 1; transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Ảnh chính chi tiết sản phẩm: hiện trọn ảnh (thường có thông số in sẵn). */
.pd-img { background: #fff; overflow: hidden; }
.pd-img img { width: 100%; height: 100%; object-fit: contain; }
/* Thẻ sản phẩm đồng đều: khung ảnh cố định 4:3, tên tối đa 2 dòng, nút luôn nằm đáy thẻ. */
.carousel-track { align-items: stretch; }
.card.product { display: flex; flex-direction: column; height: 100%; }
.product .img { display: block; aspect-ratio: 4/3; overflow: hidden; }
.product .img img { display: block; width: 100%; height: 100%; }
.product .card-body { flex: 1; display: flex; flex-direction: column; }
.product h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; line-height: 1.3; }
.product h3 a { color: inherit; }
/* Mega menu: cột tự co theo số danh mục, khối ưu đãi nằm gọn trong khung, tiêu đề cột in đậm. */
.is-mega .mega { width: min(1100px, 94vw); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.mega > div:not(.mega-promo) .mega-h a { font-size: 16px; font-weight: 700 !important; color: var(--primary) !important; font-family: "Roboto Condensed", "RC Fallback Roboto", sans-serif !important; }
/* Mega menu bố cục mới: khung bám theo bề rộng header, các cột chia đều, khối ưu đãi có ảnh nền. */
.header .container { position: relative; }
.nav .has-mega.is-mega { position: static; }
.is-mega .mega { left: 0; right: 0; width: auto; top: 100%; transform: translateY(12px); display: grid; grid-template-columns: 1fr 260px; gap: 28px; padding: 28px 32px; }
.has-mega.is-mega:hover .mega, .has-mega.is-mega:focus-within .mega { transform: translateY(0); }
.is-mega .mega::before { top: -24px; height: 24px; }
.mega-cols { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 0 28px; }
.mega-col { min-width: 0; }
.mega > div:not(.mega-promo) .mega-h { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--bg-soft); position: relative; }
.mega > div:not(.mega-promo) .mega-h::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 36px; height: 2px; background: var(--accent); }
.mega > div:not(.mega-promo) .mega-col a:not(.mega-more) { padding: 5px 0 !important; font-size: 15px; }
.mega > div:not(.mega-promo) .mega-col a.mega-more { margin-top: 8px; font-size: 13px; font-weight: 600 !important; color: var(--accent) !important; }
.mega-promo { position: relative; overflow: hidden; min-height: 220px; align-self: stretch; gap: 16px; background: linear-gradient(160deg, rgba(10,42,82,.55), rgba(10,42,82,.92)), var(--promo-img, none) center / cover, linear-gradient(140deg, var(--primary), var(--primary-2)); }
.mega-promo small { display: block; font-size: 13px; letter-spacing: .3px; text-transform: uppercase; margin-bottom: 6px; }
.mega-promo b { display: block; font-size: 22px; line-height: 1.25; font-family: "Roboto Condensed", "RC Fallback Roboto", sans-serif; }
.mega-promo .btn { align-self: flex-start; padding: 10px 22px; }
/* Form lead: các ô cách nhau rõ ràng; bản rộng xếp 2 cột + nhãn trên ô. */
.lead-form { display: grid; gap: 14px; }
.lead-form .field { display: block; margin: 0; }
.lead-form--wide { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.lead-form--wide .field--full { grid-column: 1 / -1; }
.field-label { display: block; font-size: 14px; font-weight: 600; color: var(--primary); margin-bottom: 6px; }
.field-label i { color: #c0392b; font-style: normal; }
.lead-form .input { min-height: 48px; }
.lead-form .lead-form-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.lead-form-foot small { color: var(--muted); font-size: 13px; flex: 1 1 220px; }
@media (max-width: 640px) { .lead-form--wide { grid-template-columns: 1fr; } }
.form-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--line); }
.form-trust > div { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.4; }
.form-trust b { display: block; color: var(--primary); font-size: 14px; }
.form-trust span { font-size: 20px; line-height: 1; }
@media (max-width: 640px) { .form-trust { grid-template-columns: 1fr; } }
.contact-steps { counter-reset: s; display: grid; gap: 12px; margin-top: 28px; }
.contact-steps li { list-style: none; counter-increment: s; display: flex; gap: 14px; align-items: flex-start; }
.contact-steps li::before { content: counter(s); flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; }
.contact-steps b { display: block; color: var(--primary); }
.contact-steps p { color: var(--muted); font-size: 14px; margin: 2px 0 0; }
.form-trust > div > div { display: block; }
.form-trust svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.lead-form-foot small { flex-basis: 100%; }
.impact .lead { color: #dbe6f5; }
/* Thẻ sản phẩm: rê chuột thì thẻ nhấc lên, ảnh phóng nhẹ và hiện nhãn "Xem chi tiết". */
.card.product { transition: transform .25s ease, box-shadow .25s ease; }
.card.product:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(10,42,82,.14); }
.product .img { position: relative; }
.product .img img { transition: transform .45s ease; }
.card.product:hover .img img { transform: scale(1.07); }
.product .img::after { content: "Xem chi tiết →"; position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 10px); background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; opacity: 0; transition: .25s ease; white-space: nowrap; }
.card.product:hover .img::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .product .img::after { display: none; } }
/* Banner trang con: phủ lớp xanh đậm lên ảnh nền để chữ luôn đọc rõ. */
section.page-banner::before { background: linear-gradient(100deg, rgba(8,32,66,.92) 0%, rgba(10,42,82,.8) 45%, rgba(10,42,82,.45) 100%), var(--banner-lg, none) center / cover; opacity: 1; mix-blend-mode: normal; }
@media (max-width: 860px) { section.page-banner::before { background: linear-gradient(rgba(8,32,66,.85), rgba(8,32,66,.85)), var(--banner-sm, none) center / cover; } }
.page-banner .lead { color: #e3ecf8; }
.page-banner .crumb, .page-banner .crumb a { color: #c9d8ec; }
.page-banner .btn-outline { color: #fff; border-color: rgba(255,255,255,.7); }
.page-banner .btn-outline:hover { background: #fff; color: var(--primary); }
/* Hero: chừa khoảng trên/dưới để form tính (khi hiện kết quả + ô nhập) không chạm menu và không bị dải số liệu (.stats margin-top:-60px) đè. */
.hero { padding: 48px 0 108px; }
@media (max-width: 860px) { .hero { padding: 32px 0 96px; } }
/* Tin tức: chuyên mục đã có ở sidebar, desktop chỉ giữ 1 hàng tab cuộn ngang gọn gàng; mobile (sidebar xuống dưới) vẫn cuộn ngang như cũ. */
.page-news .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 24px; padding: 0; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.page-news .tabs::-webkit-scrollbar { display: none; }
.page-news .tab { flex: 0 0 auto; white-space: nowrap; border: 0; border-radius: 0; background: none; padding: 10px 14px; font-size: 15px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.page-news .tab:hover { color: var(--primary); }
.page-news .tab.active { background: none; color: var(--primary); border-bottom-color: var(--accent); }
.page-news .shop > div { min-width: 0; }
/* Chữ các slide xếp chồng cùng một ô lưới: khối chữ luôn cao bằng slide dài nhất, đổi slide không làm trang nhảy (CLS).
   Slide đang ẩn dùng visibility nên không bấm được và trình đọc màn hình bỏ qua. */
.hero .container > div:first-child { display: grid; }
.hero-text { display: block; grid-area: 1 / 1; visibility: hidden; }
.hero-text.active { visibility: visible; }
/* Mobile: ảnh banner nằm thành dải phía trên, form tính xếp bên dưới (không che banner). */
@media (max-width: 860px) {
  .hero { display: block; min-height: 0; padding: calc(56vw + 20px) 0 96px; }
  .hero-slide-bg { bottom: auto; height: 56vw; }
  .hero::after { bottom: auto; height: 56vw; background: linear-gradient(180deg, rgba(10,42,82,0) 60%, rgba(10,42,82,.6) 100%); }
  .hero-dots { top: calc(56vw - 30px); bottom: auto; }
  .hero .slide-arrow { top: calc(28vw); }
  .hero .calc { padding: 22px 18px; }
  /* Form tính đứng ngay dưới banner: chữ slide (cao thấp khác nhau, slide chỉ-ảnh cao 0) nằm dưới nên đổi slide không đẩy form. */
  .hero .calc { order: -1; }
  /* Danh mục sản phẩm: 2 cột gọn, bỏ mô tả dài. */
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
/* Cửa hàng: nút mở bộ lọc chỉ hiện trên mobile; bộ lọc ẩn mặc định để sản phẩm hiện ngay. */
.shop-filter-toggle { display: none; }
@media (max-width: 860px) {
  .shop-filter-toggle { display: inline-flex; width: 100%; justify-content: center; margin-bottom: 16px; }
  .page-shop .shop > .sidebar { display: none; }
  .page-shop .shop > .sidebar.open { display: block; }
  /* Menu mobile: danh sách trái, full chiều ngang, có vạch ngăn. */
  .nav.open { align-items: stretch; gap: 0; padding: 8px 16px 16px; box-shadow: 0 16px 30px rgba(10,42,82,.12); max-height: calc(100vh - 80px); overflow-y: auto; }
  .nav.open > .has-mega, .nav.open > a { border-bottom: 1px solid var(--line); text-align: left; }
  .nav.open > a, .nav.open > .has-mega > a { display: flex; justify-content: space-between; align-items: center; padding: 13px 4px; font-size: 16px; }
  .nav.open > a.active, .nav.open > .has-mega > a.active { background: none; color: var(--accent); }
  /* Khung đầu trang con thấp lại để nội dung chính hiện sớm. */
  .page-banner { padding: 36px 0 32px; }
  .page-banner .crumb { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .page-banner .banner-title { font-size: 26px; }
}
/* Mục lục bài viết do post-toc.js tạo. */
.toc { margin: 1.4em 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.02); }
.toc-head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: 1.05em; color: var(--primary); cursor: pointer; }
.toc-caret { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.toc.is-collapsed .toc-caret { transform: rotate(-135deg); }
.toc.is-collapsed .toc-list { display: none; }
.prose .toc-list { list-style: none; counter-reset: toc; margin: 12px 0 0; padding: 0; }
.prose .toc-list ol { list-style: none; counter-reset: toc; margin: 4px 0 4px 1.4em; padding: 0; }
.prose .toc-list li { counter-increment: toc; margin: 6px 0; }
.prose .toc-list a { color: inherit; text-decoration: none; }
.prose .toc-list > li > a::before { content: counter(toc) ". "; color: var(--accent); font-weight: 700; }
.prose .toc-list ol a::before { content: counters(toc, ".", decimal) " "; color: var(--muted); }
.prose .toc-list a:hover { color: var(--accent); text-decoration: underline; }
.prose h2[id], .prose h3[id] { scroll-margin-top: 100px; }

/* Thẻ danh mục trang chủ: ảnh sản phẩm lớn trên nền sáng, chữ trên nền trắng, cả thẻ là một link. */
.cat-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(10,42,82,.14); border-color: transparent; }
.cat-card-media { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; background: linear-gradient(180deg, #f4f8fe 0%, #e8f0fb 100%); }
.cat-card-media img { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); object-fit: contain; border-radius: 8px; mix-blend-mode: multiply; transition: transform .4s ease; }
.cat-card:hover .cat-card-media img { transform: scale(1.06); }
.cat-card-icon { font-size: 48px; color: var(--primary-2); }
.cat-card-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.cat-card h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.3; color: var(--primary); }
.cat-card p { margin: 0; color: #5b6b82; font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-card-more { margin-top: auto; padding-top: 12px; font-weight: 600; font-size: 14px; color: var(--accent-ink); }
.cat-card-more span { display: inline-block; transition: transform .25s; }
.cat-card:hover .cat-card-more span { transform: translateX(4px); }
@media (max-width: 860px) {
  .cat-card-media img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
  .cat-card-body { padding: 12px 12px 14px; }
  .cat-card h3 { font-size: 15px; margin-bottom: 0; }
  .cat-card p { display: none; }
  .cat-card-more { padding-top: 8px; font-size: 13px; }
}
/* Sản phẩm trang chủ: lưới theo tab danh mục; nhóm không chọn bị ẩn, mobile vẫn giữ 2 cột. */
.home-products[hidden] { display: none; }
@media (max-width: 600px) { .home-products { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
/* Footer: ảnh dãy tấm pin mờ dưới nền xanh, đậm dần về phía dưới để chữ phía trên vẫn rõ. */
.footer { position: relative; isolation: isolate; overflow: hidden; }
.footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/footer-solar-bg.webp") center 70% / cover no-repeat;
  opacity: .22; filter: saturate(.8);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 45%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 45%, #000 100%);
}