/* =========================================================
   CARYROYAL — DESIGN SYSTEM
   Palette: Sứ & Đồng (Porcelain & Brass)
   ========================================================= */
:root{
  --ink:        #14333A;   /* xanh mực sứ đậm - primary */
  --ink-2:      #1F4750;   /* xanh mực nhạt hơn - hover/gradient */
  --ink-soft:   #E7EEEE;   /* nền phụ nhạt */
  --steel:      #5B6B6E;   /* xám thép - text phụ */
  --steel-line: #D8DFDE;   /* đường viền */
  --porcelain:  #F6F4EF;   /* nền chính */
  --white:      #FFFFFF;
  --brass:      #B8863B;   /* đồng thau - accent CTA */
  --brass-dark: #93692A;
  --brass-light:#C89A4F;   /* đồng thau sáng hơn - dùng cho chữ nhỏ trên nền tối, đủ tương phản */
  --brass-text: #7C5A24;   /* đồng thau đậm hơn nữa - dùng cho chữ nhỏ (eyebrow) trên nền sáng, đảm bảo tỉ lệ tương phản > 4.5:1 */
  --brass-soft: #F3E8D4;
  --success:    #3C7A5D;
  --danger:     #A6432F;

  --font-display:'Be Vietnam Pro', sans-serif;
  --font-body:   'Be Vietnam Pro', sans-serif;
  --font-mono:   'IBM Plex Mono', monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-card: 0 2px 18px rgba(20,51,58,.08);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }
body{
  font-family:var(--font-body);
  background:var(--porcelain);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* lưới an toàn chống cuộn ngang trên mobile — nếu có 1 phần tử nào đó (ảnh,
  bảng, phần tử trang trí...) lỡ rộng hơn màn hình, chặn ở đây thay vì để cả trang bị tràn ngang khó
  chịu. Không ảnh hưởng gì tới trang hiển thị bình thường. */
  max-width:100%;
}
h1,h2,h3,h4,.display-font{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--ink);
}
p{ color:var(--steel); line-height:1.7; }
a{ text-decoration:none; }
.container-xl{ max-width:1200px; }

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass-text);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.75rem;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--brass-dark);
  display:inline-block;
}

