/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Template: generatepress
Author: Tom Usborne
Author URI: https://generatepress.com/about
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.6.1.1772285600
Updated: 2026-02-28 13:33:20

*/

:root {
  --gold: #D4922A;
  --gold-light: #F2B94B;
  --navy: #0E2A47;
  --navy-mid: #163B5F;
  --navy-light: #1E4D7B;
  --green: #2E7D4F;
  --white: #FFFFFF;
  --off-white: #F8F5F0;
  --text-muted: #6B6B6B;
}





/* ===== 5 BƯỚC TINH LUYỆN DẦU ===== */
.process-steps-wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* Đường kẻ vàng ngang */
.process-line {
  position: absolute;
  top: 35px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, #D4922A, #F2B94B);
  z-index: 0;
}

/* Từng bước */
.process-step {
  text-align: center;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

/* Vòng tròn số */
.step-circle {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #0E2A47, #1E4D7B);
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  border: 4px solid #FFFFFF;
  box-shadow: 0 0 0 2px #D4922A;
}

/* Vòng tròn ACTIVE — màu vàng */
.step-circle.active {
  background: linear-gradient(135deg, #D4922A, #F2B94B);
  color: #0E2A47;
}

/* Tiêu đề bước */
.process-step h4 {
  color: #0E2A47;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: 'DM Sans', sans-serif;
}

/* Mô tả bước */
.process-step p {
  color: #6B6B6B;
  font-size: 12px;
  line-height: 1.5;
  font-family: 'DM Sans', sans-serif;
}

/* ===== RESPONSIVE TABLET ===== */
@media (max-width: 1024px) {
  .process-steps-wrap {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  .process-line {
    display: none;
  }
}

/* ===== RESPONSIVE MOBILE ===== */
@media (max-width: 767px) {
  .process-steps-wrap {
    grid-template-columns: repeat(1, 1fr);
    gap: 32px;
  }
}





/* ── BREADCRUMB RANKMATH ── */
nav.rank-math-breadcrumb p {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}
nav.rank-math-breadcrumb p a {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13px !important;
  text-decoration: none !important;
}
nav.rank-math-breadcrumb p a:hover {
  color: #F2B94B !important;
}
nav.rank-math-breadcrumb p span.separator {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 13px !important;
}
nav.rank-math-breadcrumb p span.last {
  color: #F2B94B !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}




/* ── SECTION INTRO — CỘT TRÁI, CÁC ẢNH CHỒNG LÊN NHAU VỀ CHÚNG TÔI ── */
.intro-visual {
  position: relative;
}
.intro-img-main img {
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.14);
  display: block;
}
.intro-img-secondary {
  position: absolute;
  bottom: -32px;
  left: -32px;
  width: 50%;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  border: 6px solid #ffffff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.14);
}
.intro-img-secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.intro-badge {
  position: absolute;
  top: -20px;
  right: -20px;
  background: #0E2A47;
  color: #fff;
  border-radius: 14px;
  padding: 20px 22px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  border: 3px solid #D4922A;
  z-index: 2;
}
.intro-badge .year {
  display: block;
  font-family: 'Be Vietnam Pro', serif;
  font-size: 38px;
  font-weight: 900;
  color: #F2B94B;
  line-height: 1;
}
.intro-badge .year-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
  display: block;
}

/* ── CHECKLIST TRÊN TRANG VỀ CHÚNG TÔI ── */
.intro-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.intro-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: #1C1C1C;
  line-height: 1.6;
}
.intro-checklist li::before {
  content: '✓';
  width: 22px; height: 22px; min-width: 22px;
  background: linear-gradient(135deg, #D4922A, #F2B94B);
  color: #0E2A47;
  border-radius: 50%;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

/* ── 2 CARD LOẠI HÀNG ── */
.type-card {
  padding: 22px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.07);
  flex: 1;
  transition: all 0.3s;
}
.type-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  border-color: rgba(212,146,42,0.2);
  transform: translateY(-3px);
}
.type-card-gold {
  background: linear-gradient(135deg, #FDF3E3, #ffffff);
  border-color: rgba(212,146,42,0.2);
}
.type-card-blue {
  background: linear-gradient(135deg, #EEF3FA, #ffffff);
  border-color: rgba(14,42,71,0.1);
}
.type-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: #0E2A47;
  margin: 8px 0 7px;
}
.type-card p {
  font-size: 13px;
  color: #6B6B6B;
  line-height: 1.6;
  margin: 0;
}

/* ── CHIA ĐƯỜNG KẺ GIỮA CÁC Ô STATS BAR ── */
.stats-bar .stat-item {
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.stats-bar .stat-item:last-child {
  border-right: none;
}

/* ── STATS BAR MOBILE ── */
@media (max-width: 767px) {

  /* Container cha → Grid 2 cột */
  .gb-element-627340e5 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
  }

  /* Từng ô stat */
  .stats-bar .stat-item {
    width: 100% !important;
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 12px !important;
    box-sizing: border-box !important;
    border-right: 1px solid rgba(255,255,255,0.25) !important;
    border-bottom: 1px solid rgba(255,255,255,0.25) !important;
  }

  /* Bỏ border phải ô 2 và 4 */
  .stats-bar .stat-item-2,
  .stats-bar .stat-item-4 {
    border-right: none !important;
  }

  /* Bỏ border dưới ô 3 và 4 */
  .stats-bar .stat-item-3,
  .stats-bar .stat-item-4 {
    border-bottom: none !important;
  }

  /* Số lớn */
  .stats-bar .stat-item p:first-child {
    font-size: 30px !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
  }

  /* Nhãn */
  .stats-bar .stat-item p:last-child {
    font-size: 10px !important;
    text-align: center !important;
    line-height: 1.5 !important;
    letter-spacing: 0.5px !important;
    max-width: 90px !important;
    margin: 0 auto !important;
  }
}





/* ── SECTION 4: HAI NGUỒN HÀNG ── */
.source-badge {
  margin-left: auto;
  flex-shrink: 0;
  background: rgba(212,146,42,0.15);
  color: #F2B94B;
  border: 1px solid rgba(212,146,42,0.3);
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  display: inline-block;
}

/* Hover — Card lớn */
.source-card {
  transition: all 0.35s ease;
}
.source-card:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(212,146,42,0.3) !important;
  transform: translateY(-6px);
}

/* Hover — Factory item nhỏ */
.factory-item {
  transition: all 0.2s ease;
  cursor: default;
}
.factory-item:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(212,146,42,0.25) !important;
}

