/*
Typo / Content Component Library — Logan
Dùng để trang trí nội dung bài viết (single post, page).
Độc lập với theme — khi đổi theme, chỉ cần enqueue lại file này để bài viết cũ không bị vỡ layout.
Tách ra từ style.css (theme Lengkent) ngày 2026-07-08.
*/

/* =========================
   QUY ƯỚC RESPONSIVE (từ 2026-08-25)
   - Logic: desktop-first, chỉ dùng max-width để override khi màn hình nhỏ dần.
     (Không dùng min-width, trừ ngoại lệ hiệu ứng chỉ có ở desktop lớn.)
   - 3 mốc chuẩn, dùng lại xuyên suốt file, KHÔNG tự chế mốc lẻ (790, 900, 500...):
       max-width: 480px   → điện thoại nhỏ/dọc
       max-width: 768px   → điện thoại lớn + tablet dọc
       max-width: 992px   → tablet ngang / laptop nhỏ (chỉ dùng khi thực sự cần thêm 1 nấc)
   - Code cũ trước 2026-08-25 có thể còn mốc lẻ (790, 900, 500) — không đại tu toàn bộ,
     chỉ sửa dần mỗi khi đụng tới class đó. Class mới bắt buộc theo quy ước này.
========================= */

/* =========================
  SINGLE & TYPOGRAPHY
========================= */
.single main p,
.single main img {
  max-width: 100%;
  height: auto;
  overflow-x: hidden;
}
.single main .section,
.single main section
{
	padding: 1.3rem 0;
}
.single-post main article > h1,
.page main article > h1 {
	font-family: 'Playfair Display', serif;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #d2d2d2;
    text-transform: uppercase;
    color: var(--gold-dark);
}
.ux-title{
  FONT-WEIGHT: 600;
  FONT-SIZE: 1.3rem;
  text-transform: uppercase;
}
.ux-title-index{
    background: var(--red-dark);
    color: white;
    padding: 0 6px;
	margin-right: 5px;
}
.ux-section-short .ux-titlegold {
  font-size: 13px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--gold-hover);
  font-weight: 500;
  margin-bottom: 16px;
}
.ux-section-short .ux-titlegold::before {
  content: "";
  display: block;
  width: 56px;
  height: 1.2px;
  background: #c4a05a;
  margin-bottom: 14px;
}
.ux-section-short h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 34px);
  line-height: 1.2;
  margin: 0 0 28px;
}

.wp-caption {
  max-width: 100% !important;
}
.wp-caption img {
  max-width: 100%;
  height: auto;
  display: block;
}
.wp-caption-text {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-top: 6px;
}
/*  SCREEN READER ONLY   Ẩn trực quan nhưng SEO + Accessibility safe  */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.post-bulet{
	background:#f3f3f3;
	padding: 10px 30px;
}
.post-bulet a{
	color:#666;
	text-decoration:none;
}
.post-bulet a:hover{
	color: var(--gold-hover);
	text-decoration:underline;
}
.see-more { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--gray); } 
.see-more a { color: var(--gold-dark); text-decoration: none; font-weight: 600; } 
.see-more a:hover { text-decoration: underline; }
.layout2col {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 40px;
}
@media (max-width:768px){
  .layout2col {
     grid-template-columns: 1fr;
  }
}

/* =========================
   LG-1 / SECTION LABEL + TITLE
========================= */

.single .lg-section-label,
.page .lg-section-label {
  display: block;
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.single .lg-section-title,
.page .lg-section-title {
  margin-bottom: 8px;
  line-height: 1.25;
}

.single .lg-section-sub,
.page .lg-section-sub {
  font-style: italic;
  margin-bottom: 24px;
  opacity: 0.7;
}


/* =========================
   LG-2 / QUOTE
========================= */

.single .lg-quote,
.page .lg-quote {
  padding: 16px 20px;
  border-left: 3px solid var(--gold);
      background: var(--cream-light);
  border-radius: 0 6px 6px 0;
  margin: 25px 0;
  line-height: inherit;
}

.single .lg-quote cite,
.page .lg-quote cite {
  display: block;
  margin-top: 8px;
  font-size: 0.82em;
  font-style: normal;
  font-weight: 700;
  color: var(--gold-dark);
  letter-spacing: 0.5px;
}


/* =========================
   LG-3 / NOTE BOX
========================= */

.single .lg-note,
.page .lg-note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  margin: 16px 0;
  line-height: inherit;
  font-size: 0.92em;
}