/* ---------- Spec tag — nhãn thông số kỹ thuật (signature element) ---------- */
.spec-tag{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--ink);
  border-radius:3px;
  padding:.28rem .6rem;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  line-height:1;
  white-space:nowrap;
}
.spec-tag .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--brass);
  flex:none;
}
.spec-tag.on-dark{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.spec-tag.on-dark .dot{ background:var(--brass); }

/* ---------- Navbar ---------- */
.navbar-caryroyal{
  background:var(--ink);
  padding:.85rem 0;
}
.navbar-caryroyal .navbar-brand{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.25rem;
  color:#fff;
  letter-spacing:-0.01em;
}
.navbar-caryroyal .navbar-brand small{
  display:block;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:.62rem;
  letter-spacing:.12em;
  color:var(--brass-light);
  text-transform:uppercase;
}
.navbar-caryroyal .nav-link{
  color:rgba(255,255,255,.78) !important;
  font-weight:600;
  font-size:.94rem;
  padding:.5rem 1rem !important;
}
.navbar-caryroyal .nav-link:hover,
.navbar-caryroyal .nav-link.active{ color:#fff !important; }
.navbar-caryroyal .btn-brass-nav{
  background:var(--brass);
  color:#fff;
  border-radius:var(--radius-sm);
  padding:.5rem 1.1rem;
  font-weight:600;
  font-size:.9rem;
  white-space:nowrap;
}
.navbar-caryroyal .btn-brass-nav:hover{ background:var(--brass-dark); color:#fff; }

.nav-search-toggle{
  background:none; border:none; color:#fff; font-size:1.1rem;
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin-right:.4rem; flex:none;
}
.nav-search-toggle:hover{ background:rgba(255,255,255,.12); }
.nav-search-panel{
  background:var(--ink); max-height:0; overflow:hidden; transition:max-height .25s ease;
}
.nav-search-panel.is-open{ max-height:100px; }
.nav-search-panel input{ max-width:420px; }
.navbar-caryroyal .navbar-logo-img{ height:34px; width:auto; display:block; }
.navbar-toggler{ border-color:rgba(255,255,255,.4); }
.navbar-toggler-icon{ filter:invert(1); }
.navbar-caryroyal .dropdown-menu{
  border:1px solid var(--steel-line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:.5rem;
  margin-top:.5rem;
}
.navbar-caryroyal .dropdown-item{
  font-size:.88rem; color:var(--ink); border-radius:4px; padding:.5rem .75rem;
}
.navbar-caryroyal .dropdown-item:hover,
.navbar-caryroyal .dropdown-item:focus{ background:var(--ink-soft); color:var(--ink); }
.navbar-caryroyal .dropdown-toggle::after{ opacity:.7; }
.navbar-caryroyal .dropdown-menu{
  background:var(--ink); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-sm); padding:.5rem; margin-top:.4rem;
}
.navbar-caryroyal .dropdown-item{
  color:rgba(255,255,255,.8); font-size:.88rem; border-radius:4px; padding:.5rem .75rem;
}
.navbar-caryroyal .dropdown-item:hover, .navbar-caryroyal .dropdown-item:focus{
  background:rgba(255,255,255,.08); color:#fff;
}
.navbar-caryroyal .dropdown-divider{ border-color:rgba(255,255,255,.12); }
@media (min-width:992px){
  .navbar-caryroyal .dropdown-menu{ box-shadow:0 12px 30px rgba(0,0,0,.3); }
}

/* ---------- Buttons ---------- */
.btn-brass{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  background:var(--brass);
  border:1px solid var(--brass);
  color:#fff !important;
  font-weight:600;
  border-radius:var(--radius-sm);
  padding:.75rem 1.6rem;
  white-space:normal; word-break:break-word;
  transition:background .15s ease, transform .15s ease;
}
.btn-brass:hover{ background:var(--brass-dark); border-color:var(--brass-dark); transform:translateY(-1px); }
.btn-outline-ink{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid var(--ink);
  color:var(--ink) !important;
  font-weight:600;
  border-radius:var(--radius-sm);
  padding:.75rem 1.6rem;
  background:transparent;
  white-space:normal; word-break:break-word;
}
.btn-outline-ink:hover{ background:var(--ink); color:#fff !important; }
.btn-outline-ink.active{ background:var(--ink); color:#fff !important; }
.btn-ghost-light{
  border:1px solid rgba(255,255,255,.5);
  color:#fff !important;
  font-weight:600;
  border-radius:var(--radius-sm);
  padding:.75rem 1.6rem;
}
.btn-ghost-light:hover{ background:rgba(255,255,255,.12); }

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
  color:#fff;
  padding:5.5rem 0 5rem;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,.6) 40%, transparent 90%);
  pointer-events:none;
}
.hero h1{ color:#fff; font-size:2.7rem; line-height:1.14; }
.hero p.lead{ color:rgba(255,255,255,.82); font-size:1.12rem; max-width:540px; }
.hero-visual{
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.04);
  padding:1.5rem;
}
.hero-badges{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.5rem; }

/* ---------- Section rhythm ---------- */
.section{ padding:4.5rem 0; }
.section-tight{ padding:3rem 0; }
.section-alt{ background:var(--white); border-top:1px solid var(--steel-line); border-bottom:1px solid var(--steel-line); }

/* ---------- Feature / advantage cards ---------- */
.card-feature{
  background:var(--white);
  border:1px solid var(--steel-line);
  border-radius:var(--radius-md);
  padding:1.6rem 1.4rem;
  height:100%;
  transition:border-color .15s ease, transform .15s ease;
}
.card-feature:hover{ border-color:var(--brass); transform:translateY(-3px); }
.card-feature .icon-wrap{
  width:46px; height:46px;
  border-radius:var(--radius-sm);
  background:var(--ink-soft);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  margin-bottom:1rem;
}
.card-feature h3{ font-size:1.05rem; margin-bottom:.4rem; }
.card-feature p{ font-size:.92rem; margin-bottom:0; }

/* ---------- Product placeholder visual (no photo assets) ---------- */
.product-figure{
  aspect-ratio:4/3;
  border-radius:var(--radius-md);
  border:1px solid var(--steel-line);
  background:
    repeating-linear-gradient(135deg, rgba(20,51,58,.05) 0 2px, transparent 2px 14px),
    var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; text-align:center; padding:1rem;
}
.product-figure i{ font-size:2.4rem; color:var(--ink); opacity:.55; }
.product-figure span{ font-family:var(--font-mono); font-size:.72rem; color:var(--steel); letter-spacing:.04em; }

.hero-visual .product-figure{ position:relative; overflow:hidden; text-decoration:none; }

/* ---------- Ảnh minh hoạ tự động chèn vào bài viết AI (ảnh thật từ thư viện sản phẩm) ---------- */
.bai-viet-anh-minh-hoa{ margin:1.75rem 0; }
.bai-viet-anh-minh-hoa img{
  width:100%; border-radius:var(--radius-md); display:block; aspect-ratio:16/10; object-fit:cover;
}
.bai-viet-anh-minh-hoa figcaption{
  text-align:center; font-size:.82rem; color:var(--steel); margin-top:.6rem; font-style:italic;
}
.hero-visual .product-figure:has(img) span{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  background:linear-gradient(to top, rgba(20,51,58,.85), transparent);
  color:#fff; padding:1.4rem .6rem .5rem; margin:0;
}
.hero-visual .product-figure:hover{ border-color:var(--brass); }

/* ---------- Pricing table ---------- */
.price-card{
  background:var(--white);
  border:1px solid var(--steel-line);
  border-radius:var(--radius-md);
  padding:1.75rem;
  height:100%;
  position:relative;
}
.price-card.featured{
  border:1px solid var(--brass);
  box-shadow:var(--shadow-card);
}
.price-card.featured .ribbon{
  position:absolute; top:-12px; left:1.5rem;
  background:var(--brass-dark); color:#fff;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase;
  padding:.28rem .6rem; border-radius:3px;
}
.price-card .price{
  font-family:var(--font-mono); font-weight:600;
  font-size:1.9rem; color:var(--ink);
  margin:.6rem 0 1rem;
}
.price-card .price small{ font-size:.9rem; color:var(--steel); font-weight:400; }

/* ---------- Khối giá: giá gốc gạch ngang + giá bán + nhãn % giảm ---------- */
.price-wrap{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem; margin:.6rem 0 1rem; }
.price-old{ font-family:var(--font-mono); font-size:.95rem; color:var(--steel); text-decoration:line-through; }
.price-sale{ font-family:var(--font-mono); font-weight:700; font-size:1.9rem; color:var(--ink); }
.discount-badge{
  font-family:var(--font-mono); font-size:.75rem; font-weight:700; color:#fff;
  background:var(--danger); padding:.15rem .5rem; border-radius:4px; letter-spacing:.02em;
}
.price-compact .price-wrap{ margin:.2rem 0; gap:.35rem; }
.price-compact .price-old{ font-size:.72rem; }
.price-compact .price-sale{ font-size:.92rem; }
.price-compact .discount-badge{ font-size:.62rem; padding:.1rem .35rem; }

/* ---------- Trạng thái hết hàng ---------- */
.price-card.out-of-stock{ opacity:.72; }
.price-lien-he{ font-size:1.3rem !important; color:var(--steel) !important; }
.out-of-stock-badge{
  font-family:var(--font-mono); font-size:.72rem; font-weight:600; color:var(--steel);
  background:var(--ink-soft); padding:.15rem .5rem; border-radius:4px;
}

/* ---------- "Combo này gồm có" ---------- */
.combo-thanh-phan-box{ background:var(--ink-soft); border-radius:var(--radius-sm); padding:1rem 1.1rem; }
.combo-thanh-phan-title{ font-weight:600; font-size:.88rem; margin-bottom:.5rem; color:var(--ink); }
.combo-thanh-phan-list{ list-style:none; padding:0; margin:0; }
.combo-thanh-phan-list li{
  display:flex; justify-content:space-between; gap:.5rem; font-size:.85rem;
  padding:.35rem 0; border-bottom:1px dashed var(--steel-line);
}
.combo-thanh-phan-list li:last-child{ border-bottom:none; }
.combo-thanh-phan-list a{ color:var(--ink); }
.combo-thanh-phan-list a:hover{ color:var(--brass-dark); }

/* ---------- Duyệt combo theo khoảng giá ---------- */
.combo-price-filter{ display:flex; flex-wrap:wrap; gap:.6rem; }
.combo-price-chip{
  display:inline-block; padding:.5rem 1rem; border-radius:999px; border:1px solid var(--steel-line);
  font-size:.85rem; color:var(--ink); background:#fff; transition:.15s;
}
.combo-price-chip:hover{ border-color:var(--brass); color:var(--brass-dark); }
.combo-price-chip.active{ background:var(--brass); border-color:var(--brass); color:#fff; }

/* ---------- Bảng so sánh "mua lẻ vs combo" ---------- */
.so-sanh-table{ border:1px solid var(--steel-line); border-radius:var(--radius-md); overflow:hidden; }
.so-sanh-table thead th{
  background:var(--ink); color:#fff; font-weight:600; padding:.9rem 1.2rem; border:none; text-align:center;
}
.so-sanh-table thead th:last-child{ background:var(--brass); }
.so-sanh-table tbody td{ padding:.85rem 1.2rem; border-bottom:1px solid var(--steel-line); text-align:center; vertical-align:middle; }
.so-sanh-table tbody td:first-child{ color:var(--steel); }
.so-sanh-table tbody td:last-child{ color:var(--ink); font-weight:600; }
.so-sanh-table tbody tr:last-child td{ border-bottom:none; }
.price-card ul{ list-style:none; padding:0; margin:0 0 1.5rem; }
.price-card ul li{
  display:flex; gap:.55rem; align-items:flex-start;
  font-size:.92rem; color:var(--ink); padding:.4rem 0;
  border-bottom:1px dashed var(--steel-line);
}
.price-card ul li:last-child{ border-bottom:none; }
.price-card ul li i{ color:var(--success); margin-top:.2rem; }
.product-card-image-link{ display:block; cursor:pointer; }
.product-card-title-link{ color:inherit; }
.product-card-title-link:hover{ color:var(--brass-dark); }
.price-card .btn-outline-ink, .price-card .btn-brass{ padding:.65rem .9rem; font-size:.86rem; }
@media (max-width:420px){
  .price-card .d-flex.gap-2{ flex-direction:column; }
}

/* ---------- Testimonials ---------- */
.review-card{
  background:var(--white);
  border:1px solid var(--steel-line);
  border-radius:var(--radius-md);
  padding:1.5rem;
  height:100%;
}
.review-card .stars{ color:var(--brass-dark); font-size:.85rem; margin-bottom:.6rem; letter-spacing:.15em; }
.review-card p.quote{ color:var(--ink); font-size:.95rem; font-style:italic; }
.review-avatar{
  width:38px; height:38px; border-radius:50%;
  background:var(--ink-soft); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-family:var(--font-display); font-size:.9rem;
}

/* ---------- Gallery thumbnails + lightbox popup ---------- */
.gallery-thumb{
  border:0; background:none; padding:0; width:100%;
  cursor:pointer; display:block; text-align:left;
}
.gallery-thumb .product-figure{
  transition:transform .15s ease, border-color .15s ease;
  position:relative;
}
.gallery-thumb .zoom-hint{
  position:absolute; top:.5rem; right:.5rem;
  width:28px; height:28px; border-radius:50%;
  background:rgba(20,51,58,.85); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; opacity:0; transition:opacity .15s ease;
}
.gallery-thumb:hover .product-figure{ border-color:var(--brass); transform:translateY(-3px); }
.gallery-thumb:hover .zoom-hint{ opacity:1; }
.gallery-thumb figcaption{
  font-size:.8rem; color:var(--steel); margin-top:.5rem; text-align:center;
}

.modal-content{
  border-radius:var(--radius-md);
  border:1px solid var(--steel-line);
  overflow:hidden;
}
.modal-header{ border-bottom:1px solid var(--steel-line); }
.modal-header .modal-title{ font-family:var(--font-display); font-weight:800; color:var(--ink); }

.gallery-carousel .carousel-item .product-figure{
  aspect-ratio:16/10; border-radius:0; border:none; height:100%;
}
.gallery-carousel .carousel-caption-static{
  padding:.6rem 1rem; font-size:.85rem; color:var(--steel);
  border-top:1px solid var(--steel-line); text-align:center;
}
.gallery-carousel .carousel-control-prev,
.gallery-carousel .carousel-control-next{ width:56px; }
.gallery-carousel .carousel-control-prev-icon,
.gallery-carousel .carousel-control-next-icon{
  background-color:var(--ink);
  border-radius:50%;
  padding:11px;
  background-size:55%;
  background-repeat:no-repeat;
  background-position:center;
}
.js-gallery-counter{
  font-family:var(--font-mono); font-size:.78rem; color:var(--steel);
  border-top:1px solid var(--steel-line); text-align:center; padding:.6rem 0;
}

/* ---------- Hero carousel (banner đầu trang, 5–8 ảnh) ---------- */
.hero-carousel .carousel-item .product-figure{
  aspect-ratio:4/3; border:none; border-radius:var(--radius-md);
  background:rgba(255,255,255,.06);
}
.hero-carousel .carousel-item .product-figure i{ color:#fff; opacity:.65; }
.hero-carousel .carousel-item .product-figure span{ color:rgba(255,255,255,.7); }
.hero-carousel .carousel-indicators{ margin-bottom:.35rem; }
.hero-carousel .carousel-indicators [data-bs-target]{
  background-color:var(--brass); width:7px; height:7px; border-radius:50%;
  opacity:.45; margin:0 4px; border:0;
}
.hero-carousel .carousel-indicators .active{ opacity:1; }
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next{ width:44px; opacity:1; }
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon{
  background-color:rgba(20,51,58,.55); /* nền tối rõ ràng — trước đây dùng nền trắng trong suốt khiến
  mũi tên trắng gần như vô hình (trắng trên trắng) */
  border-radius:50%; padding:10px;
  background-size:55%; background-repeat:no-repeat; background-position:center;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.hero-carousel .carousel-control-prev-icon:hover,
.hero-carousel .carousel-control-next-icon:hover{ background-color:rgba(20,51,58,.8); }

/* ---------- Mini carousel bên trong price-card (3–5 ảnh chi tiết/mẫu) ---------- */
.card-carousel{
  margin:-1.75rem -1.75rem 1.1rem;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  overflow:hidden;
}
.card-carousel .carousel-item .product-figure{
  aspect-ratio:4/3; border:none; border-radius:0;
}
.card-carousel .carousel-indicators{ margin-bottom:.3rem; }
.card-carousel .carousel-indicators [data-bs-target]{
  background-color:var(--ink); width:5px; height:5px; border-radius:50%;
  opacity:.35; margin:0 3px; border:0;
}
.card-carousel .carousel-indicators .active{ opacity:.9; }
.card-carousel .carousel-control-prev,
.card-carousel .carousel-control-next{ width:34px; }
.card-carousel .carousel-control-prev-icon,
.card-carousel .carousel-control-next-icon{
  background-color:rgba(20,51,58,.75); /* tăng độ đậm từ .55 lên .75 — trước đây quá mờ khi đè lên ảnh sáng màu */
  border-radius:50%; padding:7px; width:26px; height:26px;
  background-size:55%; background-repeat:no-repeat; background-position:center;
}
.price-card.featured .card-carousel{ margin-top:calc(-1.75rem - 4px); }

/* ---------- FAQ (accordion) ---------- */
.accordion-caryroyal .accordion-item{
  border:1px solid var(--steel-line);
  border-radius:var(--radius-md) !important;
  margin-bottom:.7rem;
  overflow:hidden;
}
.accordion-caryroyal .accordion-button{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--ink);
  background:var(--white);
}
.accordion-caryroyal .accordion-button:not(.collapsed){
  background:var(--ink-soft);
  color:var(--ink);
  box-shadow:none;
}
.accordion-caryroyal .accordion-button:focus{ box-shadow:none; border-color:var(--steel-line); }
.accordion-caryroyal .accordion-button::after{ filter:none; }

/* ---------- Policy strip ---------- */
.policy-item{ display:flex; gap:.9rem; align-items:flex-start; }
.policy-item i{
  width:42px;height:42px; flex:none;
  border-radius:var(--radius-sm);
  background:var(--brass-soft); color:var(--brass-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
}
.policy-item h3{ font-size:.98rem; margin-bottom:.2rem; }
.policy-item p{ font-size:.86rem; margin-bottom:0; }

/* ---------- Lead form ---------- */
.lead-form-panel{
  background:var(--ink);
  color:#fff;
  border-radius:var(--radius-md);
  padding:2.25rem;
}
.lead-form-panel h3{ color:#fff; }
.lead-form-panel p{ color:rgba(255,255,255,.75); }
.form-control, .form-select{
  border-radius:var(--radius-sm);
  border:1px solid var(--steel-line);
  padding:.65rem .85rem;
  font-size:16px; /* TỐI THIỂU 16px — dưới mức này, Safari trên iPhone tự động PHÓNG TO cả trang mỗi
  khi khách bấm vào ô nhập (hành vi mặc định của trình duyệt, không sửa được bằng cách khác ngoài
  tăng cỡ chữ) — ảnh hưởng trực tiếp tới mọi form liên hệ/đặt hàng/bình luận/đánh giá trên site. */
}
.form-control:focus, .form-select:focus{
  border-color:var(--brass);
  box-shadow:0 0 0 .2rem rgba(184,134,59,.18);
}
.form-label{ font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:.35rem; }
.lead-form-panel .form-label{ color:#fff; }
#formAlert{ display:none; }

/* ---------- Bộ chọn nhanh "Xây mới / Sửa chữa" trong form tư vấn ---------- */
.nhu-cau-pills{ display:flex; gap:.75rem; flex-wrap:wrap; }
.nhu-cau-pill{ flex:1; min-width:150px; margin:0; cursor:pointer; }
.nhu-cau-pill input{ position:absolute; opacity:0; width:0; height:0; }
.nhu-cau-pill span{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1rem; border:1.5px solid rgba(255,255,255,.25); border-radius:var(--radius-sm);
  font-weight:600; font-size:.92rem; color:#fff; background:rgba(255,255,255,.06);
  transition:.15s ease; text-align:center;
}
.nhu-cau-pill span i{ font-size:1.05rem; }
.nhu-cau-pill:hover span{ border-color:rgba(255,255,255,.5); }
.nhu-cau-pill input:checked + span{
  border-color:var(--brass-dark); background:var(--brass-dark); color:#fff;
}
.nhu-cau-pill input:focus-visible + span{ outline:2px solid var(--brass); outline-offset:2px; }

/* ---------- Funnel steps (genuinely sequential) ---------- */
.funnel-step{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1rem 0;
  border-bottom:1px dashed var(--steel-line);
}
.funnel-step:last-child{ border-bottom:none; }
.funnel-step .num{
  font-family:var(--font-mono); font-weight:600; font-size:.85rem;
  color:var(--brass-dark); background:var(--brass-soft);
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}

/* ---------- Footer ---------- */
.footer-caryroyal{ background:var(--ink); color:#C9D2D1; padding:3rem 0 1.5rem; }

/* ---------- Box từ khoá kèm link ở chân trang ---------- */
.tu-khoa-footer-box{ background:var(--ink-soft); padding:1.1rem 0; border-top:1px solid var(--steel-line); }
.tu-khoa-footer-list{ display:flex; flex-wrap:wrap; gap:.5rem .7rem; font-size:.78rem; }
.tu-khoa-footer-list a{ color:var(--steel); text-decoration:none; }
.tu-khoa-footer-list a:hover{ color:var(--brass-dark); text-decoration:underline; }
.tu-khoa-footer-list a:not(:last-child)::after{ content:"·"; margin-left:.7rem; color:var(--steel-line); }
.footer-caryroyal h3{ color:#fff; font-family:var(--font-display); font-weight:700; font-size:1rem; margin-bottom:1rem; }
.footer-caryroyal a{ color:#B9C4C3; font-size:.9rem; }
.footer-caryroyal a:hover{ color:var(--brass-light); }
.footer-caryroyal .brand-line{ font-family:var(--font-mono); font-size:.72rem; color:#9BA9A7; letter-spacing:.05em; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:2rem; padding-top:1.25rem; font-size:.8rem; }

/* ---------- Floating contact buttons ---------- */
.floating-actions{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:1040;
  display:flex; flex-direction:column; gap:.6rem;
}
.floating-actions a{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.4rem;
  box-shadow:0 6px 18px rgba(20,51,58,.28);
  transition:transform .15s ease;
}
.floating-actions a:hover{ transform:scale(1.07); }
.fab-zalo{ background:#0068FF; }

/* ---------- Bong bóng gợi ý nhắn Zalo (chủ động, hiện sau vài giây) ---------- */
.zalo-bubble{
  position:fixed; right:1.1rem; bottom:8rem; z-index:1039;
  max-width:270px; background:#fff; border-radius:var(--radius-md);
  box-shadow:0 12px 32px rgba(20,51,58,.25); padding:.9rem 1.1rem .9rem .9rem;
  display:flex; gap:.7rem; align-items:flex-start; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.96);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.zalo-bubble.is-visible{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.zalo-bubble::after{
  content:""; position:absolute; right:22px; bottom:-8px;
  width:16px; height:16px; background:#fff;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}
.zalo-bubble-avatar{
  width:38px; height:38px; flex:none; border-radius:50%; background:#0068FF; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.zalo-bubble-text{ display:flex; flex-direction:column; gap:.15rem; }
.zalo-bubble-text strong{ font-size:.87rem; color:var(--ink); line-height:1.3; }
.zalo-bubble-text span{ font-size:.76rem; color:var(--steel); line-height:1.3; }
.zalo-bubble-close{
  position:absolute; top:-8px; right:-8px;
  width:22px; height:22px; border-radius:50%; border:1px solid var(--steel-line); background:#fff;
  color:var(--steel); font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
@media (max-width:420px){
  .zalo-bubble{ right:.7rem; left:.7rem; max-width:none; bottom:7.5rem; }
  body.has-cta-mobile .zalo-bubble{ bottom:11.5rem; }
}

/* ---------- Thanh CTA cố định dưới màn hình (Gọi/Zalo/Nhận báo giá) — CHỈ hiện trên mobile ---------- */
.thanh-cta-mobile{ display:none; }
@media (max-width:767.98px){
  .thanh-cta-mobile{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1040;
    background:#fff; box-shadow:0 -6px 20px rgba(20,51,58,.15);
    padding:.5rem .4rem calc(.5rem + env(safe-area-inset-bottom, 0px));
  }
  body.has-cta-mobile{ padding-bottom:4.2rem; } /* chừa chỗ cho thanh CTA cố định, tránh che nội dung/footer cuối trang */
  .cta-mobile-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem;
    padding:.4rem .2rem; font-size:.68rem; font-weight:600; text-decoration:none; border-radius:var(--radius-sm);
  }
  .cta-mobile-item i{ font-size:1.15rem; }
  .cta-goi{ color:var(--ink); }
  .cta-zalo{ color:#0068FF; }
  .cta-bao-gia{ background:var(--brass); color:#fff; }
}
.zalo-copy-toast{
  position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:.75rem 1.2rem; border-radius:999px;
  font-size:.85rem; box-shadow:0 10px 26px rgba(0,0,0,.3);
  z-index:2100; opacity:0; transition:opacity .25s ease, transform .25s ease;
}
.zalo-copy-toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Widget "Hỏi AI" — nút kích hoạt (nhẹ, luôn tải) ---------- */
.ai-chat-fab{
  position:fixed; right:1.1rem; bottom:12.2rem; z-index:1038;
  width:52px; height:52px; border-radius:50%; border:none;
  background:linear-gradient(135deg, var(--brass), var(--brass-dark)); color:#fff;
  font-size:1.3rem; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(184,134,59,.4); cursor:pointer; transition:transform .15s;
}
.ai-chat-fab:hover{ transform:scale(1.07); }
.ai-chat-fab.is-loading{ opacity:.6; pointer-events:none; }
.ai-chat-fab.is-loading i{ animation:aiSpin 1s linear infinite; }
@keyframes aiSpin{ to{ transform:rotate(360deg); } }
.ai-chat-fab.is-nhac{ animation:aiNhacRung 1.2s ease-in-out 3; }
.ai-chat-fab.is-nhac::after{
  content:"Cần tư vấn không?"; position:absolute; right:60px; top:50%; transform:translateY(-50%);
  background:var(--ink); color:#fff; font-family:var(--font-body); font-size:.78rem; font-weight:500;
  padding:.45rem .8rem; border-radius:8px; white-space:nowrap; box-shadow:0 6px 16px rgba(0,0,0,.25);
  animation:aiNhacFade 6s ease forwards;
}
@keyframes aiNhacRung{
  0%, 100%{ transform:scale(1) rotate(0); }
  20%{ transform:scale(1.12) rotate(-8deg); }
  40%{ transform:scale(1.12) rotate(8deg); }
  60%{ transform:scale(1.05) rotate(-4deg); }
}
@keyframes aiNhacFade{
  0%{ opacity:0; transform:translateY(-50%) translateX(6px); }
  10%, 80%{ opacity:1; transform:translateY(-50%) translateX(0); }
  100%{ opacity:0; transform:translateY(-50%) translateX(0); }
}
@media (max-width:420px){
  .ai-chat-fab.is-nhac::after{ display:none; } /* màn hình hẹp không đủ chỗ hiện tooltip cạnh nút */
}

/* ---------- Khung chat (chỉ dựng khi JS lazy-load xong) ---------- */
.ai-chat-panel{
  position:fixed; right:1.1rem; bottom:12.2rem; z-index:1100;
  width:min(340px, calc(100vw - 2.2rem)); height:min(440px, 70vh);
  background:#fff; border-radius:var(--radius-md); box-shadow:0 20px 50px rgba(0,0,0,.3);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.97);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.ai-chat-panel.is-open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.ai-chat-header{
  background:var(--ink); color:#fff; padding:.9rem 1rem; font-weight:600; font-size:.9rem;
  display:flex; justify-content:space-between; align-items:center;
}
.ai-chat-close{ background:none; border:none; color:#fff; font-size:1.3rem; line-height:1; cursor:pointer; opacity:.8; }
.ai-chat-close:hover{ opacity:1; }
.ai-chat-messages{ flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; }
.ai-chat-msg{ max-width:85%; padding:.55rem .8rem; border-radius:12px; font-size:.85rem; line-height:1.45; }
.ai-chat-msg-bot{ background:var(--ink-soft); color:var(--ink); align-self:flex-start; border-bottom-left-radius:3px; }
.ai-chat-msg-user{ background:var(--brass); color:#fff; align-self:flex-end; border-bottom-right-radius:3px; }
.ai-chat-msg.is-loading{ opacity:.6; font-style:italic; }
.ai-chat-form{ display:flex; gap:.5rem; padding:.7rem; border-top:1px solid var(--steel-line); }
.ai-chat-form input{
  flex:1; border:1px solid var(--steel-line); border-radius:20px; padding:.5rem .9rem; font-size:.85rem; outline:none;
}
.ai-chat-form input:focus{ border-color:var(--brass); }
.ai-chat-form button{
  width:38px; height:38px; border-radius:50%; border:none; background:var(--brass); color:#fff;
  display:flex; align-items:center; justify-content:center; flex:none;
}
@media (max-width:420px){
  .ai-chat-fab{ right:.7rem; bottom:11.5rem; }
  body.has-cta-mobile .ai-chat-fab{ bottom:15.5rem; }
  .ai-chat-panel{ right:.7rem; left:.7rem; width:auto; bottom:11.5rem; }
}
.fab-phone{ background:var(--brass); position:relative; }
.fab-phone::after{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--brass);
  animation:pulse-ring 2.2s ease-out infinite;
}
@keyframes pulse-ring{
  0%{ transform:scale(1); opacity:.6; }
  100%{ transform:scale(1.6); opacity:0; }
}

/* ---------- Utility ---------- */
.text-brass{ color:var(--brass) !important; }
.bg-porcelain{ background:var(--porcelain) !important; }
.divider-line{ height:1px; background:var(--steel-line); border:none; margin:0; }
.mono{ font-family:var(--font-mono); }

@media (max-width:767.98px){
  .hero{ padding:3.2rem 0 2.8rem; text-align:center; }
  .hero h1{ font-size:2.05rem; }
  .hero p.lead{ margin-left:auto; margin-right:auto; }
  .hero-badges{ justify-content:center; }
  .section{ padding:3rem 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .fab-phone::after{ animation:none; }
  *{ transition:none !important; }
}

/* =========================================================
   Nội dung gộp từ blog.css (gộp để giảm số request CSS)
   ========================================================= */
/* =========================================================
   CARYROYAL — blog.css
   Style riêng cho khu vực bài viết (danh sách + chi tiết)
   ========================================================= */

/* ---------- Category pills (bộ lọc danh mục) ---------- */
.category-pills{ display:flex; flex-wrap:wrap; gap:.6rem; }
.category-pill{
  font-family:var(--font-mono);
  font-size:.78rem;
  padding:.45rem 1rem;
  border:1px solid var(--steel-line);
  border-radius:999px;
  color:var(--ink);
  background:var(--white);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.category-pill:hover{ border-color:var(--brass); color:var(--ink); }
.category-pill.active{
  background:var(--ink); border-color:var(--ink); color:#fff;
}

/* ---------- Article card ---------- */
.article-card{
  background:var(--white);
  border:1px solid var(--steel-line);
  border-radius:var(--radius-md);
  overflow:hidden;
  height:100%;
  display:flex;
  flex-direction:column;
  transition:transform .15s ease, border-color .15s ease;
}
.article-card:hover{ transform:translateY(-3px); border-color:var(--brass); }
.article-card .article-thumb{
  aspect-ratio:16/10;
  background:repeating-linear-gradient(135deg, rgba(20,51,58,.05) 0 2px, transparent 2px 14px), var(--white);
  border-bottom:1px solid var(--steel-line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.article-card .article-thumb i{ color:var(--ink); opacity:.55; font-size:2rem; }
.article-card .article-thumb img{ width:100%; height:100%; object-fit:cover; }
.article-card .article-body{ padding:1.3rem; display:flex; flex-direction:column; flex:1; }
.article-card .article-meta{
  font-family:var(--font-mono); font-size:.72rem; color:var(--steel);
  display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem; text-transform:uppercase; letter-spacing:.04em;
}
.article-card .article-meta .badge-cat{
  background:var(--brass-soft); color:var(--brass-dark);
  padding:.2rem .55rem; border-radius:3px; font-weight:600;
}
.article-card h3{ font-size:1.05rem; margin-bottom:.5rem; line-height:1.35; }
.article-card h3 a{ color:var(--ink); }
.article-card h3 a:hover{ color:var(--brass-dark); }
.article-card p{ font-size:.9rem; margin-bottom:1rem; flex:1; }
.article-card .article-readmore{
  font-family:var(--font-mono); font-size:.78rem; font-weight:600;
  color:var(--brass-dark); display:inline-flex; align-items:center; gap:.35rem;
}

/* ---------- Load more (AJAX) ---------- */
#loadMoreWrap{ text-align:center; margin-top:2.5rem; }
#loadMoreStatus{ font-family:var(--font-mono); font-size:.8rem; color:var(--steel); margin-top:.8rem; }

/* ---------- Article detail ---------- */
.article-hero{
  background:linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
  color:#fff; padding:3rem 0 2.5rem;
}
.article-hero h1{ color:#fff; font-size:2.1rem; line-height:1.25; }
.article-hero .article-meta-top{
  font-family:var(--font-mono); font-size:.8rem; color:rgba(255,255,255,.7);
  display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem;
}
.article-hero .breadcrumb-caryroyal a{ color:rgba(255,255,255,.65); font-size:.82rem; }
.article-hero .breadcrumb-caryroyal a:hover{ color:#fff; }
.article-hero .breadcrumb-caryroyal .divider{ color:rgba(255,255,255,.4); margin:0 .4rem; }

.article-content{ font-size:1.02rem; color:var(--ink); line-height:1.85; }
.article-content h2{ font-size:1.4rem; margin-top:2rem; margin-bottom:.8rem; }
.article-content h3{ font-size:1.15rem; margin-top:1.5rem; margin-bottom:.6rem; }
.article-content p{ color:var(--ink); margin-bottom:1.1rem; }
.article-content ul, .article-content ol{ margin-bottom:1.1rem; color:var(--ink); }
.article-content img{ max-width:100%; border-radius:var(--radius-md); margin:1rem 0; }
.article-inline-image{ margin:1.75rem 0; text-align:center; }
.article-inline-image img{
  max-width:100%; border-radius:var(--radius-md); margin:0;
  box-shadow:0 10px 26px rgba(20,51,58,.14);
}
.article-content a{ color:var(--brass-dark); text-decoration:underline; }

.article-sidebar .sidebar-box{
  background:var(--white); border:1px solid var(--steel-line); border-radius:var(--radius-md);
  padding:1.4rem; margin-bottom:1.5rem;
}
.article-sidebar .sidebar-box h2{ font-size:.98rem; margin-bottom:1rem; }
.related-article-item{ display:flex; gap:.8rem; margin-bottom:1rem; }
.related-article-item:last-child{ margin-bottom:0; }
.related-article-item .thumb{
  width:64px; height:56px; flex:none; border-radius:4px;
  background:var(--ink-soft); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; opacity:.7;
}
.related-article-item h3{ font-size:.86rem; margin-bottom:.2rem; line-height:1.35; font-weight:600; }
.related-article-item h3 a{ color:var(--ink); }
.related-article-item h3 a:hover{ color:var(--brass-dark); }
.related-article-item .meta{ font-family:var(--font-mono); font-size:.7rem; color:var(--steel); }

.article-not-found{ text-align:center; padding:4rem 0; }

/* ---------- Mục lục tự động (chèn sau đoạn đầu bài viết) ---------- */
.article-toc{
  background:var(--white); border:1px solid var(--steel-line); border-left:3px solid var(--brass);
  border-radius:var(--radius-md); padding:1.2rem 1.4rem; margin:1.6rem 0 2rem;
}
.article-toc-title{ font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--ink); margin-bottom:.6rem; }
.article-toc ul{ list-style:none; margin:0; padding:0; columns:1; }
.article-toc li{ padding:.3rem 0; font-size:.9rem; }
.article-toc li.toc-sub{ padding-left:1.2rem; font-size:.85rem; }
.article-toc a{ color:var(--steel); }
.article-toc a:hover{ color:var(--brass-dark); }

/* ---------- Ô "3 bài viết liên quan" chèn giữa bài ---------- */
.article-inline-related{
  background:var(--ink-soft); border-radius:var(--radius-md);
  padding:1.2rem 1.4rem; margin:2rem 0;
}
.inline-related-title{ font-family:var(--font-display); font-weight:700; font-size:.92rem; color:var(--ink); margin-bottom:.7rem; }
.inline-related-list{ display:flex; flex-direction:column; gap:.5rem; }
.inline-related-list a{
  color:var(--ink); font-size:.9rem; font-weight:600;
  display:flex; align-items:center; gap:.4rem;
}
.inline-related-list a::before{ content:"\2192"; color:var(--brass-dark); }
.inline-related-list a:hover{ color:var(--brass-dark); }

/* ---------- Biến thể "Bài viết hot" (chọn ngẫu nhiên, khác box liên quan ở trên) — viền nhấn màu
   đồng thau để phân biệt rõ với box "liên quan" thông thường nếu 2 box xuất hiện gần nhau ---------- */
.article-inline-hot{ border:1px solid var(--brass); background:#fff; }
.article-inline-hot .inline-related-title{ color:var(--brass-dark); }

/* ---------- Link từ khoá tự động chèn trong nội dung ---------- */
.article-content a{ text-decoration:underline; text-decoration-color:var(--brass); text-underline-offset:2px; }

/* ---------- Tag của bài viết ---------- */
.article-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.5rem 0; }
.tag-chip{
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink);
  background:var(--white); border:1px solid var(--steel-line); border-radius:999px;
  padding:.35rem .9rem;
}
.tag-chip:hover{ border-color:var(--brass); color:var(--brass-dark); }
.active-tag-filter{
  display:flex; align-items:center; gap:.8rem; font-size:.88rem; color:var(--steel);
  margin-top:.8rem; padding-top:.8rem; border-top:1px dashed var(--steel-line);
}
.active-tag-filter a{ color:var(--brass-dark); font-weight:600; }

/* ---------- Box tác giả ---------- */
.author-box{
  display:flex; gap:1.3rem; align-items:center;
  background:linear-gradient(135deg, var(--ink-soft) 0%, var(--white) 65%);
  border:1px solid var(--steel-line); border-left:3px solid var(--brass);
  border-radius:var(--radius-md);
  padding:1.5rem 1.7rem; margin-top:1.5rem;
}
.author-avatar{
  width:72px; height:72px; flex:none; border-radius:50%; overflow:hidden;
  background:var(--ink); color:var(--brass-light); border:2px solid var(--brass-soft);
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
}
.author-avatar img{ width:100%; height:100%; object-fit:cover; }
.author-label{
  font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--brass-dark); font-weight:600;
  display:flex; align-items:center; gap:.4rem;
}
.author-label::before{ content:""; width:16px; height:1px; background:var(--brass-dark); display:inline-block; }
.author-name{ font-family:var(--font-display); font-size:1.15rem; font-weight:800; margin:.25rem 0 .45rem; color:var(--ink); }
.author-bio{ font-size:.87rem; color:var(--steel); margin-bottom:.7rem; line-height:1.55; }
.author-social{ display:flex; gap:.6rem; }
.author-social a{
  width:34px; height:34px; border-radius:50%; background:#fff; border:1px solid var(--steel-line); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:.95rem; transition:.15s;
}
.author-social a:hover{ background:var(--brass); border-color:var(--brass); color:#fff; }
@media (max-width:575.98px){
  .author-box{ flex-direction:column; text-align:center; align-items:center; }
  .author-label::before{ display:none; }
}

/* ---------- Box bình luận (hỏi-đáp: bình luận thật do AI tạo qua cron + form minh hoạ) ---------- */
.comment-box{
  background:var(--white); border:1px solid var(--steel-line); border-radius:var(--radius-md);
  padding:1.6rem;
}
.comment-item{ display:flex; gap:.9rem; padding:.9rem 0; border-bottom:1px dashed var(--steel-line); }
.comment-item:last-child{ border-bottom:none; }
.comment-avatar{
  width:38px; height:38px; flex:none; border-radius:50%;
  background:var(--brass-soft); color:var(--brass-dark); font-family:var(--font-display); font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.comment-name{ font-weight:600; font-size:.9rem; color:var(--ink); margin-bottom:.15rem; }
.comment-text{ font-size:.88rem; color:var(--steel); margin-bottom:0; }
.comment-reply{
  margin-top:.6rem; padding:.7rem .9rem; background:var(--ink-soft); border-radius:var(--radius-sm);
  border-left:2px solid var(--brass);
}
.comment-reply-label{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--brass-dark); font-weight:600; margin-bottom:.2rem; }
.comment-reply p{ font-size:.85rem; color:var(--ink); }

/* ---------- Popup quảng cáo ---------- */
.popup-overlay{
  position:fixed; inset:0; background:rgba(20,51,58,.72);
  display:flex; align-items:center; justify-content:center; padding:1rem;
  z-index:2000; opacity:0; visibility:hidden; transition:opacity .25s ease;
}
.popup-overlay.is-visible{ opacity:1; visibility:visible; }
.popup-box{
  background:#fff; border-radius:var(--radius-md); max-width:420px; width:100%;
  position:relative; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.35);
  transform:translateY(16px) scale(.97); transition:transform .25s ease;
}
.popup-overlay.is-visible .popup-box{ transform:translateY(0) scale(1); }
.popup-close{
  position:absolute; top:.6rem; right:.6rem; z-index:2;
  width:32px; height:32px; border-radius:50%; border:none; background:rgba(0,0,0,.45); color:#fff;
  font-size:1.3rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.popup-close:hover{ background:var(--brass); }
.popup-image{ width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--ink-soft); }
.popup-image img{ width:100%; height:100%; object-fit:cover; }
.popup-body{ padding:1.5rem; }
.popup-eyebrow{
  font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--brass-dark); font-weight:600; display:block; margin-bottom:.4rem;
}
.popup-body h3{ font-family:var(--font-display); font-size:1.2rem; font-weight:800; margin-bottom:.5rem; }
.popup-body p{ font-size:.9rem; color:var(--steel); margin-bottom:1rem; }
.popup-price{ font-family:var(--font-mono); font-size:1.3rem; font-weight:600; color:var(--brass-dark); margin-bottom:.6rem; }
.popup-lead-form .form-control{ font-size:.92rem; }
.popup-lead-thanks{ text-align:center; color:var(--success); font-size:.92rem; padding:1rem 0; }
@media (max-width:420px){
  .popup-body{ padding:1.2rem; }
}

/* ---------- So sánh sản phẩm ---------- */
.js-them-so-sanh.is-active{ background:var(--brass); color:#fff; border-color:var(--brass); }
.thanh-so-sanh{
  position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:999px;
  display:flex; align-items:center; gap:.8rem; box-shadow:0 12px 30px rgba(0,0,0,.3); z-index:1200; font-size:.85rem;
}
.thanh-so-sanh .btn-brass, .thanh-so-sanh .btn-outline-ink{ padding:.35rem .8rem; font-size:.8rem; }
.compare-table{ width:100%; border-collapse:collapse; background:#fff; }
.compare-table th, .compare-table td{ border:1px solid var(--steel-line); padding:1rem; vertical-align:top; }
.compare-table th{ min-width:180px; text-align:center; }
.compare-table th img{ width:100%; max-width:140px; aspect-ratio:1/1; object-fit:cover; border-radius:6px; margin-bottom:.5rem; }
.compare-table td:first-child{ font-weight:600; background:var(--ink-soft); white-space:nowrap; }
.compare-ten{ font-size:.85rem; font-weight:600; color:var(--ink); }
.compare-gia{ font-family:var(--font-mono); font-weight:700; color:var(--brass-dark); text-align:center; }

/* ---------- Đã xem gần đây ---------- */
.da-xem-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:1rem; }
.da-xem-item{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink); }
.da-xem-item img, .da-xem-noimg{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; border:1px solid var(--steel-line); margin-bottom:.4rem;
}
.da-xem-noimg{ display:flex; align-items:center; justify-content:center; color:var(--steel); background:var(--ink-soft); }
.da-xem-ten{ font-size:.8rem; font-weight:600; line-height:1.3; }
.da-xem-gia{ font-family:var(--font-mono); font-size:.78rem; color:var(--brass-dark); margin-top:.15rem; }

/* ---------- Đánh giá khách hàng (thật, khác bình luận AI) ---------- */
.review-box{
  background:var(--white); border:1px solid var(--steel-line); border-radius:var(--radius-md);
  padding:1.6rem;
}
.review-avg-so{ font-family:var(--font-mono); font-size:1.3rem; font-weight:700; color:var(--ink); }
.review-list{ display:flex; flex-direction:column; gap:1rem; }
.review-item{ padding-bottom:1rem; border-bottom:1px dashed var(--steel-line); }
.review-item:last-child{ border-bottom:none; padding-bottom:0; }
.review-stars{ color:#f0a500; letter-spacing:1px; font-size:.95rem; white-space:nowrap; }
.review-star-picker{ font-size:1.6rem; color:var(--steel-line); cursor:pointer; letter-spacing:2px; }
.review-star-picker span{ transition:.1s; }
.review-star-picker span.is-active{ color:#f0a500; }
.review-form input[type="text"]{ font-size:16px; }

/* ---------- Đánh giá khách hàng thật ---------- */
.review-box{
  background:var(--white); border:1px solid var(--steel-line); border-radius:var(--radius-md);
  padding:1.6rem;
}
.review-avg-so{ font-family:var(--font-mono); font-size:1.3rem; font-weight:700; color:var(--ink); }
.review-item{ padding:.9rem 0; border-bottom:1px dashed var(--steel-line); }
.review-item:last-child{ border-bottom:none; }
.review-stars{ color:#f0a500; letter-spacing:.1em; }
.review-star-picker{ font-size:1.6rem; color:var(--steel-line); cursor:pointer; letter-spacing:.15em; }
.review-star-picker span{ transition:color .1s; }
.review-star-picker span.is-active{ color:#f0a500; }
.review-form input[type="text"]{ font-size:16px; }

/* ---------- Video giới thiệu sản phẩm (slide đầu carousel, kiểu Shopee) ---------- */
.hero-video-slide{ position:relative; background:#000; }
.hero-video-slide video{
  width:100%; height:100%; aspect-ratio:1/1; object-fit:contain; background:#000; display:block;
}
.hero-video-badge{
  position:absolute; top:.7rem; left:.7rem; background:rgba(0,0,0,.65); color:#fff;
  font-size:.72rem; font-weight:600; padding:.25rem .6rem; border-radius:4px; z-index:2;
  display:flex; align-items:center; gap:.2rem; pointer-events:none;
}