/* Tags */
.source-tag {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
}

/* ── RESPONSIVE MOBILE ── */
@media (max-width: 767px) {
  .source-grid {
    flex-direction: column !important;
  }
  .source-card {
    width: 100% !important;
  }
  .source-card-header {
    padding: 24px 20px 20px !important;
    flex-wrap: wrap;
  }
  .source-card-body {
    padding: 20px !important;
  }
  .source-badge {
    margin-left: 0;
    margin-top: 8px;
  }
}

.gb-element-e0cf9004 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.source-card-body {
  padding-bottom: 28px !important;
}

/* Factory list cách viền dưới card */
.factory-list {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Factory item cuối cùng cách viền dưới */
.source-card-body {
  padding: 28px 32px !important;
}

/* Đảm bảo tags cách viền dưới */
.source-tags {
  padding-bottom: 28px !important;
  margin-top: 20px !important;
}






/* Section 6: CHỈ hiệu ứng thanh vàng trượt ở đáy card */
.value-card,
.gb-container.value-card {
  position: relative !important;
  overflow: hidden !important;
}

.value-card::after,
.gb-container.value-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #D4922A, #F2B94B);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
  z-index: 10;
}

.value-card:hover::after,
.gb-container.value-card:hover::after {
  transform: scaleX(1);
}

/* Số mờ lớn (01, 02...) kéo lên gần icon */
.value-num {
  font-family: 'Be Vietnam Pro', serif;
  font-size: 60px;
  font-weight: 900;
  color: rgba(212,146,42,0.10);
  line-height: 1;
  margin-bottom: -10px;
  user-select: none;
  display: block;
}