.single .lg-note.lg-note--info,
.page .lg-note.lg-note--info {
  border-color: #c0cff0;
  border-left-color: #4a6fc0;
}

.single .lg-note.lg-note--warning,
.page .lg-note.lg-note--warning {
  border-color: #f0c8b0;
  border-left-color: #c05a2a;
}
.lg-note--info strong {
    color: #2255AA;
}

/* =========================
   LG-4 / LISTS
========================= */

/* Check list */
.single .lg-list-check,
.page .lg-list-check {
  list-style: none;
  list-style-type: none;
  margin: 16px 0;
  padding: 0;
      font-size: 0.9rem;
}

.single .lg-list-check li,
.page .lg-list-check li {
  padding: 8px 0 8px 26px;
  position: relative;
  border-bottom: 1px solid var(--border);
  line-height: inherit;
}

.single .lg-list-check li:last-child,
.page .lg-list-check li:last-child {
  border-bottom: none;
}

.single .lg-list-check li::before,
.page .lg-list-check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--gold);
  font-weight: 700;
}

/* Risk list */
.single .lg-list-risk,
.page .lg-list-risk {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.single .lg-list-risk li,
.page .lg-list-risk li {
  border: 1px solid var(--border);
  border-left: 3px solid #c0392b;
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  line-height: 1.5;
  font-size: 0.92em;
}

/* Numbered list */
.single .lg-list-numbered,
.page .lg-list-numbered {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  counter-reset: lg-item;
}

.single .lg-list-numbered li,
.page .lg-list-numbered li {
  padding: 8px 0 8px 34px;
  position: relative;
  border-bottom: 1px solid var(--border);
  counter-increment: lg-item;
  line-height: inherit;
}

.single .lg-list-numbered li:last-child,
.page .lg-list-numbered li:last-child {
  border-bottom: none;
}

.single .lg-list-numbered li::before,
.page .lg-list-numbered li::before {
  content: counter(lg-item);
  position: absolute;
  left: 0;
  top: 10px;
  width: 22px;
  height: 22px;
  background: var(--gold);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* =========================
   LG-5 / CARDS
========================= */
/* Lưu ý: cả 3 lớp dưới đây dùng auto-fit + minmax → số cột KHÔNG cố định,
   mà tự co giãn theo bề rộng container. Con số trong tên lớp chỉ là số cột
   ước lượng khi đặt trong khung nội dung bài viết mặc định.
   Muốn cố định số cột thật, dùng repeat(n, minmax(0,1fr)) như .product-catalog. */

/* card tối thiểu 220px/cột — thường ra 2 cột trong khung bài viết */
.card-grid-2{
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  display: grid;
  gap: 14px;
  margin: 20px 0;
}
/* card tối thiểu 161px/cột — thường ra 3 cột trong khung bài viết */
.card-grid-3{
  grid-template-columns: repeat(auto-fit, minmax(161px, 1fr));
  display: grid;
  gap: 14px;
  margin: 20px 0;
}
/* card tối thiểu 140px/cột — thường ra 4 cột trong khung bài viết */
.card-grid-4{
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  display: grid;
  gap: 14px;
  margin: 20px 0;
}

/* hiệu ứng hover cho card grid gallery item */
.lg7-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.lg7-gallery-item img {
  display: block;
  width: 100%;
  transition: transform 0.4s ease;
}

.lg7-gallery-item:hover img {
  transform: scale(1.1); /* mức "vừa" */
}

.lg7-gallery-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(30, 30, 30, 0.85), transparent);
  color: #fff;


  font-weight: 500;
  transform: translateY(100%);
  transition: transform 0.35s ease;
}

.lg7-gallery-item:hover .lg7-gallery-caption {
  transform: translateY(0);
}

