/* =====================================================================
   Custom Theme — Luxury skin (metallic gold + midnight navy)
   Brand: gold #b8860b (accent) · #d4af37 · navy #0a1a33 (midnight)
   Loaded AFTER style.css + mega-menu.css so these rules win.
   ===================================================================== */

:root {
  /* ---------- Luxury palette: metallic gold + midnight navy ----------
     Gold phải ĐẬM + bão hòa đủ để lên ánh kim; nhạt = nhợt nhạt.
     Navy phải tối gần đen để sang; #27477d là denim, không sang. */
  --gold-hi: #f5e6a8; /* highlight kim loại */
  --gold: #d4af37; /* classic metallic gold */
  --gold-deep: #a67c00; /* deep gold (rich) */
  --gold-shadow: #6b4f12; /* shadow nâu (tạo chiều sâu kim loại) */
  --navy: #0a1a33; /* midnight navy (gần đen, sang) */
  --navy-deep: #060f1f; /* navy đen */

  /* Gradient kim loại cho chữ — nhiều stop tạo ánh gold */
  --grad-metal: linear-gradient(
    100deg,
    var(--gold-deep) 0%,
    var(--gold-hi) 22%,
    var(--gold) 42%,
    var(--gold-shadow) 62%,
    var(--gold) 78%,
    var(--navy) 100%
  );

  /* Dải gradient dùng chung — metallic gold → midnight navy */
  --grad-header-top: linear-gradient(90deg, var(--navy-deep) 0%, var(--navy) 55%, var(--gold-deep) 100%);
  --grad-header-main: linear-gradient(90deg, #ffffff 0%, #fdfbf5 55%, #f7f0de 100%);
  --grad-footer: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, #0d2444 100%);
  --grad-copyright: linear-gradient(90deg, var(--navy) 0%, var(--gold-deep) 100%);
  --grad-cta: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 45%, var(--navy) 100%);
  --grad-cta-hover: linear-gradient(135deg, var(--navy) 0%, var(--gold-deep) 55%, var(--gold) 100%);

  /* ---------- Design tokens (Nhóm 2) ---------- */
  /* Radius scale — chuẩn hoá về các giá trị dominant sẵn có (10px dùng 31 lần)
     để hệ thống nhất quán mà không xáo trộn thị giác lớn. */
  --radius-sm: 6px;
  --radius-md: 10px;

  /* Elevation scale — dùng cho mega menu + card hover */
  --shadow-lg: 0 12px 40px rgba(10, 26, 51, 0.16);

  /* Accent phụ: rich gold */
  --theme-color2: var(--gold);

  /* Subtitle font: serif Playfair (đồng bộ font heading) */
  --subtitle-font: 'Playfair Display', serif;

  /* ---------- Gradient text (metallic gold → midnight navy) ---------- */
  --grad-text: var(--grad-metal);
}

/* ---------- Header top bar ---------- */
.header-top.bg-title {
  background: var(--grad-header-top) !important;
}

/* Info bên trái header-top: chữ nhỏ gọn hơn (14px → 12.5px) */
.header-top-info li {
  font-size: 12.5px;
}

.header-top-info li i {
  font-size: 14px;
}

/* Căn giữa dọc: hàng trên (info + links) thẳng tâm hàng */
.header-top .row {
  align-items: center;
}

.header-top-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.header-top-info li {
  display: inline-flex;
  align-items: center;
}

/* ---------- Header main (thanh menu) ----------
   Giữ nền sáng để logo (không kiểm soát được màu) + menu chữ đậm vẫn đọc rõ.
   Gradient sáng rất nhẹ từ trắng sang tint cyan của brand. */
.header-main {
  background: var(--grad-header-main);
}

.will-sticky .sticky-active {
  background: var(--grad-header-main);
}

/* ---------- Sticky menu desktop: LUÔN dính khi cuộn xuống ----------
   Template mặc định ẩn header khi scroll xuống (JS gỡ class .active →
   top:-100%). Override để header luôn ở top:0 khi đã sticky, bất kể
   hướng cuộn. */
.will-sticky .sticky-active,
.will-sticky .sticky-active.active {
  top: 0 !important;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(10, 26, 51, 0.12);
}

/* ---------- Nút tìm kiếm trên header-top (nền tối navy→gold) ----------
   Vendor dùng xanh #698fd0 cứng → chìm + lạc tông. Đổi sang gold cho hợp. */
.header-search-btn {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}

/* ---------- Ẩn icon trang trí bị lệch (ống nghe chồng khung brand) ----------
   .icon-shape1 đặt left:0 nhưng khung trắng .brand-wrap1 bắt đầu ở x:110
   → icon bị khung cắt ngang, trông "dính" vào banner. Ẩn cho sạch. */
