/* === Products: Detail, Specs, Gallery, TOC, Trust, FAQ ====== */

.product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.product-specs-col h2,.product-features-col h2{font-size:1.4rem;color:#003399;margin-bottom:20px;padding-bottom:10px;border-bottom:3px solid #E31E24;display:inline-block}
.specs-table{width:100%;border-collapse:collapse;margin-bottom:24px}
.specs-table td{padding:10px 14px;border-bottom:1px solid #e0e0e0;font-size:.95rem}
.specs-table .spec-label{font-weight:600;color:#333;width:40%;background:#fafafa}
.specs-table .spec-value{color:#555}
.product-price-box{background:linear-gradient(135deg,#003399,#001A4D);color:#fff;padding:20px 24px;border-radius:10px;margin-top:16px}
.product-price-box .price-label{display:block;font-size:.85rem;opacity:.8;margin-bottom:4px}
.product-price-box .price-value{display:block;font-size:1.5rem;font-weight:800;color:#fff}
.product-price-box .price-note{font-size:.82rem;opacity:.7;margin-top:8px;line-height:1.5}
.features-list{list-style:none;padding:0}
.features-list li{padding:10px 0 10px 28px;position:relative;border-bottom:1px solid #f0f0f0;font-size:.95rem;color:#444}
.features-list li::before{content:'✓';position:absolute;left:0;color:#E31E24;font-weight:700}
.product-cta-box{background:#f8f8f8;border:1px solid #e0e0e0;border-radius:10px;padding:24px;margin-top:24px;text-align:center}
.product-cta-box p{font-weight:600;color:#003399;margin-bottom:12px}
.btn-zalo{background:#1A53FF;color:#fff;padding:12px 24px;border-radius:6px;font-weight:600;text-decoration:none;font-size:.95rem;transition:transform .2s}
.btn-zalo:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(26,83,255,.3)}
@media(max-width:768px){
  .product-detail-grid{grid-template-columns:1fr;gap:24px}
}

.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.product-detail-gallery{position:sticky;top:100px}
.gallery-main{margin-bottom:12px;border-radius:8px;overflow:hidden;border:1px solid #E0E0E0}
.gallery-main img{width:100%;height:380px;object-fit:cover;display:block}
.gallery-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.gallery-thumbs img{width:80px;height:60px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all .2s}
.gallery-thumbs img.active,.gallery-thumbs img:hover{border-color:#003399}
.product-detail-title{font-size:1.6rem;margin-bottom:10px;color:#1A1A1A}
.product-detail-price{font-size:1.4rem;font-weight:800;color:#E31E24;margin-bottom:14px}
.product-detail-excerpt{color:#555;font-size:1.05rem;line-height:1.6;margin-bottom:20px;padding:16px;background:#f8f8f8;border-radius:8px;border-left:3px solid #003399}
.product-detail-content{margin-bottom:24px;line-height:1.7;color:#444}
.product-detail-content p{margin-bottom:12px}
.product-detail-content ul,.product-detail-content ol{padding-left:20px;margin-bottom:12px}
.product-detail-content li{margin-bottom:6px}

/* Product Specs Table */
.product-specs{margin-bottom:24px}
.product-specs h3{font-size:1.15rem;margin-bottom:12px;color:#1A1A1A}
.product-specs table{width:100%;border-collapse:collapse}
.product-specs tr{border-bottom:1px solid #E0E0E0}
.product-specs tr:last-child{border-bottom:none}
.product-specs td{padding:10px 12px;font-size:.95rem}
.spec-label{font-weight:600;color:#555;width:40%;background:#fafafa}
.spec-value{color:#333}

/* Product Features List */
.product-features{margin-bottom:24px}
.product-features h3{font-size:1.15rem;margin-bottom:12px;color:#1A1A1A}
.product-features ul{padding-left:0;list-style:none}
.product-features li{padding:8px 0 8px 28px;position:relative;color:#444;font-size:.95rem}
.product-features li::before{content:'\2713';position:absolute;left:0;color:#003399;font-weight:700;font-size:1.1rem}

/* Product Detail CTA */
.product-detail-cta{display:flex;gap:12px;flex-wrap:wrap;padding-top:20px;border-top:1px solid #E0E0E0}
.btn-phone{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:6px;font-weight:700;font-size:1rem;text-decoration:none;transition:all .25s;background:#E31E24;color:#fff}
.btn-phone:hover{background:#B3151A;color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(227,30,36,0.3)}
.btn-zalo{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:6px;font-weight:700;font-size:1rem;text-decoration:none;transition:all .25s;background:#003399;color:#fff}
.btn-zalo:hover{background:#002B80;color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,51,153,0.3)}

/* Product Detail Responsive */
@media(max-width:860px){
  .product-detail{grid-template-columns:1fr;gap:24px}
  .product-detail-gallery{position:static}
  .gallery-main img{height:260px}
  .gallery-thumbs img{width:60px;height:45px}
  .product-detail-title{font-size:1.3rem}
  .product-detail-price{font-size:1.2rem}
  .product-detail-cta{flex-direction:column}
  .btn-phone,.btn-zalo{justify-content:center;text-align:center}
}

.product-breadcrumb {
    background: #f8f8f8;
    border-bottom: 1px solid #E0E0E0;
    padding: 12px 0;
    font-size: .88rem;
    color: #888;
}
.product-breadcrumb a {
    color: #555;
    text-decoration: none;
    transition: color .2s;
}
.product-breadcrumb a:hover {
    color: #003399;
}
.breadcrumb-sep {
    margin: 0 8px;
    color: #ccc;
}
.breadcrumb-current {
    color: #1A1A1A;
    font-weight: 600;
}

/* === Product Category Badge ============================= */
.product-cat-badge {
    display: inline-block;
    background: rgba(0,51,153,0.08);
    color: #003399;
    font-size: .8rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: background .2s;
}
.product-cat-badge:hover {
    background: rgba(0,51,153,0.15);
    color: #003399;
}

.info-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #003399;
    display: inline-block;
}

/* === Price Enhanced ===================================== */
.product-detail-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.price-label {
    font-size: .9rem;
    color: #888;
    font-weight: 500;
}
.price-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #E31E24;
}

/* === Product Meta Info ================================== */
.product-meta-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #E0E0E0;
}
.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: #555;
    padding: 8px 12px;
    background: #f9f9f9;
    border-radius: 6px;
}
.meta-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.gallery-main-placeholder {
    background: #D8D8D8;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
}
.gallery-main-placeholder img {
    max-height: 200px;
    width: auto;
    opacity: .5;
}

/* === Related Products =================================== */
.related-products-section {
    padding: 50px 0;
}

/* === Product Detail Responsive Enhancements ============= */
@media(max-width:860px){
    .product-meta-info {
        grid-template-columns: 1fr;
    }
    .btn-phone,
    .btn-zalo {
        flex: 1 1 100%;
        justify-content: center;
    }
    .product-breadcrumb {
        font-size: .8rem;
        overflow-x: auto;
        white-space: nowrap;
    }
    .product-breadcrumb .container {
        min-width: max-content;
    }
    .price-value {
        font-size: 1.3rem;
    }
}

.product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.product-specs-col h2,.product-features-col h2{font-size:1.4rem;color:#003399;margin-bottom:20px;padding-bottom:10px;border-bottom:3px solid #E31E24;display:inline-block}
.specs-table{width:100%;border-collapse:collapse;margin-bottom:24px}
.specs-table td{padding:10px 14px;border-bottom:1px solid #e0e0e0;font-size:.95rem}
.specs-table .spec-label{font-weight:600;color:#333;width:40%;background:#fafafa}
.specs-table .spec-value{color:#555}
.product-price-box{background:linear-gradient(135deg,#003399,#001A4D);color:#fff;padding:20px 24px;border-radius:10px;margin-top:16px}
.product-price-box .price-label{display:block;font-size:.85rem;opacity:.8;margin-bottom:4px}
.product-price-box .price-value{display:block;font-size:1.5rem;font-weight:800;color:#fff}
.product-price-box .price-note{font-size:.82rem;opacity:.7;margin-top:8px;line-height:1.5}
.features-list{list-style:none;padding:0}
.features-list li{padding:10px 0 10px 28px;position:relative;border-bottom:1px solid #f0f0f0;font-size:.95rem;color:#444}
.features-list li::before{content:'✓';position:absolute;left:0;color:#E31E24;font-weight:700}
.product-cta-box{background:#f8f8f8;border:1px solid #e0e0e0;border-radius:10px;padding:24px;margin-top:24px;text-align:center}
.product-cta-box p{font-weight:600;color:#003399;margin-bottom:12px}
.btn-zalo{background:#1A53FF;color:#fff;padding:12px 24px;border-radius:6px;font-weight:600;text-decoration:none;font-size:.95rem;transition:transform .2s}
.btn-zalo:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(26,83,255,.3)}
@media(max-width:768px){
  .product-detail-grid{grid-template-columns:1fr;gap:24px}
}



.product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.product-specs-col h2,.product-features-col h2{font-size:1.4rem;color:#003399;margin-bottom:20px;padding-bottom:10px;border-bottom:3px solid #E31E24;display:inline-block}
.specs-table{width:100%;border-collapse:collapse;margin-bottom:24px}
.specs-table td{padding:10px 14px;border-bottom:1px solid #e0e0e0;font-size:.95rem}
.specs-table .spec-label{font-weight:600;color:#333;width:40%;background:#fafafa}
.specs-table .spec-value{color:#555}
.product-price-box{background:linear-gradient(135deg,#003399,#001A4D);color:#fff;padding:20px 24px;border-radius:10px;margin-top:16px}
.product-price-box .price-label{display:block;font-size:.85rem;opacity:.8;margin-bottom:4px}
.product-price-box .price-value{display:block;font-size:1.5rem;font-weight:800;color:#fff}
.product-price-box .price-note{font-size:.82rem;opacity:.7;margin-top:8px;line-height:1.5}
.features-list{list-style:none;padding:0}
.features-list li{padding:10px 0 10px 28px;position:relative;border-bottom:1px solid #f0f0f0;font-size:.95rem;color:#444}
.features-list li::before{content:'✓';position:absolute;left:0;color:#E31E24;font-weight:700}
.product-cta-box{background:#f8f8f8;border:1px solid #e0e0e0;border-radius:10px;padding:24px;margin-top:24px;text-align:center}
.product-cta-box p{font-weight:600;color:#003399;margin-bottom:12px}
.btn-zalo{background:#1A53FF;color:#fff;padding:12px 24px;border-radius:6px;font-weight:600;text-decoration:none;font-size:.95rem;transition:transform .2s}
.btn-zalo:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(26,83,255,.3)}
@media(max-width:768px){
  .product-detail-grid{grid-template-columns:1fr;gap:24px}
}

.section-sub{font-size:.85rem;margin:-20px 0 30px}
  
   PRODUCT ARTICLE LAYOUT (single-san-pham + page-san-pham)
   ============================================================ */

/* --- Article content (the_content) --- */
.product-article {
  max-width: 860px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.85;
  color: #333;
}
.product-article h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #003399;
  margin: 2em 0 .6em;
  padding-bottom: .5em;
  border-bottom: 2px solid #e0e0e0;
}
.product-article h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 1.6em 0 .5em;
}
.product-article h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.2em 0 .4em;
}
.product-article p {
  margin: 0 0 1.1em;
}
.product-article ul, .product-article ol {
  margin: 0 0 1.2em 1.5em;
  padding: 0;
}
.product-article li {
  margin-bottom: .4em;
}
.product-article img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1.2em 0;
}
.product-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
}
.product-article table td, .product-article table th {
  border: 1px solid #ddd;
  padding: 10px 14px;
  text-align: left;
}
.product-article table th {
  background: #F5F6F9;
  font-weight: 600;
}
.product-article blockquote {
  border-left: 4px solid #003399;
  margin: 1.2em 0;
  padding: .8em 1.2em;
  background: #F0F3F7;
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
.product-article strong {
  color: #1a1a1a;
}
.article-empty {
  text-align: center;
  padding: 40px 20px;
  color: #666;
  font-size: 1.1rem;
}

/* --- Product Header (single-san-pham) --- */
.product-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.product-header-img img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.product-header-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.product-header-cta {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.product-header-cta .btn {
  flex: 1;
  text-align: center;
}
.product-cat-badge {
  display: inline-block;
  background: #EDF2FF;
  color: #003399;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
}
.product-cat-badge:hover {
  background: #D6E5FF;
}

/* --- Specs + Features section (2 cột) --- */
.product-specs-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.product-features-box h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #003399;
}
.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.features-list li {
  position: relative;
  padding: 8px 0 8px 28px;
  border-bottom: 1px solid #f0f0f0;
  font-size: .95rem;
}
.features-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #E31E24;
  font-weight: 700;
  font-size: 1rem;
}

/* --- Price Box --- */
.product-price-box {
  background: #fff;
  border: 2px solid #E31E24;
  border-radius: 12px;
  padding: 20px 24px;
  margin-top: 16px;
}
.product-price-box .price-label {
  display: block;
  font-size: .85rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.product-price-box .price-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: #E31E24;
  margin: 4px 0;
}
.product-price-box .price-note {
  font-size: .85rem;
  color: #666;
  margin: 8px 0 0;
}

/* --- Gallery --- */
.product-gallery {
  max-width: 860px;
  margin: 0 auto;
}
.gallery-main {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.gallery-main img {
  width: 100%;
  height: auto;
  display: block;
}
.gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
}
.gallery-thumbs img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s;
  flex-shrink: 0;
}
.gallery-thumbs img.active {
  border-color: #E31E24;
}
.gallery-thumbs img:hover {
  border-color: #003399;
}

/* --- CTA Bottom --- */
.product-cta-bottom {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.product-cta-bottom h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #003399;
  margin-bottom: 8px;
}
.product-cta-bottom p {
  font-size: 1rem;
  color: #666;
  margin-bottom: 20px;
}
.product-cta-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.product-cta-buttons .btn {
  min-width: 200px;
}
.btn-zalo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  background: #1A53FF;
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background .2s, transform .15s;
}
.btn-zalo:hover {
  background: #003399;
  transform: translateY(-2px);
}
.btn-lg {
  padding: 16px 32px !important;
  font-size: 1.05rem !important;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .product-header {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .product-specs-section {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .product-article {
    font-size: 1rem;
  }
  .product-cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  .product-cta-buttons .btn {
    width: 100%;
  }
  .product-header-cta {
    flex-direction: column;
  }
  .gallery-thumbs img {
    width: 60px;
    height: 45px;
  }


  /* === TABLE OF CONTENTS =================================== */
.article-toc {
  background: #F7F9FB;
  border: 1px solid #E8EBF0;
  border-radius: 10px;
  margin-bottom: 28px;
  overflow: hidden;
}
.toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #003399;
  cursor: pointer;
  user-select: none;
}
.toc-header:hover {
  background: #F0F3F7;
}
.toc-toggle {
  font-size: .7rem;
  transition: transform .25s;
}
.toc-open .toc-toggle {
  transform: rotate(180deg);
}
.toc-list {
  list-style: decimal;
  margin: 0;
  padding: 0 20px 16px 40px;
  display: none;
}
.toc-open .toc-list {
  display: block;
}
.toc-item {
  padding: 5px 0;
  font-size: .92rem;
}
.toc-item a {
  color: #333;
  text-decoration: none;
  transition: color .15s;
}
.toc-item a:hover {
  color: #003399;
  text-decoration: underline;
}
.toc-indent {
  padding-left: 18px;
  font-size: .87rem;
}

   TRUST SIGNALS (Trust Grid)
   ============================================================ */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.trust-card {
  text-align: center;
  padding: 24px 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s;
}
.trust-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,0,0,.1);
}
.trust-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 10px;
}
.trust-card strong {
  display: block;
  font-size: .95rem;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.trust-card p {
  font-size: .85rem;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   FAQ (Accordion)
   ============================================================ */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}
.faq-item {
  background: #fff;
  border: 1px solid #E8EBF0;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item summary {
  padding: 16px 20px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  color: #1a1a1a;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::after {
  content: "▸";
  font-size: .8rem;
  transition: transform .25s;
  color: #003399;
}
.faq-item[open] summary::after {
  transform: rotate(90deg);
}
.faq-item summary:hover {
  background: #F7F9FB;
}
.faq-answer {
  padding: 0 20px 18px;
  font-size: .93rem;
  color: #555;
  line-height: 1.7;
}

   INTERNAL LINKS
   ============================================================ */
.internal-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.il-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 14px;
  background: #fff;
  border-radius: 12px;
  border: 2px solid #EDF0F3;
  text-decoration: none;
  color: #333;
  transition: all .2s;
}
.il-card:hover {
  border-color: #003399;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,51,153,.1);
}
.il-icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
}
.il-card strong {
  font-size: .92rem;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.il-card span:last-child {
  font-size: .82rem;
  color: #003399;
  font-weight: 500;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .trust-grid,
  .internal-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .mid-cta {
    flex-direction: column;
    text-align: center;
    padding: 22px 18px;
  }
  .mid-cta-content p {
    max-width: 100%;
  }
  .mid-cta-buttons {
    flex-direction: column;
    width: 100%;
  }
  .mid-cta-buttons .btn {
    width: 100%;
  }
  .faq-item summary {
    font-size: .93rem;
    padding: 14px 16px;
  }
}
@media (max-width: 480px) {
  .trust-grid,
  .internal-links {
    grid-template-columns: 1fr;
  }
  .toc-list {
    padding-left: 28px;
  }
}