/* =========================
   LG-GRID-4IMG / Card ảnh 4 cột (dùng cho grid ảnh minh họa, có thể kèm link hoặc lightbox)
   HTML mẫu:
   <div class="lg-grid-4img">
     <div class="lg7-item">
       <a class="lg7-thumb" href="..." tabindex="-1"><img src="..." alt="..." loading="lazy" decoding="async"></a>
       <h3><a href="...">Tiêu đề</a></h3>
       <p>Mô tả</p>
     </div>
     ...hoặc không cần <a> nếu chỉ dùng lightbox (img.js-lightbox)...
   </div>
========================= */
.single .lg-grid-4img,
.page .lg-grid-4img {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 20px 0;
}
@media (max-width: 768px) {
  .single .lg-grid-4img,
  .page .lg-grid-4img { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .single .lg-grid-4img,
  .page .lg-grid-4img { grid-template-columns: 1fr; }
}
.single .lg-grid-4img .lg7-item,
.page .lg-grid-4img .lg7-item {
  position: relative;
  display: block;
}
.single .lg-grid-4img .lg7-thumb,
.page .lg-grid-4img .lg7-thumb {
  display: block;
  aspect-ratio: 4/5;
  overflow: hidden;
  margin-bottom: 16px;
}
.single .lg-grid-4img .lg7-thumb img,
.page .lg-grid-4img .lg7-thumb img,
.single .lg-grid-4img .lg7-item > img,
.page .lg-grid-4img .lg7-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4/5;
  margin-bottom: 16px;
  transition: transform .5s ease;
}
.single .lg-grid-4img .lg7-item:hover img,
.page .lg-grid-4img .lg7-item:hover img {
  transform: scale(1.04);
}
.single .lg-grid-4img .lg7-item h3,
.page .lg-grid-4img .lg7-item h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
}
.single .lg-grid-4img .lg7-item h3 a,
.page .lg-grid-4img .lg7-item h3 a {
  color: inherit;
  text-decoration: none;
}
.single .lg-grid-4img .lg7-item p,
.page .lg-grid-4img .lg7-item p,
.single .lg-grid-4img .lg7-item .desc,
.page .lg-grid-4img .lg7-item .desc {
  font-size: 14px;
  line-height: 1.7;
  color: #666;
  margin: 0;
}
/* Link phủ toàn bộ card - chỉ có tác dụng khi h3 chứa <a> */
.single .lg-grid-4img .lg7-item h3 a::after,
.page .lg-grid-4img .lg7-item h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* Ảnh lightbox (không có <a>) - đổi con trỏ để gợi ý click phóng to */
.single .lg-grid-4img .js-lightbox,
.page .lg-grid-4img .js-lightbox {
  cursor: zoom-in;
}

.single .lg-card,
.page .lg-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px;
  background: var(--cream-light);
}

.single .lg-card__label,
.page .lg-card__label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.single .lg-card h4,
.single .lg-card__title,
.page .lg-card h4,
.page .lg-card__title {
  margin-bottom: 8px;
  line-height: 1.3;
}

.single .lg-card p,
.single .lg-card__body,
.page .lg-card p,
.page .lg-card__body {
  line-height: inherit;
  font-size: 0.92em;
  margin: 0;
}

.single .lg-card.lg-card--accent,
.page .lg-card.lg-card--accent {
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
}

/* Dark — bắt buộc override vì nền tối */
.single .lg-card.lg-card--dark,
.page .lg-card.lg-card--dark {
  background: var(--dark);
  border-color: #1A1A1A;
  color: #c8c8c8;
}

.single .lg-card.lg-card--dark .lg-card__label,
.page .lg-card.lg-card--dark .lg-card__label {
  color: #e8b86d;
}

.single .lg-card.lg-card--dark h4,
.single .lg-card.lg-card--dark .lg-card__title,
.page .lg-card.lg-card--dark h4,
.page .lg-card.lg-card--dark .lg-card__title {
  color: #fff;
}

.single .lg-card.lg-card--dark p,
.single .lg-card.lg-card--dark .lg-card__body,
.page .lg-card.lg-card--dark p,
.page .lg-card.lg-card--dark .lg-card__body {
  color: #a0a0a0;
}