/* ════════════════════════════════
   SECTION 10 — HỢP TÁC CTA
   ════════════════════════════════ */

/* Ánh sáng vàng mờ giữa đáy */
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center bottom,
    rgba(212,146,42,0.13) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 1;
}

/* Hover nút vàng */
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(212,146,42,0.5) !important;
}

/* Hover nút viền trắng */
.btn-outline-white:hover {
  border-color: #ffffff !important;
  background: rgba(255,255,255,0.07) !important;
}





/* ════════════════════════════════════════
   TRANG LIÊN HỆ & BÁO GIÁ
   ════════════════════════════════════════ */

/* --- Page Hero --- */
.contact-hero {
  min-height: 360px;
  background:
    linear-gradient(135deg,
      rgba(14,42,71,0.96) 0%,
      rgba(22,59,95,0.88) 50%,
      rgba(212,146,42,0.18) 100%),
    url('') center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  padding: 100px 48px 64px;
  position: relative;
  overflow: hidden;
}
.contact-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, #fff);
}

/* --- Form wrapper --- */
.form-wrap {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
}

/* --- WPForms: Label --- */
.form-wrap .wpforms-field-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0E2A47 !important;
  margin-bottom: 6px !important;
}

/* --- WPForms: Input, Select, Textarea --- */
.form-wrap .wpforms-field input:not([type="checkbox"]),
.form-wrap .wpforms-field select,
.form-wrap .wpforms-field textarea {
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  width: 100% !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  box-shadow: none !important;
}
.form-wrap .wpforms-field input:focus,
.form-wrap .wpforms-field select:focus,
.form-wrap .wpforms-field textarea:focus {
  border-color: #D4922A !important;
  box-shadow: 0 0 0 3px rgba(212,146,42,0.12) !important;
  outline: none !important;
}

/* --- WPForms: Checkboxes --- */
.form-wrap .wpforms-field-checkbox ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  background: #fff;
  list-style: none;
  margin: 0;
}
.form-wrap .wpforms-field-checkbox ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.form-wrap .wpforms-field-checkbox ul li input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border: 2px solid rgba(0,0,0,0.2) !important;
  border-radius: 4px !important;
  accent-color: #D4922A;
  padding: 0 !important;
  cursor: pointer;
}
.form-wrap .wpforms-field-checkbox ul li label {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #1C1C1C !important;
  cursor: pointer;
  margin: 0 !important;
}
.form-wrap .wpforms-field-checkbox ul li:hover label {
  color: #D4922A !important;
}

/* --- WPForms: Nút Submit --- */
.form-wrap .wpforms-submit-container .wpforms-submit {
  width: 100% !important;
  padding: 16px !important;
  background: linear-gradient(135deg, #D4922A, #F2B94B) !important;
  color: #0E2A47 !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(212,146,42,0.3) !important;
  transition: all 0.3s ease !important;
  margin-top: 8px !important;
}
.form-wrap .wpforms-submit-container .wpforms-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(212,146,42,0.45) !important;
}