.icon-shape1 {
  display: none !important;
}

/* ---------- Nền section Dịch vụ (thay ảnh placeholder bg-1.jpg) ----------
   Vendor dùng bg-1.jpg (ảnh mẫu xám 1920×538) + overlay navy 0.7.
   Thay bằng gradient navy thật cho section tối, bỏ ảnh mẫu. */
.bg-box-shape1 {
  background: linear-gradient(160deg, #0a1a33 0%, #14294b 55%, #0d2444 100%) !important;
}

/* Ẩn khối ảnh placeholder dưới Testimonial (bg-4.png 1215×359) */
.testi-shape-img {
  display: none !important;
}

/* ---------- Logo footer: bỏ khung trắng, hòa vào nền footer ----------
   Vendor: .footer1-logo img { background:#fff; padding:30px } + class bg-white
   + .footer1-logo:before (shape navy). Logo là PNG trong suốt → chỉ cần
   bỏ nền trắng + padding + shape để logo nổi trên nền navy. */
.footer1-logo,
.footer1-logo.bg-white {
  background: transparent !important;
}

.footer1-logo img {
  background: transparent !important;
  padding: 0 !important;
}

.footer1-logo:before {
  display: none !important;
}

/* ---------- Bỏ dấu | ngăn cách giữa menu và cụm nút phải ----------   Vendor vẽ vạch bằng ::before + chừa padding-left 42px. Bỏ vạch và
   reset padding thừa để cụm phải gọn, sát menu hơn.
   Kèm vạch | ở header-top (giữa Tìm kiếm và Đăng ký/Đăng nhập). */
.header-btn:before,
.header-call.phone-box:before,
.head-top-links > li:before {
  display: none;
}

/* Vạch | ở header-top bỏ rồi → reset padding chừa cho vạch */
.head-top-links > li {
  padding-right: 0;
  margin-right: 20px;
}

.header-btn {
  padding-left: 0;
  margin-left: 0;
}

.header-call.phone-box {
  padding-left: 0;
  margin-left: 24px;
}

/* Hotline icon: ripple vendor (style.css:2957 ripple scale 1.5) phình quá chiều cao header.
   Thu nhỏ biên độ toả + giảm opacity để vừa khung, vẫn giữ hiệu ứng. */
.header-call.phone-box .box-icon:after,
.header-call.phone-box .box-icon:before {
  animation: rippleHeader 3s ease-in-out infinite;
}

.header-call.phone-box .box-icon:after {
  animation-delay: 1.8s;
}

@keyframes rippleHeader {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  30% {
    opacity: 0.3;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

/* Cụm icon + CTA: khoảng cách đều, thẳng hàng */
.header-btn .icon-btn {
  margin-left: 0;
}

.header-btn .icon-btn + .icon-btn {
  margin-left: 12px;
}

.header-btn .vs-btn {
  margin-left: 20px;
}

/* Thu nhỏ icon cart + heart trên header desktop (vendor style.css:1608 đặt 45px) */
.header-btn .icon-btn i {
  width: 38px;
  height: 38px;
  line-height: 38px;
  font-size: 15px;
  color: var(--gold);
}

/* Giữ icon trắng khi hover (nền đổi sang theme-color) */
.header-btn .icon-btn:hover i {
  color: var(--white-color);
}

/* Badge số đếm: gọn ở góc phải-trên, không phình đè icon (vendor style.css:1626) */
.header-btn .icon-btn .badge {
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-search-btn i {
  background: var(--gold) !important;
  color: var(--navy, #0a1a33) !important;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.45);
}

.header-search-btn:hover {
  background-color: var(--gold) !important;
  color: var(--navy, #0a1a33) !important;
}

.header-search-btn:hover i {
  background: var(--navy, #0a1a33) !important;
  color: var(--gold) !important;
}

/* ---------- Footer ---------- */
.footer-wrapper {
  background: var(--grad-footer) !important;
  background-image: var(--grad-footer) !important;
}

/* ---------- Copyright bar: gọn hơn (giảm chiều cao + cỡ chữ) ---------- */
.copyright.bg-theme {
  background: var(--grad-copyright) !important;
  padding: 13px 0 !important;
}

.copyright.bg-theme p,
.copyright.bg-theme a {
  font-size: 13px !important;
  line-height: 1.4;
}

.copyright.bg-theme .footer-bottom-menu a {
  font-size: 13px !important;
}

/* ---------- Nút scroll-to-top: nhỏ, tròn, gọn ----------
   Tawk.to chiếm góc phải-dưới (bubble + layer trong suốt cao ~130px)
   → đặt nút phía trên để không bị đè, vẫn dễ bấm. */
.scrollToTop.scroll-bottom.show {
  bottom: 150px;
  right: 24px;
}

.scroll-bottom i {
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  font-size: 16px !important;
  border-radius: 50% !important;
  background: var(--gold, #d4af37) !important;
  color: #0a1a33 !important;
  box-shadow: 0 6px 18px rgba(184, 134, 11, 0.35) !important;
}

.scroll-bottom:hover i {
  background: #0a1a33 !important;
  color: var(--gold, #d4af37) !important;
}
/* =====================================================================
   Buttons — gradient gold→navy + hiệu ứng trượt gradient khi hover
   Dùng background-size 200% + background-position (gradient không
   transition trực tiếp). Áp cho .vs-btn base + style2/style3.
   (Gồm cả CTA header — mọi button đồng nhất 1 cơ chế.)
   ===================================================================== */
.vs-btn,
.vs-btn.style2,
.vs-btn.style3 {
  /* Gradient phản chiếu 2 stop → hover ĐẢO màu mượt */
  background: linear-gradient(90deg, #b8860b 0%, #8a6a2a 22%, #0a1a33 50%, #14294b 72%, #b8860b 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  color: #fff;
  box-shadow: 0 6px 18px rgba(10, 26, 51, 0.22);
  border: none;
  transition:
    background-position 0.5s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

.vs-btn:hover,
.vs-btn.style2:hover,
.vs-btn.style3:hover {
  background-position: 100% 50%;
  box-shadow: 0 10px 28px rgba(184, 134, 11, 0.4);
  color: #fff;
  transform: translateY(-2px);
}
/* style2/style3 có nút tròn icon bên trái — đổi nền tròn sang gold cho khớp */
.vs-btn.style2::before,
.vs-btn.style3::before {
  background-color: #fff !important;
}

.vs-btn.style2 i,
.vs-btn.style3 i {
  background-color: #b8860b !important;
  color: #fff !important;
}

.vs-btn.style2:hover i,
.vs-btn.style3:hover i {
  background-color: #0a1a33 !important;
}

/* =====================================================================
   Bootstrap .btn-primary / .btn-outline-primary → brand (gold→navy)
   Bootstrap mặc định #0d6efd (blue) — sai tông. Override ở theme level
   để MỌI trang app (account, shop, auth...) đồng nhất 1 nguồn.
   Destructive (.btn-danger) + neutral (.btn-secondary) giữ nguyên.
   ===================================================================== */
.btn-primary {
  background: linear-gradient(135deg, #d4af37 0%, #a67c00 45%, #0a1a33 100%);
  background-image: linear-gradient(135deg, #d4af37 0%, #a67c00 45%, #0a1a33 100%);
  border: none;
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
  background: linear-gradient(135deg, #0a1a33 0%, #a67c00 55%, #d4af37 100%);
  background-image: linear-gradient(135deg, #0a1a33 0%, #a67c00 55%, #d4af37 100%);
  border: none;
  color: #fff;
}

.btn-primary:disabled,
.btn-primary.disabled {
  background: linear-gradient(135deg, #d4af37 0%, #a67c00 45%, #0a1a33 100%);
  background-image: none;
  opacity: 0.6;
}

.btn-outline-primary {
  color: #a67c00;
  border-color: #d4af37;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background: #d4af37;
  border-color: #d4af37;
  color: #0a1a33;
}

/* ---------- Mega menu panel: viền gradient + bo góc + elevation ---------- */
.main-menu > ul > li.has-mega-menu > .mega-menu {
  border-top: 3px solid transparent;
  border-image: var(--grad-cta) 1;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* =====================================================================
   Typography scale — theo thammyaura.vn (Aura Beauty)
   Heading: Playfair Display (serif) · Body: Montserrat
   Size scale lấy đúng token Aura: h1 40 / h2 32 / h3 24 / h4 20 / h5 18 / h6 16
   Fluid (clamp) → mượt theo viewport, không nhảy cứng ở breakpoint.
   ===================================================================== */

.h1,
h1,
.h2,
h2,
.h3,
h3,
.h4,
h4,
.h5,
h5,
.h6,
h6 {
  line-height: 1.25;
}

.h1,
h1 {
  font-size: clamp(1.5rem, 1.2rem + 2.4vw, 2.5rem); /* 24 (mobile) → 40px (desktop) */
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.h2,
h2 {
  font-size: clamp(1.25rem, 1.1rem + 1.6vw, 2rem); /* 20 (mobile) → 32px (desktop) */
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.h3,
h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.5rem); /* 22 → 24px */
  line-height: 1.3;
}

.h4,
h4 {
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.25rem); /* 19 → 20px */
  line-height: 1.35;
}

.h5,
h5 {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem); /* 17 → 18px */
  line-height: 1.4;
}

.h6,
h6 {
  font-size: 1rem; /* 16px */
  line-height: 1.45;
}

/* Body copy: line-height thoáng hơn cho dễ đọc */
p {
  line-height: 1.75;
}

/* =====================================================================
   Aura-style gradient text (tham chiếu thammyaura.vn)
   Áp trực tiếp vào class đang render — không cần sửa blade.
   .sec-subtitle = dòng nhấn trên tiêu đề section (accent line)
   .font-subtitle = dòng phụ trong hero
   ===================================================================== */

/* .sec-subtitle = dòng nhấn tĩnh trên tiêu đề section (không bị LayerSlider
   tách từ) → áp gradient an toàn ở đây. */
.sec-subtitle {
  background: var(--grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Dòng nhấn hero: nghiêng kiểu Aura "Theo thời gian." */
.font-subtitle {
  font-style: italic;
  font-weight: 500;
}

/* =====================================================================
   Hero banner — 4 dòng chữ (banner nền SÁNG nên KHÔNG dùng scrim tối)
   Dòng 1 (p.font-subtitle) = vàng · Dòng 2 (h1.text-title) = navy
   Dòng 3 (h1.text-theme) = gradient · Dòng 4 (p.ls-hide-md) = glass iOS
   LƯU Ý: LayerSlider XÓA class .ls-l và thay bằng .ls-layer khi khởi tạo.
   DOM thật: .ls-layer.font-subtitle > .line > .word
   ===================================================================== */

/* 1) Dòng 1 — chữ VÀNG đặc */
.vs-hero-wrapper .ls-layer.font-subtitle,
.vs-hero-wrapper .ls-layer.font-subtitle .word {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--gold-deep) !important;
  color: var(--gold-deep) !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* 2) Dòng 2 — chữ XANH navy đặc (h1.text-title) */
.vs-hero-wrapper .ls-layer.text-title,
.vs-hero-wrapper .ls-layer.text-title .word {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--title-color) !important;
  color: var(--title-color) !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
}

/* 3) Dòng 3 — GRADIENT gold→navy (h1.text-theme, TRỪ dòng 1 font-subtitle).
   Áp lên .word để mỗi từ tự clip nền (LayerSlider tách từ thành .line > .word). */
.vs-hero-wrapper .ls-layer.text-theme:not(.font-subtitle) .word {
  background: var(--grad-metal) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.55));
}

/* 4) Dòng 4 — ô mô tả kiểu chatbox glass iOS (frosted) */
.vs-hero-wrapper .ls-layer.ls-hide-md {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(18px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 18px !important;
  padding: 20px 24px !important;
  color: rgba(12, 28, 54, 0.92) !important;
  box-shadow:
    0 8px 32px rgba(10, 26, 51, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-shadow: none !important;
}

/* Section nền tối (service — data-overlay="title"): gradient navy mất tương phản
   → trả về màu trắng, đồng bộ với .h1.text-white của chính section đó. */
.vs-service-wrapper .sec-subtitle {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--white-color) !important;
}

/* =====================================================================
   Brand consistency overrides (Nhóm 1)
   Chỉ target selector render thật (đã verify bằng grep resources/views).
   ===================================================================== */

/* Cart: nút xóa vendor #29af8a (green) → token error */
.cart_table .remove {
  color: var(--error-color);
}

/* Cart totals amount: vendor #1abc9c (teal) → màu brand.
   Markup thật dùng .cart_totals (cart.blade.php, checkout.blade.php).
   (.checkout-ordertable trong vendor là dead — không có markup nào dùng.) */
.cart_totals .order-total .amount {
  color: var(--theme-color);
}

/* Mega menu: Tailwind blue #0066cc → brand.
   (.mega-menu-services trong vendor là dead — markup thật chỉ có
   .mega-menu-list + .mega-menu-item-title.) */
.mega-menu-list > li > a {
  color: var(--title-color);
}

.mega-menu-list > li > a:hover {
  background: rgba(184, 134, 11, 0.1);
  color: var(--theme-color);
}

.mega-menu-list > li.active > a {
  background: var(--grad-cta);
  color: var(--white-color);
}

.mega-menu-item-title a {
  color: var(--theme-color);
}

/* Hover KHÔNG đổi màu chữ: heading cấp 2 nằm trên ảnh nền, đổi sang màu tối
   (title-color) sẽ chìm xuống bg. Giữ nguyên tông theme. */
.mega-menu-item-title a:hover {
  color: var(--theme-color);
}

/* =====================================================================
   Component tokenization (Nhóm 2)
   ===================================================================== */

/* Form controls: 5px rời rạc → radius token */
.form-select,
.form-control {
  border-radius: var(--radius-sm);
}

/* Card bề mặt đang render thực tế (verify grep resources/views) */
.blog-card,
.service-card,
.team-card,
.vs-product-box {
  border-radius: var(--radius-md);
}

/* Team card: ảnh nằm trực tiếp trong .team-head, card không overflow:hidden
   → bo góc trên ảnh để khớp radius card (thêm overflow:hidden sẽ clip
   hiệu ứng .team-card-links). */
.team-card .team-head img {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Ảnh dịch vụ: markup thật dùng .service-card .sr-img (home + service cards) */
.service-card .sr-img {
  border-radius: var(--radius-md);
}

/* =====================================================================
   Testimonial avatar (trang giới thiệu — "Khách hàng của chúng tôi nói")
   Vendor: .avater img chỉ width:100% (height auto) → ảnh không vuông bị
   bóp méo/lệch mặt trong khung tròn. Fix chuẩn: fill khung + cover để ảnh
   luôn cắt tròn cân đối, mọi tỉ lệ ảnh đều đẹp.
   ===================================================================== */
.avater-slider-box .avater img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* =====================================================================
   Blog card — <x-app.latest_post> (home + about carousel)
   Vendor: card radius 10px nhưng overflow:visible → ảnh vuông tràn khỏi
   góc bo, card phẳng không bóng. Fix: clip ảnh theo radius card + bo góc
   trên/dưới nhất quán + elevation nhẹ, hover nâng card.
   ===================================================================== */
.blog-card {
  overflow: hidden;
  background-color: var(--white-color);
  border: 1px solid #eceff5;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 18px rgba(10, 26, 51, 0.06);
  transition:
    box-shadow 0.35s ease,
    transform 0.35s ease,
    border-color 0.35s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(10, 26, 51, 0.14);
}

/* Ảnh khớp bo góc trên của card */
.blog-card .blog-img,
.blog-card .blog-img img {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Nội dung: bỏ viền vendor lệch tông, khớp bo góc dưới */
.blog-card .blog-content {
  border: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Date badge: pill gọn ở góc, accent gold thay tab lệch */
.blog-card .blog-date {
  right: 16px;
  top: 16px;
  width: 72px;
  padding: 10px 4px 12px;
  font-size: 12px;
  line-height: 1.25;
  border-top: none;
  border-bottom: 3px solid var(--theme-color);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(10, 26, 51, 0.16);
}

.blog-card .blog-date .day {
  font-size: 22px;
}

/* =====================================================================
   Slick equal-height — .slick-track mặc định display:block + slide float
   → card không stretch, cao thấp lệch nhau. Chuyển track sang flex để mọi
   slide cao bằng nhau; .blog-card h-100 phủ kín chiều cao đó.
   Scope .vs-blog-wrapper để không đụng carousel khác (services/brands/…).
   ===================================================================== */
.vs-blog-wrapper .vs-carousel .slick-track {
  display: flex;
}

.vs-blog-wrapper .vs-carousel .slick-track .slick-slide {
  height: auto;
}

.vs-blog-wrapper .vs-carousel .slick-track .slick-slide > div {
  height: 100%;
}

/* =====================================================================
   Comments (blog detail) — compact & tidy
   Scope .blog-details để KHÔNG đụng comment/review ở trang sản phẩm
   (product/item.blade.php dùng chung class vs-comments-layout1).
   Vendor style.css:8744 đặt padding 35px, avatar 100px, chữ 14px → quá to.
   ===================================================================== */

/* Khối tiêu đề "N Bình luận" gọn lại */
.blog-details .vs-comment-area h3 {
  font-size: 20px;
  margin-bottom: 18px !important;
  padding-bottom: 0 !important;
}

/* Card comment: nhỏ, bo góc, viền nhạt, khoảng cách đều */
.blog-details .vs-comments-layout1 .vs-post-comment {
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid #eef1f5;
  border-radius: var(--radius-md);
  background: #fff;
  align-items: flex-start;
}

/* Avatar 100px → 40px */
.blog-details .vs-comments-layout1 .author-img {
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin-right: 12px;
  border-radius: 50%;
  overflow: hidden;
}

/* Fallback chữ cái: đồng bộ gradient gold dù có/không có user */
.blog-details .vs-comments-layout1 .author-img .avatar-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--grad-metal);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50%;
  text-transform: uppercase;
}

/* Nội dung: bỏ margin-top âm vendor, khớp bề rộng avatar 40+12 */
.blog-details .vs-comments-layout1 .comment-content {
  width: calc(100% - 52px);
  margin-top: 0;
}

/* Tên + thời gian + nội dung nhỏ gọn, nhịp dọc chặt */
.blog-details .vs-comments-layout1 .name {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 2px;
  font-weight: 600;
}

.blog-details .vs-comments-layout1 .commented-on {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #98a2b3;
  text-transform: none;
}

.blog-details .vs-comments-layout1 .commented-on:before {
  font-size: 11px;
  margin-right: 5px;
}

.blog-details .vs-comments-layout1 .text {
  font-size: 14px;
  line-height: 1.6;
  color: #475467;
}

/* Reply: thụt lề vừa phải, có vạch dọc phân cấp */
.blog-details .vs-comments-layout1 .children {
  margin-left: 52px;
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid #eef1f5;
}

/* Form bình luận: khối gọn hơn, chữ nhỏ hơn */
.blog-details .vs-comment-form {
  padding: 24px;
  margin-top: 40px;
  margin-bottom: 24px;
  border-radius: var(--radius-md);
}

.blog-details .vs-comment-form .form-title .h2 {
  font-size: 20px;
}

.blog-details .vs-comment-form .form-title p {
  font-size: 13px;
}

/* Alert "đăng nhập để bình luận": hoà vào nền form (bỏ bg trắng/cyan chói) */
.blog-details .vs-comment-form .alert {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.blog-details .vs-comment-form .alert p {
  font-size: 14px;
}

/* Nút trong alert login: gọn hơn nút CTA mặc định */
.blog-details .vs-comment-form .alert .vs-btn,
.vs-shop-details .vs-comment-form .alert .vs-btn {
  font-size: 13px;
  padding: 11px 24px;
  --icon-shape: 30px;
  --icon-size: 22px;
}

/* Mobile: form + comment vẫn gọn, giữ avatar + nội dung CÙNG MỘT HÀNG */
@media (max-width: 767px) {
  .blog-details .vs-comment-form {
    padding: 18px 14px;
  }
  .blog-details .vs-comments-layout1 .vs-post-comment {
    display: flex;
    flex-wrap: nowrap;
    padding: 12px 14px;
  }
  .blog-details .vs-comments-layout1 .author-img {
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin-right: 10px;
  }
  .blog-details .vs-comments-layout1 .comment-content {
    width: calc(100% - 46px);
  }
  .blog-details .vs-comments-layout1 .children {
    margin-left: 24px;
  }
}

/* =====================================================================
   Product reviews (shop detail tab "Đánh giá") — compact & tidy
   Scope .vs-shop-details để KHÔNG đụng comment blog (dùng chung class
   vs-comments-layout1 nhưng nằm trong .blog-details).
   Vendor style.css:8744 (padding 35px, avatar 100px) + :8833 (star-rating
   absolute 80px) làm card quá to và sao lệch → thu gọn như blog.
   ===================================================================== */

/* Card review: gọn, bo góc, viền nhạt */
.vs-shop-details .vs-comments-layout1 .vs-post-comment {
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid #eef1f5;
  border-radius: var(--radius-md);
  background: #fff;
  align-items: flex-start;
}

/* Avatar 100px → 44px; ảnh placeholder fill khung tròn */
.vs-shop-details .vs-comments-layout1 .author-img {
  width: 44px;
  height: 44px;
  min-width: 44px;
  margin-right: 12px;
  border-radius: 50%;
  overflow: hidden;
}

.vs-shop-details .vs-comments-layout1 .author-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Fallback chữ cái: gradient gold thay block nâu thô */
.vs-shop-details .vs-comments-layout1 .author-img .avatar-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--grad-metal);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50%;
  text-transform: uppercase;
}

/* Nội dung khớp bề rộng avatar */
.vs-shop-details .vs-comments-layout1 .comment-content {
  width: calc(100% - 56px);
  margin-top: 0;
}

/* Sao: đưa về luồng (bỏ absolute vendor), đủ rộng cho 5 sao, chữ nhỏ */
.vs-shop-details .vs-comments-layout1 .star-rating {
  position: relative;
  top: auto;
  right: auto;
  width: 90px;
  height: 1.2em;
  font-size: 13px;
  margin-bottom: 8px;
}

/* Tên + thời gian + nội dung gọn */
.vs-shop-details .vs-comments-layout1 .name {
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 2px;
  font-weight: 600;
}

.vs-shop-details .vs-comments-layout1 .commented-on {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #98a2b3;
  text-transform: none;
}

.vs-shop-details .vs-comments-layout1 .text {
  font-size: 14px;
  line-height: 1.6;
  color: #475467;
}

/* Form đánh giá: khối gọn hơn */
.vs-shop-details .vs-comment-form {
  padding: 24px;
  border-radius: var(--radius-md);
}

.vs-shop-details .vs-comment-form .form-title .h4 {
  font-size: 20px;
}

/* Alert "đăng nhập để đánh giá": hoà vào nền form (bỏ bg trắng/cyan chói) */
.vs-shop-details .vs-comment-form .alert {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.vs-shop-details .vs-comment-form .alert p {
  font-size: 14px;
}

/* Mobile: giữ avatar + nội dung CÙNG MỘT HÀNG */
@media (max-width: 767px) {
  .vs-shop-details .vs-comment-form {
    padding: 18px 14px;
  }
  .vs-shop-details .vs-comments-layout1 .vs-post-comment {
    display: flex;
    flex-wrap: nowrap;
    padding: 12px 14px;
  }
  .vs-shop-details .vs-comments-layout1 .author-img {
    width: 38px;
    height: 38px;
    min-width: 38px;
    margin-right: 10px;
  }
  .vs-shop-details .vs-comments-layout1 .comment-content {
    width: calc(100% - 48px);
  }
}

/* =====================================================================
   Sản phẩm liên quan (trang chi tiết SP) — card đồng đều + bo góc đúng
   Vendor .vs-product-box KHÔNG có border-radius/overflow → góc vuông; card
   cao thấp lệch do tên SP dài ngắn khác nhau; ảnh tỉ lệ khác nhau nên khung
   lệch. Scope .related-products để không đụng grid sản phẩm ở trang khác.
   ===================================================================== */
.related-products .vs-product-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  border: 1px solid #eceff5;
  transition:
    box-shadow 0.35s ease,
    transform 0.35s ease,
    border-color 0.35s ease;
}

.related-products .vs-product-box:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(10, 26, 51, 0.14);
}

/* Ảnh: khung tỉ lệ cố định + cover để mọi card cao bằng nhau, ảnh không méo */
.related-products .vs-product-box .product-img {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  aspect-ratio: 1 / 1;
}

.related-products .vs-product-box .product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Nội dung: giãn để lấp chiều cao card, giá luôn nằm đáy → thẳng hàng */
.related-products .vs-product-box .product-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Tên SP: tối đa 2 dòng, cắt ellipsis → chiều cao ổn định giữa các card */
.related-products .vs-product-box .product-title,
.related-products .vs-product-box .product-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

/* Đẩy giá xuống đáy card cho thẳng hàng */
.related-products .vs-product-box .price-wrap {
  margin-top: auto;
}

/* =====================================================================
   Blog social share — bổ sung màu brand còn thiếu.
   Vendor style.css:7727 chỉ định màu facebook/twitter/linkedin/instagram;
   whatsapp + telegram không có rule → rơi về theme-color (gold) sai.
   ===================================================================== */
.blog-social a i.fa-whatsapp {
  background-color: #25d366;
}

.blog-social a i.fa-telegram-plane,
.blog-social a i.fa-telegram {
  background-color: #229ed9;
}

/* Hover: giữ hành vi vendor (về gold). Cần khai báo lại vì rule màu brand
   ở trên cùng specificity nhưng load sau rule :hover của style.css. */
.blog-social a i.fa-whatsapp:hover,
.blog-social a i.fa-telegram-plane:hover,
.blog-social a i.fa-telegram:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
}

/* =====================================================================
   Service item card — <x-app.service.item> (danh mục DV, danh sách DV,
   dịch vụ liên quan, search).
   Vendor .service-thumb đặt .sr-body absolute đè lên ảnh → chữ chồng ảnh,
   ảnh fallback lộ số điện thoại, tên danh mục lặp mỗi card. Thay bằng card
   dọc: media trên (fixed ratio) + body dưới, nhất quán mọi trang.
   ===================================================================== */
.service-item-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--white-color);
  border: 1px solid #eceff5;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(10, 26, 51, 0.06);
  transition:
    box-shadow 0.35s ease,
    transform 0.35s ease,
    border-color 0.35s ease;
}

.service-item-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(10, 26, 51, 0.14);
}

/* Media: tỉ lệ cố định để mọi ảnh cao bằng nhau (không cần ảnh thật) */
.service-item-card .sic-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #f2f4f7;
}

.service-item-card .sic-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-item-card:hover .sic-media img {
  transform: scale(1.06);
}

/* Badge danh mục: pill tối ở góc, thay <h4> lặp dưới mỗi ảnh */
.service-item-card .sic-cat {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--white-color);
  background-color: rgba(10, 26, 51, 0.72);
  border-radius: 999px;
  backdrop-filter: blur(2px);
}

.service-item-card .sic-sale {
  position: absolute;
  right: 12px;
  top: 12px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--white-color);
  background-color: #d9534f;
  border-radius: 999px;
}

.service-item-card .sic-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
  text-align: left;
}

.service-item-card .sic-title {
  font-size: 17px;
  line-height: 1.4;
  margin: 0 0 8px;
}

.service-item-card .sic-title a {
  color: var(--title-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.service-item-card:hover .sic-title a {
  color: var(--theme-color);
}

/* Tên dịch vụ tối đa 2 dòng → chiều cao card đồng đều */
.service-item-card .sic-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

.service-item-card .sic-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: #6b7280;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer: giá trái — nút phải, đẩy xuống đáy để thẳng hàng */
.service-item-card .sic-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #f1f3f7;
}

.service-item-card .sic-price-now {
  font-size: 17px;
  font-weight: 700;
  color: var(--theme-color);
}

.service-item-card .sic-price-old {
  display: block;
  font-size: 12.5px;
  color: #9aa1ac;
}

.service-item-card .sic-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--title-color);
  border: 1px solid #e3e7ee;
  border-radius: 999px;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.service-item-card:hover .sic-btn,
.service-item-card .sic-btn:hover {
  color: var(--white-color);
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}

/* Fallback ảnh (vendor sr-3-1.jpg in sẵn khung "387X355"): khi service chưa
   có ảnh thật → tô nền trơn để không lộ chữ placeholder. */
.service-item-card .sic-media.is-placeholder {
  background-color: #e9edf3;
}

.service-item-card .sic-media.is-placeholder img {
  opacity: 0;
}

/* =====================================================================
   About video play button (home "VỀ CHÚNG TÔI").
   Vendor .about-img1 .play-btn đặt lệch góc (left/bottom: 160px) và đổi
   theo từng breakpoint → nút play không nằm giữa ảnh. Căn giữa tuyệt đối;
   rule này nạp sau style.css nên thắng cả các override trong @media của nó.
   ===================================================================== */
.about-img1 .play-btn {
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%, -50%);
}

/* =====================================================================
   Testimonial card — bo tròn 4 góc (home "Lời chứng thực").
   Vendor chỉ bo 2 góc dưới (0 0 50px 50px) → đỉnh vuông, lệch với bề mặt
   card bo góc toàn hệ thống. Đồng bộ cả 4 góc theo đúng bán kính vendor đã
   dùng (50px desktop / 10px ≤992px). Scope .testimonial-wrapper vì chỉ
   home dùng .testimonial-box (about dùng .avater-slider-box).
   ===================================================================== */
.testimonial-wrapper .testimonial-box {
  border-radius: 50px;
}

@media (max-width: 992px) {
  .testimonial-wrapper .testimonial-box {
    border-radius: 20px;
  }
}

@media (max-width: 576px) {
  .testimonial-wrapper .testimonial-box {
    border-radius: 16px;
  }
}

/* Avatar testimonial to hơn (65px → 80px). Giữ padding 10px → ảnh 60×60.
   Bù luôn avater-line (vạch ngang) theo kích thước mới để không lệch. */
.testimonial-wrapper .testimonial-box .avater {
  width: 80px;
  height: 80px;
}

.testimonial-wrapper .testimonial-box .avater-line {
  width: calc(100% - 100px);
}

/* =====================================================================
   Service detail hero image.
   Vendor .service-content > .vs-surface img dùng w-100 → khi service chưa có
   ảnh thật, fallback sr-3-1.jpg (387×355) bị phóng to bằng chiều rộng container
   (~1220px) → cao ~1119px, tràn gần hết màn hình.
   Ảnh thật: chỉ ép full width, chiều cao thả theo tỉ lệ ảnh admin upload.
   Placeholder: dải mỏng để không chiếm màn hình.
   ===================================================================== */
.service-content .service-hero {
  width: 100%;
  overflow: hidden;
  background-color: #e9edf3;
}

.service-content .service-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* Chưa có ảnh thật → không cần khung lớn: thu về dải mỏng, ẩn chữ "387X355" in
   trong placeholder. */
.service-content .service-hero.is-placeholder {
  height: 280px;
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(184, 134, 11, 0.1) 0%, rgba(10, 26, 51, 0.06) 100%);
}

.service-content .service-hero.is-placeholder img {
  opacity: 0;
}

@media (max-width: 767px) {
  .service-content .service-hero.is-placeholder {
    height: 180px;
  }
}

/* Service detail info bar (chứa nút "Đặt lịch ngay"): vendor padding 60px 80px
   làm thanh cao 175px. Giảm padding dọc để gọn hơn. */
.service-content .service-bar {
  padding-top: 30px;
  padding-bottom: 30px;
}