/* =========================
   LG-6 / TAGS & BADGES
========================= */

.single .lg-tag,
.page .lg-tag {
  display: inline-block;
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 0.8em;
  font-weight: 500;
  line-height: 1.5;
}

.single .lg-tag.lg-tag--gold,
.page .lg-tag.lg-tag--gold {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold-dark);
}

.single .lg-tag.lg-tag--dark,
.page .lg-tag.lg-tag--dark {
  background: #1A1A1A;
  color: #F5F0E8;
  border-color: #1A1A1A;
}

.single .lg-tag.lg-tag--pill,
.page .lg-tag.lg-tag--pill {
  border-radius: 20px;
  background: rgba(201, 150, 58, 0.12);
  border-color: rgba(201, 150, 58, 0.4);
  color: var(--gold-dark);
}

.single .lg-tag-group,
.page .lg-tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


/* =========================
   LG-7 / BUTTONS
========================= */
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
  .btn-primary {
    background: var(--gold);
    color: white;
    padding: 13px 28px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.5px;
    transition: background 0.2s;
  }
  .btn-primary:hover { background: var(--gold-dark); }
  .btn-secondary {
    background: transparent;
    color: var(--navy);
    padding: 13px 28px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid var(--border);
    display: inline-block;
  }
  .btn-secondary:hover { border-color: var(--gold); color: var(--gold); }
  .stats-bar {
    background: var(--navy);
    padding: 56px 40px;
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
	margin-top: 50px;
	width:100vw;
	margin-left:calc(50% - 50vw);
  }
  .stat { text-align: center; }
  .stat-num { font-size: 22px; font-weight: 800; color: var(--gold); line-height: 1.1; }
  .stat-label { font-size: 12px; font-weight: 500; color: #a0a0a0; }

.single .lg-btn,
.page .lg-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 3px;
  font-size: 0.875em;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  letter-spacing: 0.3px;
  transition: all 0.15s ease;
  line-height: 1.4;
}

.single .lg-btn.lg-btn--primary,
.page .lg-btn.lg-btn--primary {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

.single .lg-btn.lg-btn--primary:hover,
.page .lg-btn.lg-btn--primary:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: #fff;
}

.single .lg-btn.lg-btn--secondary,
.page .lg-btn.lg-btn--secondary {
  background: transparent;
  border-color: var(--border);
}

.single .lg-btn.lg-btn--secondary:hover,
.page .lg-btn.lg-btn--secondary:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
}

.single .lg-btn.lg-btn--dark,
.page .lg-btn.lg-btn--dark {
  background: #1A1A1A;
  color: #fff;
  border-color: #1A1A1A;
}

.single .lg-btn.lg-btn--dark:hover,
.page .lg-btn.lg-btn--dark:hover {
  background: #3a3a3a;
  border-color: #3a3a3a;
  color: #fff;
}