/* --- Contact cards --- */
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: #F8F5F0;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.2s;
  margin-bottom: 10px;
}
.contact-card:hover {
  border-color: rgba(212,146,42,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.contact-icon {
  width: 40px; height: 40px; min-width: 40px;
  background: #FDF3E3;
  border-radius: 10px;
  border: 1px solid rgba(212,146,42,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

/* --- Quick reasons box --- */
.quick-reasons {
  background: #0E2A47;
  border-radius: 14px;
  padding: 22px;
  margin-top: 20px;
}
.quick-reason {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.quick-reason:first-child { padding-top: 0; }
.quick-reason:last-child { border-bottom: none; padding-bottom: 0; }
.qr-icon {
  width: 36px; height: 36px; min-width: 36px;
  background: rgba(212,146,42,0.15);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

/* --- Thanh cam kết --- */
.commitment-bar { background: #0E2A47; padding: 40px 48px; }
.commitment-item {
  display: flex; align-items: center; gap: 16px;
}
.commitment-icon {
  width: 48px; height: 48px; min-width: 48px;
  background: rgba(212,146,42,0.12);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .contact-hero  { padding: 80px 28px 52px; }
  .form-wrap     { padding: 28px 24px; }
  .commitment-bar { padding: 32px 28px; }
}
@media (max-width: 600px) {
  .contact-hero  { padding: 72px 18px 44px; min-height: 280px; }
  .form-wrap     { padding: 20px 16px; }
  .commitment-bar { padding: 28px 18px; }
}





/* ══ PRODUCT MAIN TRONG SINGLE SẢN PHẨM ══ */
.product-name {
  border-bottom: 1px solid rgba(212,146,42,0.2);
}

/* Gallery sticky */
.product-gallery {
  position: sticky;
  top: 92px;
}

/* Cert badge hover */
.cert-item {
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}
.cert-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #D4922A, #F2B94B);
  transform: scaleX(0);
  transition: transform 0.3s;
  transform-origin: left;
}
.cert-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.cert-item:hover::before { transform: scaleX(1); }

/* Quick specs hover */
.qs-item { transition: background 0.2s; }
.qs-item:hover { background: #FDF3E3 !important; }

/* Pack pills */
.pack-pill { cursor: pointer; }

/* CTA button hover */
.btn-gold {
  box-shadow: 0 4px 20px rgba(212,146,42,0.35);
  transition: all 0.3s;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(212,146,42,0.5);
}
.btn-navy { transition: all 0.3s; }
.btn-navy:hover {
  background: #1E4D7B !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14,42,71,0.3);
}

/* Segment tag hover */
.product-segment-tag { transition: all 0.2s; }
.product-segment-tag:hover {
  background: #D4922A !important;
  color: #fff !important;
}

/* ══ RESPONSIVE ══ */
@media (max-width: 960px) {
  .product-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .product-gallery { position: static; }
  .product-main { padding: 48px 24px !important; }
}
@media (max-width: 600px) {
  .quick-specs-grid { grid-template-columns: 1fr !important; }
  .cta-wrap { flex-direction: column; }
}





.pack-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.pack-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border: 2px solid rgba(212,146,42,0.2);
    border-radius: 8px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #0E2A47;
    background: #ffffff;
    transition: all 0.2s;
    cursor: default;
    white-space: nowrap;
}

/* Pill đầu tiên luôn active như layout mẫu */
.pack-pill:first-child {
    border-color: #D4922A;
    background: #FDF3E3;
    color: #D4922A;
}

/* Hover các pill còn lại */
.pack-pill:not(:first-child):hover {
    border-color: rgba(212,146,42,0.4);
    background: #F8F5F0;
}

/* Icon emoji size đồng đều */
.pack-pill .pill-icon {
    font-size: 17px;
    line-height: 1;
}

add_shortcode('quy_cach', function() {
    $post_id = get_the_ID();
    $field   = get_field_object('quy_cach', $post_id);
    $values  = get_field('quy_cach', $post_id);

    if (!$values || !$field) return '';

    $choices = $field['choices'];

    $icons = [
        'Bịch 18kg' => '🥡',
        'Can 18kg'  => '🥡',
        'Xe bồn'    => '🛢',
        'Flexibag'  => '📦',
    ];

    $out = '<div class="pack-options">';
    foreach ($values as $v) {
        $label = isset($choices[$v]) ? $choices[$v] : $v;
        $icon  = isset($icons[$label]) ? $icons[$label] : '📦';
        $out  .= '<span class="pack-pill">'
               . '<span class="pill-icon">' . $icon . '</span>'
               . esc_html($label)
               . '</span>';
    }
    $out .= '</div>';
    return $out;
});






/* ══ DETAIL SECTION Trong từng SIngle Product ══ */
.detail-section .section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.divider {
    background: linear-gradient(90deg, #D4922A, #F2B94B) !important;
    border-radius: 3px;
}

/* Checklist */
.check-list { display: flex; flex-direction: column; }
.check-row {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #F8F5F0;
    font-size: 14px; line-height: 1.6; color: #1C1C1C;
}
.check-row:last-child { border-bottom: none; }
.check-circle {
    width: 22px; height: 22px; flex-shrink: 0;
    background: linear-gradient(135deg, #D4922A, #F2B94B);
    border-radius: 50%; margin-top: 2px;
    display: flex; align-items: center; justify-content: center;
}
.check-circle svg {
    width: 11px; height: 11px;
    stroke: #0E2A47; stroke-width: 3;
    fill: none;
}
.check-row strong { color: #0E2A47; font-weight: 600; }

/* Specs card */
.specs-card { position: sticky; top: 92px; }
.spec-row { border-bottom: 1px solid rgba(255,255,255,0.07); }
.spec-row:last-of-type { border-bottom: none; }

/* Spec download hover */
.spec-download {
    background: rgba(255,255,255,0.07);
    transition: background 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
}
.spec-download:hover { background: rgba(255,255,255,0.13); }
.spec-dl-text { font-size: 13px; font-weight: 600; }
.spec-dl-sub { font-size: 11px; color: rgba(255,255,255,0.4); }

/* ══ RESPONSIVE ══ */
@media (max-width: 960px) {
    .detail-grid { grid-template-columns: 1fr !important; }
    .specs-card { position: static; }
    .detail-section { padding: 56px 24px !important; }
}
@media (max-width: 600px) {
    .detail-section { padding: 40px 16px !important; }
}






/* ──────────────────────────────────────────────
   1. ẨN NATIVE WP LOOP
   ────────────────────────────────────────────── */
.blog .site-main > article,
.blog .site-main > .post,
.archive .site-main > article,
.archive .site-main > .post {
  display: none !important;
}

/* ──────────────────────────────────────────────
   2. PAGE HERO — ::before và ::after
   ────────────────────────────────────────────── */

/* Lớp ánh sáng vàng radial ở góc trên phải */
.vinoil-hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(212,146,42,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Dải fade từ transparent → off-white ở đáy hero */
.vinoil-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, #F8F5F0);
  pointer-events: none;
  z-index: 1;
}

/* Đảm bảo nội dung hero nằm trên pseudo-elements */
.vinoil-hero > * { position: relative; z-index: 2; }

/* ──────────────────────────────────────────────
   3. FILTER TAB ACTIVE THEO BODY CLASS
   ────────────────────────────────────────────── */

/* Tab "Tất Cả" active khi ở trang blog index */
.blog .vinoil-tab-all {
  background: #0E2A47 !important;
  color: #ffffff !important;
  border-color: #0E2A47 !important;
}

/* Tab "Kiến Thức" active khi ở category đó */
.category-kien-thuc-chuyen-nganh .vinoil-tab-kienthuc {
  background: linear-gradient(135deg, #0E2A47, #1E4D7B) !important;
  color: #ffffff !important;
  border-color: #0E2A47 !important;
}

/* Tab "Thị Trường" active */
.category-thi-truong-dau-an .vinoil-tab-thitruong {
  background: linear-gradient(135deg, #1A6B3E, #26A65B) !important;
  color: #ffffff !important;
  border-color: #1A6B3E !important;
}

/* Tab "Tin Công Ty" active */
.category-tin-cong-ty .vinoil-tab-tincongty {
  background: linear-gradient(135deg, #1A4D7A, #2271B4) !important;
  color: #ffffff !important;
  border-color: #1A4D7A !important;
}



/* ──────────────────────────────────────────────
   5. RESPONSIVE HELPER
   ────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Hero ::after fade vẫn hoạt động trên mobile */
  .vinoil-hero::after { height: 50px; }
}


/* ==============================
   WPFORMS trong Newsletter Widget
   ============================== */

.vinoil-newsletter-form .wpforms-form .wpforms-field input[type="email"],
.vinoil-newsletter-form .wpforms-form .wpforms-field input[type="text"] {
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  background: rgba(255,255,255,0.07) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  outline: none !important;
  transition: all 0.2s !important;
  margin-bottom: 10px !important;
}

.vinoil-newsletter-form .wpforms-form .wpforms-field input::placeholder {
  color: rgba(255,255,255,0.35) !important;
}

.vinoil-newsletter-form .wpforms-form .wpforms-field input:focus {
  border-color: #D4922A !important;
  background: rgba(255,255,255,0.1) !important;
}

/* Ẩn label (chỉ cần placeholder) */
.vinoil-newsletter-form .wpforms-form .wpforms-field label {
  display: none !important;
}

/* Nút Submit */
.vinoil-newsletter-form .wpforms-form .wpforms-submit,
.vinoil-newsletter-form .wpforms-form button[type="submit"] {
  width: 100% !important;
  padding: 11px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #D4922A, #F2B94B) !important;
  color: #0E2A47 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  transition: all 0.25s !important;
  display: block !important;
}

.vinoil-newsletter-form .wpforms-form .wpforms-submit:hover,
.vinoil-newsletter-form .wpforms-form button[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(212,146,42,0.4) !important;
}

/* Ẩn error message background mặc định của WPForms */
.vinoil-newsletter-form .wpforms-form .wpforms-field-container {
  margin-bottom: 0 !important;
}

/* ================================================
   PAGINATION — Style khớp mockup
   WP native pagination, không cần plugin
   ================================================ */

/* Wrapper căn giữa */
.blog .pagination,
.archive .pagination,
.blog .nav-links,
.archive .nav-links,
.blog .page-numbers-wrap,
.archive .page-numbers-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 48px !important;
  padding: 0 48px !important;
  list-style: none !important;
}

/* Mỗi nút số */
.blog .page-numbers,
.archive .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  background: #FFFFFF !important;
  color: #1C1C1C !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  line-height: 1 !important;
}

/* Hover */
.blog .page-numbers:hover,
.archive .page-numbers:hover {
  border-color: #D4922A !important;
  color: #D4922A !important;
  background: #FDF3E3 !important;
}

/* Trang hiện tại — active */
.blog .page-numbers.current,
.archive .page-numbers.current {
  background: #0E2A47 !important;
  color: #FFFFFF !important;
  border-color: #0E2A47 !important;
}

/* Dấu "…" */
.blog .page-numbers.dots,
.archive .page-numbers.dots {
  border: none !important;
  background: transparent !important;
  width: auto !important;
  color: #6B6B6B !important;
  cursor: default !important;
}
.blog .page-numbers.dots:hover,
.archive .page-numbers.dots:hover {
  background: transparent !important;
  color: #6B6B6B !important;
  border: none !important;
}

/* Nút Prev / Next — rộng hơn, có chữ */
.blog .page-numbers.prev,
.blog .page-numbers.next,
.archive .page-numbers.prev,
.archive .page-numbers.next {
  width: auto !important;
  padding: 0 16px !important;
  gap: 6px !important;
  font-size: 13px !important;
}

/* Mobile */
@media (max-width: 768px) {
  .blog .pagination,
  .archive .pagination,
  .blog .nav-links,
  .archive .nav-links {
    padding: 0 20px !important;
    flex-wrap: wrap !important;
  }
}





/* ── VINOIL Category List Widget (sidebar custom) ── */
.vinoil-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vinoil-cat-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    color: #1C1C1C;
    font-weight: 500;
    transition: all 0.2s;
}
.vinoil-cat-list li a:hover {
    background: #FDF3E3;
    color: #D4922A;
}
.vinoil-cat-list li.active > a {
    background: #0E2A47;
    color: #ffffff;
}
.vinoil-cat-count {
    background: rgba(0,0,0,0.07);
    color: #6B6B6B;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
    min-width: 24px;
    text-align: center;
}
.vinoil-cat-list li.active .vinoil-cat-count {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
}





/* Ẩn title và description mặc định của Category/Tag Archive */
.archive .page-header {
    display: none !important;
}





/* ── VINOIL Tag Cloud (sidebar custom) ── */
.vinoil-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 18px;
}

/* Tag mặc định — vàng nhạt */
.vinoil-tag-pill {
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    background: #FDF3E3;
    color: #D4922A;
    border: 1px solid rgba(212,146,42,0.2);
    text-decoration: none;
    transition: all 0.22s;
    line-height: 1.4;
}

/* Hover */
.vinoil-tag-pill:hover {
    background: #D4922A;
    color: #0E2A47;
    border-color: #D4922A;
    transform: translateY(-1px);
}

/* Active — tag đang được xem */
.vinoil-tag-pill.active {
    background: #0E2A47;
    color: #ffffff;
    border-color: #0E2A47;
    box-shadow: 0 3px 10px rgba(14,42,71,0.25);
}

/* Hover trên tag active */
.vinoil-tag-pill.active:hover {
    background: #1E4D7B;
    border-color: #1E4D7B;
    color: #ffffff;
}






/* ============================================================
   VINOIL — SINGLE POST STYLES 26/3/2026 7h52
   Chỉ những thứ GB Panel không làm được
   ============================================================ */


/* ──────────────────────────────────────────
   2. POST HERO — ::before và ::after
   (Vầng sáng vàng góc phải + Dải fade đáy)
   ────────────────────────────────────────── */
.vinoil-post-hero {
  position: relative;
  overflow: hidden;
}
.vinoil-post-hero::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(212,146,42,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
/* Dải fade từ transparent xuống off-white ở đáy hero */
.vinoil-post-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, #F8F5F0);
  pointer-events: none;
  z-index: 1;
}
/* Nội dung hero phải nằm trên 2 pseudo-elements */
.vinoil-post-hero > * { position: relative; z-index: 2; }

/* ──────────────────────────────────────────
   3. SIDEBAR STICKY
   ────────────────────────────────────────── */
.single .vinoil-post-sidebar-inner {
  position: sticky;
  top: 96px;
}

/* ──────────────────────────────────────────
   4. ARTICLE TYPOGRAPHY
   (WP the_content — GB không can thiệp vào)
   ────────────────────────────────────────── */

/* Lead paragraph — đoạn mở đầu to hơn */
.single .post-content .lead,
.single .entry-content .lead {
  font-size: 17px !important;
  line-height: 1.85 !important;
  padding-bottom: 28px;
  margin-bottom: 28px !important;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

/* H2 trong bài — thanh vàng bên trái */
.single .post-content h2,
.single .entry-content h2 {
  font-family: 'Be Vietnam Pro', serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #0E2A47 !important;
  line-height: 1.3 !important;
  margin: 40px 0 16px !important;
  padding-top: 40px;
  border-top: 1px solid rgba(0,0,0,0.07);
  display: flex !important;
  align-items: center;
  gap: 12px;
  scroll-margin-top: 100px;
}
/* H2 đầu tiên không có border-top */
.single .post-content h2:first-of-type,
.single .entry-content h2:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}
/* Thanh vàng trước H2 */
.single .post-content h2::before,
.single .entry-content h2::before {
  content: '';
  display: inline-block;
  width: 4px; height: 24px;
  background: linear-gradient(180deg, #D4922A, #F2B94B);
  border-radius: 2px;
  flex-shrink: 0;
}

/* H3 trong bài */
.single .post-content h3,
.single .entry-content h3 {
  font-family: 'Be Vietnam Pro', serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #0E2A47 !important;
  line-height: 1.4 !important;
  margin: 28px 0 12px !important;
  scroll-margin-top: 100px;
}

/* Paragraph */
.single .post-content p,
.single .entry-content p {
  font-size: 15.5px !important;
  line-height: 1.85 !important;
  color: #1C1C1C !important;
  margin-bottom: 18px !important;
}

/* Blockquote */
.single .post-content blockquote,
.single .entry-content blockquote {
  margin: 24px 0 !important;
  padding: 18px 22px 18px 26px !important;
  background: #FDF3E3 !important;
  border-left: 4px solid #D4922A !important;
  border-radius: 0 10px 10px 0 !important;
  font-style: italic !important;
}
.single .post-content blockquote p,
.single .entry-content blockquote p {
  font-size: 15px !important;
  color: #0E2A47 !important;
  line-height: 1.75 !important;
  font-weight: 500 !important;
  margin: 0 !important;
}
.single .post-content blockquote cite,
.single .entry-content blockquote cite {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: #D4922A;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Unordered List */
.single .post-content ul,
.single .entry-content ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.single .post-content ul li,
.single .entry-content ul li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  padding-left: 0 !important;
}
.single .post-content ul li::before,
.single .entry-content ul li::before {
  content: '' !important;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #D4922A !important;
  flex-shrink: 0;
  margin-top: 9px;
}

/* Ordered List */
.single .post-content ol,
.single .entry-content ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  counter-reset: ol-vinoil;
}
.single .post-content ol li,
.single .entry-content ol li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  counter-increment: ol-vinoil;
}
.single .post-content ol li::before,
.single .entry-content ol li::before {
  content: counter(ol-vinoil) !important;
  min-width: 22px; height: 22px;
  border-radius: 50%;
  background: #0E2A47 !important;
  color: #fff !important;
  font-size: 11px; font-weight: 700;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Table */
.single .post-content table,
.single .entry-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 24px 0 !important;
  font-size: 14px !important;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.single .post-content th,
.single .entry-content th {
  background: linear-gradient(135deg, #0E2A47, #163B5F) !important;
  color: #fff !important;
  padding: 12px 16px !important;
  text-align: left !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
.single .post-content td,
.single .entry-content td {
  padding: 11px 16px !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  color: #1C1C1C !important;
  background: #fff !important;
}
.single .post-content tr:nth-child(even) td,
.single .entry-content tr:nth-child(even) td {
  background: #F8F5F0 !important;
}
.single .post-content tr:last-child td,
.single .entry-content tr:last-child td {
  border-bottom: none !important;
}

/* ──────────────────────────────────────────
   5. EASY TABLE OF CONTENTS
   (Plugin render — cần override style)
   ────────────────────────────────────────── */
#ez-toc-container {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  border-left: 3px solid #D4922A !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
.ez-toc-title-container {
  padding: 15px 20px !important;
  background: linear-gradient(135deg, rgba(14,42,71,0.04), rgba(14,42,71,0.01)) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.ez-toc-title {
  font-family: 'Be Vietnam Pro', serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0E2A47 !important;
}
#ez-toc-container nav ul {
  padding: 12px 18px !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
#ez-toc-container nav ul li a {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #1C1C1C !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  transition: all 0.2s !important;
}
#ez-toc-container nav ul li a:hover {
  background: #FDF3E3 !important;
  color: #D4922A !important;
}
/* H3 items thụt vào */
#ez-toc-container nav ul ul {
  padding: 0 0 0 16px !important;
}

/* ──────────────────────────────────────────
   6. TAGS + SHARE BAR (border-top gold-pale)
   ────────────────────────────────────────── */
.vinoil-post-footer-bar {
  border-top: 2px solid #FDF3E3;
  padding-top: 28px;
  margin-top: 40px;
}

/* ──────────────────────────────────────────
   7. RESPONSIVE SINGLE POST
   ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .single .vinoil-post-sidebar-inner {
    position: static;
  }
}
@media (max-width: 768px) {
  .vinoil-post-hero::after { height: 50px; }
  .single .post-content h2, .single .entry-content h2 {
    font-size: 21px !important;
  }
  .single .post-content h3, .single .entry-content h3 {
    font-size: 17px !important;
  }
}





/* ══════════════════════════════════════════
   VINOIL SEARCH — Clean override 1/4/2026
══════════════════════════════════════════ */

/* Chỉ target grid-container TRỰC TIẾP trong site-content
   → Không đụng đến header */
body.search-full-width .site-content > .grid-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Content area cũng về 0 padding */
body.search-full-width .content-area {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}