/* =========================
TABLE
========================= */
  /* Bọc bảng để cuộn ngang trên mobile thay vì tràn layout.
     HTML: <div class="table-wrap"><table class="lg-table">...</table></div>
     (2026-08-25: khôi phục lại 2 dòng từng bị comment.) */
  .table-wrap {
    overflow-x: auto;
    margin: 20px 0;
    -webkit-overflow-scrolling: touch;
  }
  .lg-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.85rem;
    letter-spacing: -0.5px;
  }
  .lg-table thead tr {
    background: #1A1A1A; color: #C9963A;
  }
  .lg-table thead th {
    padding: 12px 14px; text-align: left;
    font-weight: 700; font-size: 12px; letter-spacing: 0.5px;
  }
  .lg-table tbody tr { border-bottom: 1px solid #EAE3D8; }
  .lg-table tbody tr:nth-child(even) { background: #FAF7F2; }
  .lg-table tbody tr:hover { background: #FDF8EE; }
  .lg-table td { padding: 11px 16px; color: #333; vertical-align: top; }
  .lg-table td strong { color: #1A1A1A; font-size: 15px; }
  
 .cta-block {
    background: var(--dark); border-radius: 10px;
    padding: 36px 32px; margin-top: 56px;
    display: flex; flex-direction: column; gap: 10px;
	text-align: center;
  }
  .cta-block .lg-section-label { color: #C9963A; }
  .cta-block h2 { color: #F5EFE3; font-size: 2rem; margin-bottom: 6px; }
  .cta-block p { color: var(--gold); font-size: 14px; }
  .cta-info { display: flex; flex-wrap: wrap; gap: 12px 12px; margin-top: 8px; }
  .cta-info span { font-size: 13.5px; color: var(--gold); font-weight: 600; }
  /* Nút trong CTA: dùng chung .lg-btn ở mục LG-7, chỉ ghi đè phần khác biệt do nền tối.
     (2026-08-25: đã xoá khối .lg-btn / .lg-btn--primary / .lg-btn--dark trùng lặp ở đây.
      Bản cũ đặt font-size:2rem và bị .single/.page .lg-btn ghi đè do specificity thấp hơn,
      nên chỉ phát tác ở ngoài context .single/.page — rất khó lường.) */
  .cta-block .lg-btn { border-radius: 6px; }
  .cta-block .lg-btn.lg-btn--dark { background: #333; color: #F5EFE3; border-color: #555; }
  .cta-block .lg-btn.lg-btn--dark:hover { background: #4a4a4a; border-color: #666; }
  .cta-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; } 
  
 /* ── STEP BLOCK ── */
  .step-block {
    background: var(--cream-light);
    border-radius: 10px;
    padding: 28px 28px 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid #EAE3D8;
  }
  .step-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
  .step-number {
    min-width: 44px; height: 44px;
    background: #1A1A1A;
    color: #C9963A;
    font-family: 'Playfair Display', serif;
    font-size: 18px; font-weight: 700;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .step-title-group { padding-top: 2px; }
  .step-title {
    font-size: 16px; font-weight: 700; color: #1A1A1A; margin-bottom: 2px;text-transform:uppercase;
  }
  .step-accuracy {
    font-size: 12px; font-weight: 600; color: #C9963A; letter-spacing: 0.5px;
  }
  .step-body { font-size: 14.5px; color: #444; line-height: 1.75; }
  .step-body p { margin-bottom: 10px; }
/* ── ACCURACY BAR ── */
  .accuracy-bar-wrap { margin: 8px 0 4px; }
  .accuracy-label { font-size: 12px; color: #888; margin-bottom: 4px; }
  .accuracy-bar {
    height: 6px; background: #EAE3D8; border-radius: 99px; overflow: hidden;
  }
  .accuracy-fill { height: 100%; border-radius: 99px; background: #C9963A; }
 
/* =========================
FAQ
========================= */
.faq-q {
  font-weight: 700;
  font-size: 15px;
  color: #1A1A1A;
  margin-bottom: 8px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.faq-item {
  border-bottom: 1px solid #EAE3D8;
  padding: 20px 0;
}
.faq-a {
  font-size: 14.5px;
  color: #444;
  padding-left: 0;
  line-height: 1.75;
}

/* --- FAQ dạng đóng/mở ---
   Chỉ kích hoạt khi .faq-item được viết bằng thẻ <details>.
   Markup cũ dùng <div class="faq-item"> vẫn hiển thị bình thường theo style ở trên.
   Cấu trúc:
   <details class="faq-item" name="faq-abc">
     <summary class="faq-q"><span>Câu hỏi</span></summary>
     <div class="faq-wrap"><div class="faq-clip">
       <div class="faq-a">Câu trả lời</div>
     </div></div>
   </details>
   Thuộc tính name giống nhau = chỉ mở được 1 mục một lúc. Bỏ name để mở nhiều mục. */
details.faq-item {
  margin: 0;
}
details.faq-item > .faq-q {
  align-items: center;
  gap: 24px;
  margin: 0;
  cursor: pointer;
  list-style: none;
}
details.faq-item > .faq-q::-webkit-details-marker {
  display: none;
}
details.faq-item > .faq-q > span {
  flex: 1;
}
details.faq-item > .faq-q:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* Dấu + vẽ bằng 2 lớp gradient chồng nhau, khi mở xoay 45 độ thành dấu x */
details.faq-item > .faq-q::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(#1A1A1A, #1A1A1A) center / 14px 2px no-repeat,
    linear-gradient(#1A1A1A, #1A1A1A) center / 2px 14px no-repeat;
  transition: transform 0.25s ease;
}
details.faq-item[open] > .faq-q {
  color: var(--gold);
}
details.faq-item[open] > .faq-q::after {
  transform: rotate(45deg);
  background:
    linear-gradient(var(--gold), var(--gold)) center / 14px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 2px 14px no-repeat;
}

/* Trượt mở mượt với chiều cao bất kỳ (0fr -> 1fr) */
.faq-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
details.faq-item[open] .faq-wrap {
  grid-template-rows: 1fr;
}
.faq-clip {
  overflow: hidden;
  min-height: 0;
}
details.faq-item .faq-a {
  margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-wrap,
  details.faq-item > .faq-q::after {
    transition: none;
  }
}

/*---- End typography style----*/

/* =========================
   Chuyển từ style.css (2026-07-08): img-caption, product-catalog
   (container-wide đã bỏ — đó là layout thật của single-wide.php,
   không phải class dùng trong nội dung bài, xem style.css)
========================= */

.img-caption{
    font-style: italic;
    text-align: center;
}

/* ===== PRODUCT CATALOG GRID ===== */
.product-catalog p, 
.product-catalog br {
    display: none;
}
.product-catalog p:empty {
  display: none;
}
.product-catalog{
  display:grid;
  gap:16px;
  max-width:920px;
  margin:48px auto;
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.product-card h3{
	font-size: 0.92rem;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-weight: 600;
	color: #1A1A1A;
	border-bottom: 1px solid var(--border, #E0D8CC);
	padding-bottom: 8px;
	margin: 0 0 12px;
	transition: border-color 0.2s ease;
}

/* anchor chiếm toàn card */
.product-card {
  display: block;
  height: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  border: 1px solid transparent; /* giữ chỗ sẵn — tránh giật layout khi hover thêm viền */
  border-radius: 8px;
  overflow: hidden; /* clip ảnh khi zoom hover, không cần div bọc riêng trong HTML */
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.product-card:hover {
  border-color: var(--gold, #c4a05a);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.product-card:hover h3 {
  border-bottom-color: var(--gold, #c4a05a);
}

/* image luôn co theo cột, zoom nhẹ khi hover */
.product-card img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 4px;
  margin-bottom: 10px;
  clip-path: inset(0 0 16px 0); /* cắt card 15px chân */
  transition: transform 0.4s ease;
}

.product-card:hover img {
  transform: scale(1.05);
}

@media (max-width:768px){
  .product-catalog{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* Biến thể 3 cột desktop, 2 cột mobile — dùng KÈM class gốc, không thay thế:
   <div class="product-catalog product-catalog-3">...</div>
   product-catalog lo khung + card (gap, max-width, margin, hover...),
   product-catalog-3 chỉ ghi đè số cột. */
.product-catalog-3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
@media (max-width:768px){
  .product-catalog-3{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* =========================
   RELATED POSTS
========================= */
.single .related-posts {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.single .related-posts h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: #1A1A1A;
  margin-bottom: 1.25rem;
}

.single .related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .single .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .single .related-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.single .related-grid,
.single .related-item {
  box-sizing: border-box;
}

.single .related-item {
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--cream-light);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.single .related-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  border-color: var(--gold);
}

.single .related-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Wrapper ảnh riêng để bo tròn + crop zoom hover mà không ảnh hưởng card */
.single .related-item .related-thumb-wrap {
  overflow: hidden;
  display: block;
}

/* Tỉ lệ ảnh cân đối hơn (gần 4:3) — bớt cảm giác "lùn", bẹt ngang */
.single .related-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #EAE3D8; /* placeholder màu trong lúc ảnh đang tải */
  transition: transform 0.4s ease;
}

.single .related-item:hover img {
  transform: scale(1.06);
}

.single .related-item h3 {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: #1A1A1A;
  padding: 6px 18px;
  margin: 0;
  height: auto;
  box-sizing: border-box;
  overflow: hidden;
}

.single .related-item a:hover h3 {
  color: var(--gold-dark);
}

.single .related-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gray, #999);
  opacity: 0.75;
  padding: 14px 18px 0;
}

.single .related-more {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold-dark);
  padding: 0 1.1rem 1.1rem;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.single .related-item:hover .related-more {
  opacity: 1;
  transform: translateY(0);
}

.single .related-more span {
  transition: transform 0.25s ease;
}

.single .related-item:hover .related-more span {
  transform: translateX(3px);
}

/* =========================
   LG-8 / PHOTO GRID (ảnh + tiêu đề + mô tả, click mở lightbox)
   Độc lập với .product-catalog / .lg-grid-4img cũ — không dùng chung class
   để tránh xung đột specificity (bug 2026-07-18: height:100% circular +
   overflow:hidden làm mất text; .js-lightbox đè cursor sai).
   HTML mẫu:
   <div class="lg-photo-grid">
     <div class="lg-photo-card">
       <img src="..." alt="..." loading="lazy" decoding="async">
       <h3>...</h3>
       <p>...</p>
     </div>
     ...
   </div>
========================= */
.single .lg-photo-grid,
.page .lg-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 20px 0;
  align-items: start;
}
@media (max-width: 768px) {
  .single .lg-photo-grid,
  .page .lg-photo-grid { grid-template-columns: repeat(2, 1fr); }
}

.single .lg-photo-card,
.page .lg-photo-card {
  cursor: zoom-in;
  margin: 15px 0px;
}
.single .lg-photo-card img,
.page .lg-photo-card img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 14px;
  transition: transform .4s ease, box-shadow .25s ease;
}
.single .lg-photo-card:hover img,
.page .lg-photo-card:hover img {
  transform: scale(1.03);
  box-shadow: 0 10px 24px rgba(0,0,0,0.1);
}
.single .lg-photo-card h3,
.page .lg-photo-card h3 {
  padding-top: 12px;
  border-top: 2px solid var(--gold);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: #1A1A1A;
  margin: 0 0 6px;
}
.single .lg-photo-card p,
.page .lg-photo-card p {
  font-size: 14px;
  line-height: 1.7;
  color: #666;
  margin: 0;
}

/*BACKGROUND FULL CHIỀU NGANG BẤT KỂ LAYOUT*/
	.lg-banner-center {
	  position: relative;
	  width: 100%;
	  aspect-ratio: 16 / 9;
	  overflow: hidden;
	  color: #ffffff;
	}
	.lg-banner-center-bg {
	  position: absolute;
	  inset: 0;
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	  object-position: center 55%; /* neo hơi lệch xuống để giữ ly nước trong khung */
	}
	.lg-banner-center-text {
	  position: absolute;
	  top: 26%;
	  left: 0;
	  width: 100%;
	  transform: translateY(-50%);
	  text-align: center;
	  z-index: 2;
	  padding: 0 24px; /* Tăng padding để chữ không chạm viền màn hình */
	  box-sizing: border-box;
	}
	.lg-banner-center-eyebrow {
	  font-size: 1.4vw;
	  font-weight: 600;
	  margin-bottom: 0.8vw;
	  text-transform: uppercase;
	  letter-spacing: 0.1em;
	  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
	}
	.lg-banner-center-headline h2 {
	  font-size: 4.2vw;
	  font-weight: 800;
	  line-height: 1.2;
	  margin: 0 0 1.2vw 0;
	  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	}
	.lg-banner-center-description {
	  font-size: 1.2vw;
	  font-weight: 500;
	  line-height: 1.4;
	  color: rgba(255, 255, 255, 0.9);
	  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
	}
	.full-bleed {
	  width: 100vw;
	  margin-left: calc(50% - 50vw);
	}
	/* Gộp riêng cho banner: tránh xung đột width với .lg-banner-center ở trên
	   (cùng specificity, phải chỉ định rõ để không phụ thuộc thứ tự file) */
	.lg-banner-center.full-bleed {
	  width: 100vw;
	  margin-left: calc(50% - 50vw);
	}

	@media (max-width: 768px) {
	  .lg-banner-center {
		/* Khóa cứng tỷ lệ aspect-ratio bằng auto và đặt chiều cao cố định */
		aspect-ratio: auto;
		height: 60vh; /* Banner sẽ chiếm 60% chiều cao màn hình điện thoại, nhìn rất thoáng và sang */
		min-height: 380px; /* Đảm bảo không bị quá lùn trên các máy màn hình nhỏ */
	  }
	  .lg-banner-center-bg {
		object-position: center 65%; /* mobile khung dọc hơn, cần neo sâu hơn xuống vùng ly nước/chữ */
		height: 60vh!important;	/* cần chỉnh bằng chiều cao của .lg-banner-center  */
	  }
	  /* Phóng to cỡ chữ bằng đơn vị px/rem để không bị phụ thuộc vào độ rộng màn hình */
	  .lg-banner-center-eyebrow {
		font-size: 14px;
		letter-spacing: 0.05em;
		margin-bottom: 10px;
	  }
	  .lg-banner-center-headline h2 {
		font-size: 28px; /* Kích thước chữ tiêu đề lý tưởng trên mobile */
		line-height: 1.3;
		margin-bottom: 14px;
	  }
	  .lg-banner-center-description {
		font-size: 15px; /* Tăng hẳn kích thước để người dùng không phải nheo mắt đọc */
		line-height: 1.5;
		padding: 0 10px; /* Giới hạn nhẹ để chữ tự động xuống dòng đẹp hơn */
	  }
	}
	/* Trường hợp riêng: full-bleed nằm trong .container-wide > article, container cha bị lệch tâm do sidebar nên cần cộng bù thêm offset */
	@media (min-width: 992px) {
	  .container-wide > article .full-bleed {
		margin-left: calc(50% - 50vw + 138px);
	  }
	}
	
/*bảng 3 card báo giá*/	
.lg-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0;
}
.lg-pricing-card {
  background: #fff;
  border: 1px solid var(--border, #e5e0da);
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s;
  position: relative;
  z-index: 1;
}
.lg-pricing-card:hover {
  transform: scale(1.06);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  z-index: 2;
}
.lg-pricing-top {
  background: #3a3a3a;
  padding: 32px 24px 28px;
}
.lg-pricing-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 12px;
  color: #fff;
}
.lg-pricing-name {
  color: var(--gold, #b8925a);
  font-size: 18px;
  letter-spacing: 1px;
  margin: 0 0 6px;
}
.lg-pricing-sub {
  color: #c9c4bd;
  font-size: 14px;
  margin: 0;
}
.lg-pricing-price {
  background: #f4f4f4;
  padding: 24px;
  border-bottom: 1px solid var(--border, #e5e0da);
}
.lg-pricing-currency {
  font-size: 20px;
  vertical-align: top;
  color: var(--charcoal, #2b2b2b);
}
.lg-pricing-amount {
  font-size: 36px;
  font-weight: 700;
  color: var(--charcoal, #2b2b2b);
}
.lg-pricing-unit {
  font-size: 14px;
  color: #888;
  margin-left: 4px;
}
.lg-pricing-body {
  padding: 24px;
}
.lg-pricing-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  text-align: left;
}
.lg-pricing-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #e5e0da);
  font-size: 15px;
  color: #444;
  padding-left: 24px;
  position: relative;
}
.lg-pricing-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--gold, #b8925a);
  font-size: 13px;
}
.lg-pricing-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 24px;
  background: var(--charcoal, #2b2b2b);
  color: #fff !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.3s ease;
}
.lg-pricing-card:hover .lg-pricing-btn {
  background: var(--gold, #b8925a);
}
@media (max-width: 768px) {
  .lg-pricing {
    grid-template-columns: 1fr;
  }
  .lg-pricing-card:hover {
    transform: none;
    box-shadow: none;
  }
}
.lg-pricing-top {
  transition: background 0.3s ease;
}
.lg-pricing-card:hover .lg-pricing-top {
  background: var(--gold, #b8925a);
}
.lg-pricing-card:hover .lg-pricing-name,
.lg-pricing-card:hover .lg-pricing-sub {
  color: #fff;
}

/**/