/* ===== Fonts ===== */
@font-face{
  font-family:"BeVietnamHeading";
  src:url("/wp-content/themes/flatsome-child/fonts/be_pro/BeVietnamPro-SemiBold_9_11zon.woff2") format("woff2"),
      url("/wp-content/themes/flatsome-child/fonts/be_pro/BeVietnamPro-SemiBold_9_11zon.woff") format("woff");
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Be-pro";
  src:url("/wp-content/themes/flatsome-child/fonts/svn-gilroy/Regular.woff2") format("woff2"),
      url("/wp-content/themes/flatsome-child/fonts/svn-gilroy/Regular.woff") format("woff");
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"fl-icons";
  src:url("/wp-content/themes/flatsome/assets/css/icons/fl-icons.woff2?v=3.19.12") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

/* ===== Typography ===== */
body{font-family:"BeVietnamBody",sans-serif}
a{font-family:"Be-pro",sans-serif}
h1,h2,h3,h4,h5,h6{font-family:"BeVietnamHeading",sans-serif}




:root {

  /* ======================================================
     COLOR SYSTEM (FDIPARE BRAND)
     ====================================================== */

  --color-primary-50:  #E6F6FB;
  --color-primary-100: #CDEDF7;
  --color-primary-200: #A5DFF0;
  --color-primary-300: #7DD3EC;
  --color-primary-400: #59C8E4;
  --color-primary-500: #2FB6DB;

  --color-brand-600: #1E9CC7;
  --color-brand-700: #1784A9;
  --color-brand-800: #106CAB;
  --color-brand-900: #0A4F80;

  --color-accent:      #59C8E4;
  --color-accent-soft: #7DD3EC;

  --color-text-primary:   #0F172A;
  --color-text-secondary: #475569;
  --color-text-light:     #94A3B8;

  --color-border:     #E2E8F0;
  --color-surface:    #F8FAFC;
  --color-background: #FFFFFF;
	
	--fd-navy: #002347;
    --fd-blue-light: #2c7be5;
    --fd-border: #eee;
    --fd-bg-gray: #f9f9f9;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 40px;
  --space-2xl: 48px;
  --space-3xl: 56px;
  --space-4xl: 64px;
  --space-5xl: 80px;
  --space-6xl: 96px;
  --space-7xl: 120px;


  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-4xl: 40px;
  --radius-pill: 999px;


  --text-2xs: 12px;
  --text-xs:  14px;
  --text-sm:  16px;
  --text-base: 18px;
  --text-md:  20px;
  --text-lg:  24px;
  --text-xl:  28px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-4xl: 48px;
  --text-5xl: 56px;
  --text-6xl: 64px;


  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   1.9;

  --container-xl: 1300px;

  --grid-gap-xs: 8px;
  --grid-gap-sm: 16px;
  --grid-gap-md: 24px;
  --grid-gap-lg: 32px;
  --grid-gap-xl: 48px;

  --shadow-xs: 0 2px 6px rgba(0,0,0,0.05);
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.16);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.20);

	
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-max: 999;


  --transition-fast:   .15s ease;
  --transition-normal: .25s ease;
  --transition-slow:   .4s ease;

  --header-height: 80px;
  --header-mobile-height: 64px;

  --border-thin:   1px;
  --border-normal: 2px;
  --border-thick:  4px;
	
	
	/* Ghi đè lại Space để dùng thống nhất */
  --section-padding: var(--space-md); /* 24px */
  --item-padding: var(--space-sm);    /* 16px */
  --grid-gap: var(--space-md);        /* 24px */
}


/* ======================================================
   HEADING SYSTEM (DESKTOP)
   ====================================================== */
/** css thẻ trên desktop và mobie */
h2{
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  font-weight: 600;
  margin-bottom: var(--space-md);
  color: var(--color-brand-900) !important;
  line-height: var(--leading-tight);
}

h3{
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-text-primary);
}


/* ======================================================
   HEADING SYSTEM (MOBILE)
   ====================================================== */
@media (max-width: 768px) {
  :root {
    --section-padding: var(--space-sm); /* 16px */
    --item-padding: var(--space-xs);    /* 8px */
    --grid-gap: var(--space-sm);        /* 16px */
  }
}

@media (max-width: 768px){

  h2{
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
  }

  h3{
    font-size: var(--text-md);
    line-height: var(--leading-snug);
  }
	button{
		font-size: 16px;
	}
}




/* =========================
   GLOBAL TYPOGRAPHY
   p + span
   ========================= */

p,
span{

  font-size:var(--text-sm) !important;

  line-height:1.8;

	text-align: justify;
}


/* paragraph spacing */

p{
  margin-bottom:var(--space-md);
}


/* span reset (WP editor thường sinh span) */

span{
  font:inherit;
  color:inherit;
}


/* strong */

strong{

  font-weight:600;

}

/** css trang danh mục */

/* =========================================================
   1. GRID FLATSOME (CHỈ SỬA SPACING – KHÔNG PHÁ GRID)
========================================================= */
.woocommerce ul.products.row{
  margin-left: calc(-1 * var(--space-sm));
  margin-right: calc(-1 * var(--space-sm));
}

.woocommerce ul.products.row .col{
  padding: var(--space-sm) !important;
}


/* ❌ BỎ flex-basis để Flatsome tự chia 4 cột */


/* =========================================================
   2. CARD (THEO SYSTEM)
========================================================= */
.fdicare-product-inner{
  display: flex;
  flex-direction: column;
  height: 100%;

  border-radius: var(--radius-lg);

  background: linear-gradient(
    180deg,
    #ffffff 0%,
    var(--color-surface) 100%
  );

  box-shadow: var(--shadow-xs);

  overflow: hidden;
  text-decoration: none;

  transition: var(--transition-normal);
}

.fdicare-product-inner:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}


/* =========================================================
   3. IMAGE (THU NHỎ + CÓ SPACING)
========================================================= */
.fdicare-product-image{
  position: relative;
  aspect-ratio: 4 / 3;


  background: linear-gradient(
    180deg,
    var(--color-surface) 0%,
    #eef2f7 100%
  );

  display: flex;
  align-items: center;
  justify-content: center;
}

.fdicare-product-image img{
  object-fit: contain;

  transition: var(--transition-slow);
}

.fdicare-product-inner:hover .fdicare-product-image img{
  transform: scale(1.05);
}


/* =========================================================
   4. BADGE (THEO TOKEN)
========================================================= */
.fdicare-badge{
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);

  padding: 4px 8px;

  font-size: var(--text-2xs);

  color: #fff;

  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);

  border-radius: var(--radius-pill);
}


/* =========================================================
   5. CONTENT (GỌN LẠI)
========================================================= */
.fdicare-product-content{
  padding: var(--space-sm);

  display: flex;
  flex-direction: column;

  gap: var(--space-2xs, 4px);
}


/* TITLE */
.fdicare-product-title{
  font-size: var(--text-xs);
  font-weight: 600;

  line-height: 1.4;
  margin: 0;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;

  min-height: 32px;
}


/* PRICE */
.fdicare-product-price{
  font-size: var(--text-sm);
  font-weight: 600;
}

.fdicare-product-price ins{
  color: #991b1b;
  text-decoration: none;
}

.fdicare-product-price del{
  font-size: var(--text-2xs);
  color: var(--color-text-light);
}


/* CTA */
.fdicare-product-cta{
  margin-top: auto;

  font-size: var(--text-2xs);
  color: var(--color-text-light);

  transition: var(--transition-fast);
}

.fdicare-product-inner:hover .fdicare-product-cta{
  color: var(--color-text-primary);
  transform: translateX(3px);
}


/* =========================================================
   6. FIX CHIỀU CAO
========================================================= */
.woocommerce ul.products li.product{
  display: flex;
}

li{
  list-style: none;
}

.nav-dropdown-has-border .nav-dropdown{
	min-width: 600px;
	padding: 12px 24px !important;
}

/** dịch vụ */
.solutions-section {
  padding: var(--space-xl) 0;
  background-color: var(--color-surface);
}

.solutions-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Tỉ lệ tiêu đề : thẻ */
  gap: 64px; /* 24px */
  align-items: center;
}

/* Header bên trái */
.brand-subtext {
  color: var(--color-brand-600);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
}



.solutions-desc {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Grid thẻ bên phải */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md); /* 24px desktop */
}

.sol-card {
  background: var(--color-background);
  padding: var(--space-md); /* 24px desktop */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  transition: var(--transition-normal);
}

.sol-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-400);
	cursor: pointer;
}

.sol-icon-box {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-sm);
}

.sol-icon-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sol-card-title {
  font-size: var(--text-base); /* 18px */
  color: var(--color-brand-800);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.sol-card-text {
  font-size: var(--text-xs); /* 14px */
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--leading-snug);
}

/* Responsive cho Mobile */
@media (max-width: 991px) {
  .solutions-wrapper {
    grid-template-columns: 1fr; /* Chuyển về 1 cột dọc */
    text-align: center;
		gap: 0px;
  }
  
  .solutions-grid {
    margin-top: var(--space-md);
  }
}

@media (max-width: 767px) {
  .solutions-grid {
    grid-template-columns: 1fr; /* Thẻ xếp dọc trên mobile */
    gap: var(--space-sm); /* 16px mobile */
  }

  .sol-card {
    padding: var(--space-sm); /* 16px mobile */
  }
}

/*danh mục sản phẩm*/
.ecosystem-products{
	padding: var(--space-xl) 0;
}
.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap-md); /* 24px */
}

.eco-item {
  background: var(--color-background);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  text-decoration: none;
  transition: var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.eco-image {
  position: relative;
  height: 200px; /* Thu gọn ảnh để nhường chỗ cho mô tả */
  overflow: hidden;
}

.eco-info {
  padding: var(--item-padding); /* 16px desktop / 8px mobile */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.eco-info h3 {
  font-size: var(--text-sm); /* 16px */
  color: var(--color-brand-800);
  margin-bottom: var(--space-xs); /* 8px */
}

.eco-desc {
  font-size: var(--text-xs); /* 14px */
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-sm);
  /* Giới hạn 2 dòng để đều layout */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.eco-link {
  font-size: var(--text-2xs);
  color: var(--color-brand-600);
  font-weight: 700;
  margin-top: auto; /* Đẩy link xuống cuối thẻ */
  transition: var(--transition-fast);
}

/* Hover Effect */
.eco-item:hover {
  transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-400);
}

.eco-item:hover .eco-glass {
  backdrop-filter: blur(0px);
  background: transparent;
}

.eco-item:hover .eco-link {
  color: var(--color-brand-800);
  padding-left: 5px;
}

/* Responsive cho Mobile */
@media (max-width: 991px) {
  .ecosystem-grid { grid-template-columns: repeat(2, 1fr);	gap:var(--grid-gap-sm); }
}

@media (max-width: 767px) {
  .eco-image { height: 120px; }
  .eco-desc { -webkit-line-clamp: 3; } /* Hiện nhiều chữ hơn trên mobile nếu cần */
}


/**quy trình xây dựng */
.process-section {
  padding: var(--space-xl) 0;
  background-color: var(--color-background);
}

.process-section{
	background-color: var(--color-surface);
}
.process-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* Tỉ lệ trái-phải */
  gap: var(--grid-gap-xl); /* Khoảng cách rộng rãi 48px */
  align-items: start;
}



.process-intro-text {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
}

.process-image-box {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.process-image-box img {
  width: 100%;
  height: auto;
  display: block;
}

.btn-consult {
  display: inline-block;
  margin-top: var(--space-md);
  padding: 12px 24px;
  background-color: #C00; /* Màu đỏ nổi bật như trong ảnh */
  color: #FFF;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

/* Khối Timeline bên phải */
.process-steps {
  position: relative;
  padding-left: var(--space-sm);
}

/* Đường kẻ dọc nối các bước */
.process-steps::before {
  content: '';
  position: absolute;
  left: 36px; /* Căn giữa số thứ tự */
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-border);
  z-index: 1;
}

.step-item {
  position: relative;
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  z-index: 2;
}

.step-number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background-color: #F89E1B; /* Màu cam đặc trưng trong ảnh */
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--text-base);
  box-shadow: 0 0 0 6px var(--color-background);
}

.step-content {
  background: var(--color-surface);
  padding: var(--item-padding); /* 16px desktop / 8px mobile */
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: var(--transition-normal);
}

.step-content:hover {
  border-color: #F89E1B;
  background: white;
  box-shadow: var(--shadow-sm);
}

.step-content h3 {
  font-size: var(--text-base);
  color: var(--color-brand-800);
  margin-bottom: 8px;
  font-weight: 700;
}

.step-content p {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin: 0;
}

/* Responsive cho Mobile */
@media (max-width: 991px) {
  .process-wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .process-steps::before {
    left: 26px;
  }
  
  .step-number {
    width: 36px;
    height: 36px;
    font-size: var(--text-sm);
  }
  
  .step-item {
    gap: var(--space-sm);
  }
}


/** lý do chọn */
.why-us-premium {
  padding: var(--space-xl) 0;
  background-color: var(--color-surface); /* Nền xám nhạt */
}

.premium-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2x2 cho sự cân bằng */
  gap: var(--grid-gap-md); /* 24px */
}

.premium-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md); /* 24px desktop */
  background: rgba(255, 255, 255, 0.7); /* Glassmorphism */
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all 0.4s ease;
}

.premium-card:hover {
  background: white;
  transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-400);
}

.premium-icon-circle {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: var(--color-brand-900);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--text-base);
  position: relative;
}

/* Hiệu ứng vòng tròn lan tỏa nhạt */
.premium-icon-circle::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid var(--color-brand-200);
  border-radius: 50%;
  opacity: 0.5;
}

.premium-content h3 {
  font-size: var(--text-md); /* 20px */
  color: var(--color-brand-900);
  font-weight: 700;
  margin-bottom: 8px;
}

.premium-content p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.premium-content strong {
  color: var(--color-brand-700);
  font-weight: 600;
}

/* Mobile: Xếp dọc 1 cột */
@media (max-width: 767px) {
  .premium-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .premium-card {
    padding: var(--space-sm); /* 16px mobile */
  }

  .premium-icon-circle {
    width: 40px;
    height: 40px;
    font-size: var(--text-sm);
  }
}

/** sản phẩm phòng sạch */

.premium-products-section{
	  padding: var(--space-xl) 0;
}
/* 1. Container & Grid */
.product-premium-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap); /* Mặc định 24px, mobile 16px */
}

/* 2. Card Style */
.p-card {
    background: var(--color-background);
    border-radius: var(--radius-md); /* 12px */
    border: var(--border-thin) solid var(--color-border);
    transition: var(--transition-slow); /* 0.4s */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 3. Khung chứa ảnh - Tràn viền (No Padding) */
.p-image-link {
    position: relative;
    display: block;
    height: 280px; 
    background: var(--color-surface);
    padding: 0 !important; /* Ép về 0 theo yêu cầu của bạn */
    margin: 0;
    overflow: hidden;
}

/* 4. Hình ảnh - Phủ kín khung */
.p-image-link img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition-slow);
    display: block;
}

/* 5. Badge "New" */
.p-badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: var(--z-base);
    background: var(--color-brand-900);
    color: var(--color-background);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: var(--shadow-xs);
}

/* 6. Glassmorphism Overlay */
.p-glass-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-normal);
    z-index: 2;
}

.p-btn-view {
    background: var(--color-background);
    color: var(--color-brand-900);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-xs);
    font-size: var(--text-2xs);
    font-weight: 700;
    transform: translateY(15px);
    transition: var(--transition-normal);
}

/* 7. Thông tin sản phẩm */
.p-info {
    padding: var(--item-padding); /* Mặc định 16px, mobile 8px */
    border-top: var(--border-thin) solid var(--color-border);
    background: var(--color-background);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.p-title {
    font-size: 15px; /* Giữ theo kích thước bạn muốn */
    color: var(--color-text-primary);
    font-weight: 700;
    margin: 0 0 var(--space-xs) 0;
    line-height: var(--leading-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.p-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.p-price {
    font-size: var(--text-xs);
    color: #ef4444; /* Giữ màu đỏ giá để nổi bật */
    font-weight: 600;
}

/* 8. Hiệu ứng Hover */
.p-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-400);
}

.p-card:hover .p-glass-overlay {
    opacity: 1;
}

.p-card:hover .p-btn-view {
    transform: translateY(0);
}

.p-card:hover .p-image-link img {
    transform: scale(1.1);
}

/* Container chứa giá và sao */
.p-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: var(--space-xs);
    margin-top: auto;
}

/* Group chứa cả giá cũ và giá mới */
.p-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline; /* Căn chân chữ cho đẹp */
    gap: 8px; /* Khoảng cách giữa giá cũ và mới */
}

/* Giá cũ (Gạch ngang) */
.p-price del {
    text-decoration: line-through;
    color: var(--color-text-light); /* Màu xám nhạt #94A3B8 */
    font-size: var(--text-2xs); /* 12px */
    font-weight: 400;
    opacity: 0.8;
}

/* Giá mới (Nổi bật) */
.p-price ins {
    text-decoration: none; /* Bỏ gạch chân mặc định của thẻ ins */
    color: #ef4444; /* Giữ màu đỏ để kích thích mua hàng hoặc dùng var(--color-brand-800) */
    font-size: var(--text-sm); /* 16px */
    font-weight: 800;
}

/* Xử lý các tag con của WooCommerce (bdi, amount) */
.p-price ins .amount {
    color: #ef4444;
}

.p-price .woocommerce-Price-currencySymbol {
    font-size: 0.8em; /* Ký hiệu đ nhỏ hơn một chút cho tinh tế */
    margin-left: 2px;
    vertical-align: baseline;
}

.p-card:hover .eco-link {
  color: var(--color-brand-800);
  padding-left: 5px;
}

/* Phần ngôi sao đánh giá */
.p-stars {
    color: #F89E1B; /* Màu cam thương hiệu */
    font-size: 10px;
    letter-spacing: 1px;
}
/* --- RESPONSIVE SYSTEM --- */

/* Tablet & Small Desktop (Dưới 991px) */
@media (max-width: 991px) {
    .product-premium-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile & Tablet Small (Dưới 768px) */
@media (max-width: 768px) {
    /* 1. Layout Card & Hình ảnh */
    .p-image-link {
        height: 150px;
    }
    
    .p-title {
        font-size: var(--text-xs); /* 14px */
    }

    /* 2. Giá & Đánh giá */
    .p-price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .p-price {
        gap: 4px;
    }
    
    .p-price ins {
        font-size: var(--text-xs); /* Đồng bộ 14px */
    }

    /* 3. Grid & Spacing (Tự động nhận biến từ :root mobile của bạn) */
    .product-premium-grid {
        gap: var(--grid-gap); /* 16px */
    }
    
    .p-info {
        padding: var(--item-padding); /* 8px */
    }
}

/*blog bài viết */
/* --- BLOG SECTION STYLE --- */
.premium-blog-section {
    padding: var(--space-xl) 0;
    background-color: var(--color-background);
}

.section-header-compact {
    margin-bottom: var(--space-lg);
}

/* Lưới Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap); /* 24px desktop */
}

/* Blog Card */
.blog-card {
    background: var(--color-background);
    border-radius: var(--radius-md);
    border: var(--border-thin) solid var(--color-border);
    overflow: hidden;
    transition: var(--transition-slow);
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-300);
}

/* Khung ảnh & Date Badge */
.blog-image-wrap {
    position: relative;
    display: block;
    height: 240px;
    overflow: hidden;
    padding: 0 !important; /* Tràn viền giống phần sản phẩm */
}

.blog-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.blog-card:hover .blog-image-wrap img {
    transform: scale(1.1);
}

.blog-date {
    position: absolute;
    bottom: var(--space-sm);
    left: var(--space-sm);
    background: var(--color-background);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    text-align: center;
    box-shadow: var(--shadow-sm);
    z-index: 2;
}

.blog-date span:first-child {
    display: block;
    font-size: var(--text-base);
    font-weight: 800;
    color: var(--color-brand-900);
    line-height: 1;
}

.blog-date span:last-child {
    font-size: 10px;
    color: var(--color-text-light);
    text-transform: uppercase;
    font-weight: 700;
}

/* Nội dung bài viết */
.blog-content {
    padding: var(--item-padding); /* 16px desktop */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-category {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-brand-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
    display: block;
}

.blog-title {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-sm);
}

.blog-title a {
    text-decoration: none;
    color: var(--color-text-primary);
    transition: var(--transition-normal);
}

.blog-title a:hover {
    color: var(--color-brand-800);
}

.blog-excerpt {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-md);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-readmore {
    margin-top: auto;
    font-size: var(--text-2xs);
    font-weight: 800;
    color: var(--color-brand-900);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--color-primary-100);
    display: inline-block;
    align-self: flex-start;
    transition: var(--transition-normal);
}

.blog-readmore:hover {
    border-color: var(--color-brand-800);
    padding-left: 5px;
}

/* Footer Action */
.blog-footer-action {
    display: flex;
    justify-content: center;
    margin-top: var(--space-xl);
}

.btn-premium-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: var(--space-sm) var(--space-2xl);
    background: transparent;
    color: var(--color-brand-900);
    border: var(--border-normal) solid var(--color-brand-900);
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition-slow);
}

.btn-premium-more:hover {
    background: var(--color-brand-900);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.btn-premium-more svg {
    transition: transform var(--transition-normal);
}

.btn-premium-more:hover svg {
    transform: translateX(5px);
}

/* --- RESPONSIVE SYSTEM --- */
@media (max-width: 991px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: var(--grid-gap); /* 16px */
    }

    .blog-image-wrap {
        height: 200px;
    }

    .blog-content {
        padding: var(--item-padding); /* 8px */
    }

    .btn-premium-more {
        width: 100%;
        justify-content: center;
    }
}

.fdicare-subcategories{
	display: none;
}

/** css trang sản phẩm*/
/* ============================================================
   CHI TIẾT SẢN PHẨM - HỆ THỐNG TỐI ƯU
   ============================================================ */

.fd-container { 
    max-width: var(--container-xl); 
    margin: 0 auto; 
    padding: 0 var(--item-padding); 
}

/* --- HERO SECTION --- */
.fd-hero { 
    padding: var(--space-md) 0; 
    background: var(--color-background); 
}

.fd-hero .fd-container { 
    display: grid; 
    grid-template-columns: 1.1fr 0.9fr; 
    gap: var(--grid-gap-xl); /* 48px desktop */
    align-items: start; 
}

.fd-hero__media { 
    position: sticky; 
    top: var(--z-dropdown); 
}

.fd-title { 
    font-size: var(--text-xl); /* 28px */
    font-weight: 700; 
    color: var(--fd-navy); 
    margin: 0 0 var(--space-sm); 
    line-height: var(--leading-tight);
}

/* Meta Info */
.fd-meta-vertical { 
    display: flex; 
    flex-direction: column; 
    gap: var(--space-xs); 
    padding: var(--space-sm) 0; 
    border-top: var(--border-thin) solid var(--color-border); 
    border-bottom: var(--border-thin) solid var(--color-border); 
    margin-bottom: var(--space-sm); 
}

.fd-meta-item { 
    display: flex; 
    gap: var(--space-xs);
    font-size: var(--text-xs); /* 15px-ish */
}

.m-label { 
    color: var(--color-text-secondary); 
    width: 140px; 
}

.st-in { color: #10b981; font-weight: 700; }

/* Buttons */
.fd-action-group { 
    display: flex; 
    flex-direction: column; 
    gap: var(--space-xs); 
}

.fd-action-row { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: var(--space-xs); 
}

.fd-btn { 
    height: var(--space-2xl); /* 48px */
    border-radius: var(--radius-sm); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 600; 
    color: var(--color-background); 
    transition: var(--transition-normal); 
    font-size: var(--text-xs); 
    text-decoration: none; 
    text-transform: uppercase; 
}

.fd-btn-zalo { background: linear-gradient(135deg, #2f6edb, #3f8efc); }
.fd-btn-call { background: linear-gradient(135deg, #1e63c3, #2c7be5); }
.fd-btn-full { 
    background: var(--fd-navy); 
    height: 52px; 
    font-size: var(--text-sm);
    box-shadow: var(--shadow-sm);
}

.fd-btn:hover { 
    filter: brightness(1.1); 
    transform: translateY(-2px); 
    box-shadow: var(--shadow-md); 
    color: var(--color-background); 
}

/* --- DETAIL SECTION & TABS --- */
.fd-detail { 
    padding: var(--space-md) 0; 
     
}

.fd-detail-grid { 
    display: grid; 
    grid-template-columns: 75% 25%; 
    gap: var(--grid-gap-md); /* 24px desktop */
    align-items: start; 
}

.fd-detail-left { 
    background: var(--color-background); 
    padding: var(--space-md); /* 40px desktop */
    border-radius: var(--radius-md); 
    box-shadow: var(--shadow-sm); 
}

/* Tab Navigation */
.fd-tabs-nav { 
    display: flex; 
    gap: var(--space-xl); 
    border-bottom: var(--border-thin) solid var(--color-border); 
    margin-bottom: var(--space-lg); 
}

.fd-tab-btn { 
    background: none; 
    border: none; 
    font-size: var(--text-sm); 
    font-weight: 700; 
    padding: var(--space-sm) 0; 
    cursor: pointer; 
    color: var(--color-text-light); 
    position: relative; 
    transition: var(--transition-fast); 
}

.fd-tab-btn.active { color: var(--fd-navy); }
.fd-tab-btn.active::after { 
    content: ""; 
    position: absolute; 
    bottom: -1px; 
    left: 0; 
    width: 100%; 
    height: var(--border-normal); 
    background: var(--fd-navy); 
}

.fd-tab-panel { 
    display: none; 
    line-height: var(--leading-relaxed); 
    font-size: var(--text-sm); 
}

.fd-tab-panel.active { 
    display: block; 
    animation: fdFade var(--transition-slow); 
}

/* Sidebar */
.fd-detail-right { 
    position: sticky; 
    top: 100px; 
}

.fd-detail-right .widget {
    background: var(--color-background);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}

/* --- RESPONSIVE (MOBILE) --- */
@media (max-width: 992px) {
    .fd-hero .fd-container, 
    .fd-detail-grid { 
        grid-template-columns: 1fr; 
        gap: var(--space-lg); /* 32px mobile */
    }

    .fd-hero { 
        padding: var(--space-md) 0; /* Giảm padding section */
    }

    .fd-hero .fd-container {
        gap: var(--space-md); /* 24px */
    }

    .fd-hero__media, 
    .fd-detail-right { 
        position: static; 
    }

    .fd-detail-left {
        padding: var(--space-md); /* Giảm từ 40px xuống 24px */
    }

    .fd-tabs-nav {
        gap: var(--space-md);
        overflow-x: auto; /* Cho phép vuốt ngang tab nếu quá dài */
    }

    .fd-meta-vertical {
        gap: var(--space-xs); /* 8px mobile */
    }

    .fd-action-row {
        gap: var(--space-xs); /* 8px */
    }
}
.fd-category{
	margin-top: var(--space-xs);
}
@media (max-width: 768px) {
    /* Ép khoảng cách về mức cực nhỏ 8-16px cho điện thoại nhỏ */
    .fd-hero .fd-container, 
    .fd-detail-left {
        padding: var(--space-sm); /* 16px */
    }
    
    .fd-action-row {
        grid-template-columns: 1fr; /* Nút xếp chồng dọc trên mobile nhỏ */
    }
    
    .fd-title {
        font-size: var(--text-lg); /* Giảm font tiêu đề */
    }
}

@keyframes fdFade { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}


.products.row.row-small.large-columns-4.medium-columns-3.small-columns-2.equalize-box{
   display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap);
}
@media(max-width: 768px){
	.products.row.row-small.large-columns-4.medium-columns-3.small-columns-2.equalize-box{
		grid-template-columns: repeat(2, 1fr);
	}
}
.p-card.col,
.p-card.col.product{
	padding: 0;
}
.p-img-category{
	height: 150px !important;
}



/** page giới thiệu */
/* ============================================================
   ABOUT PAGE CUSTOM CSS
   ============================================================ */

.fdi-about-wrapper {
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

.fdi-section {
    padding: var(--space-xl) 0; /* 120px Desktop */
}

/* Typography Hierarchy */
.fdi-h1 {
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--fd-navy);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-md);
}

.fdi-h2 {
    font-size: var(--text-3xl);
    color: var(--color-brand-800);
    margin-bottom: var(--space-md);
}

.fdi-h3 {
    font-size: var(--text-lg);
    color: var(--color-brand-900);
    margin-bottom: var(--space-xs);
}

.fdi-lead {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

/* Grid & Layout */

.fdi-grid-2 { 
	
	padding: 0 var(--space-md);
	display: grid; grid-template-columns: 1fr 1fr;
	gap: var(--grid-gap-xl);
	align-items: center; 
}
.fdi-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap-md); }

@media (max-width: 992px) {
    .fdi-section { padding: var(--space-3xl) 0; }
    .fdi-grid-2, .fdi-grid-3 { grid-template-columns: 1fr; gap: var(--space-lg); }
    .fdi-hero-grid { grid-template-columns: 1fr; }
}

/* Components */
.fdi-badge {
    background: var(--color-primary-50);
    color: var(--color-brand-700);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    display: inline-block;
}

.fdi-btn {
    padding: var(--space-sm) var(--space-xl);
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-transform: uppercase;
    transition: var(--transition-normal);
    display: inline-block;
    cursor: pointer;
}

.fdi-btn-primary {
    background: var(--color-primary-500);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.fdi-btn-outline {
    border: var(--border-normal) solid var(--color-primary-500);
    color: var(--color-primary-500);
}

.fdi-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Card System */
.fdi-service-card {
    background: #fff;
    border-radius: var(--radius-md);
    border: var(--border-thin) solid var(--color-border);
    overflow: hidden;
    transition: var(--transition-normal);
}

.fdi-service-card:hover {
    border-color: var(--color-primary-300);
    box-shadow: var(--shadow-md);
}

.fdi-card-header {
    background: var(--color-primary-50);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-brand-700);
}

.fdi-card-body {
    padding: var(--space-md);
}

.fdi-card-highlight {
    background: var(--fd-navy);
    color: #fff;
}

.fdi-card-highlight .fdi-h4 { color: var(--color-primary-300); }

/* Helpers */

.fdi-bg-navy { background: var(--fd-navy); color: #fff; padding: var(--space-4xl) 0; }
.fdi-text-center { text-align: center; }

.fdi-icon-circle {
    width: 64px; height: 64px;
    background: var(--color-primary-500);
    border-radius: var(--radius-pill);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; margin-bottom: var(--space-sm);
}

.fdi-hotline { font-size: var(--text-xl); font-weight: 800; color: var(--color-primary-400); margin: var(--space-sm) 0; }

.fdi-hero{
	padding-top: var(--space-xs);
}

.menu-item a span{
	color: #fff;
}

.button.icon.circle, .button.icon.round{
	color: white;
}
.title-home .section-title-main{
	color: var(--color-brand-900) !important;
	font-size: 24px !important;
}

/* ======================================================
   RANK MATH BREADCRUMB - FDI CARE SYSTEM
   ====================================================== */

.rank-math-breadcrumb {
    overflow: visible !important;
    background: var(--color-background) !important; /* Sử dụng trắng hệ thống */
    border: none !important;
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
    padding: 0 !important;
}

/* Breadcrumb wrapper */
.rank-math-breadcrumb p {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    font-size: var(--text-xs); /* 14px theo hệ thống của bạn */
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text-light); /* Màu xám nhạt #94A3B8 */
}

/* ======================================
   LINK & HOVER STATE
   ====================================== */

.rank-math-breadcrumb a {
    color: var(--color-text-secondary); /* Màu #475569 để dễ đọc hơn */
    text-decoration: none;
    position: relative;
    transition: var(--transition-normal);
}

/* Đường gạch chân khi hover - Dùng màu Brand hoặc Primary */
.rank-math-breadcrumb a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--color-primary-500); /* Dùng màu xanh Cyan đặc trưng */
    transition: width var(--transition-fast);
}

.rank-math-breadcrumb a:hover {
    color: var(--color-primary-600); /* Đậm hơn một chút khi hover */
}

.rank-math-breadcrumb a:hover::after {
    width: 100%;
}

/* Phần tử cuối cùng (Trang hiện tại) */
.rank-math-breadcrumb .last {
    color: var(--fd-navy); /* Màu Navy đậm để nhấn mạnh vị trí hiện tại */
    font-weight: 600;
}

/* Tùy chỉnh dấu phân cách (nếu Rank Math dùng ký tự phân cách) */
.rank-math-breadcrumb .separator {
    color: var(--color-border);
    margin: 0 4px;
}



/** sửa slider bar */
/* ================================
   SIDEBAR CLEAN / LUXURY
================================ */
.widget_product_categories {
  background: var(--color-background);
  border-radius: var(--radius-2xl);
  padding: var(--space-md);
  border: var(--border-thin) solid var(--color-border);
}



/* LINK */
.widget_product_categories li a {
  display: block;
  padding: 10px 12px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

/* HOVER */
.widget_product_categories li a:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

/* ACTIVE MAIN */
.widget_product_categories li.current-cat > a {
  color: var(--color-primary-700);
  font-weight: 600;
  background: transparent;
}

/* ACTIVE LEFT LINE */
.widget_product_categories li.current-cat::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-500);
}

/* ================================
   SUB MENU (CHILD CATEGORY)
================================ */
.widget_product_categories ul.children {
  margin-top: 6px;
  padding-left: 14px;
  border-left: 1px dashed var(--color-border);
}

/* CHILD ITEM */
.widget_product_categories ul.children li a {
  font-size: var(--text-xs);
  padding: 8px 10px;
  color: var(--color-text-secondary);
}

/* CHILD HOVER */
.widget_product_categories ul.children li a:hover {
  color: var(--color-primary-600);
  background: transparent;
}

/* CHILD ACTIVE */
.widget_product_categories ul.children li.current-cat > a {
  color: var(--color-primary-600);
  font-weight: 500;
}

/* ================================
   PRICE FILTER - CLEAN STYLE
================================ */
.widget_price_filter {
  background: var(--color-background);
  border-radius: var(--radius-2xl);
  padding: var(--space-md);
  border: var(--border-thin) solid var(--color-border);
}
.widget_price_filter .price_slider_amount .button{
	float: none;
}
/** ===============================
SIDEBAR CARD
=================================*/
#shop-sidebar .widget{
    background:var(--color-background);
    padding:var(--space-md);
    border-radius:var(--radius-xl);
    border:1px solid var(--color-border);
    box-shadow:var(--shadow-xs);
    margin-bottom:var(--space-md);
    transition:var(--transition-normal);
}

#shop-sidebar .widget:hover{
    box-shadow:var(--shadow-sm);
}


/** ===============================
TITLE
=================================*/
#shop-sidebar .widget-title{
    font-size:var(--text-base);
    font-weight:600;
    color:var(--color-text-primary);
    margin-bottom:var(--space-xs);
}

/* accent line thay vì secondary */
#shop-sidebar .is-divider.small{
    width:40px;
    height:3px;
    background:var(--color-primary-500);
    margin:var(--space-xs) 0 var(--space-sm);
    border-radius:var(--radius-pill);
}


/** ===============================
PRICE SLIDER
=================================*/
.price_slider_wrapper{
    margin-top:var(--space-xs);
}

/* track */
.price_slider.ui-slider{
    height:4px;
    background:var(--color-border);
    border-radius:var(--radius-pill);
    border:none;
}

/* range */
.price_slider .ui-slider-range{
    background:var(--color-primary-500) !important;
    border-radius:var(--radius-pill);
}

/* handle */
.price_slider .ui-slider-handle{
    width:14px;
    height:14px;
    background:#fff !important;
    border:2px solid var(--color-primary-500);
    border-radius:50%;
    top:-5px;
    cursor:pointer;
    box-shadow:var(--shadow-xs);
    transition:var(--transition-fast);
}

.price_slider .ui-slider-handle:hover{
    transform:scale(1.15);
    border-color:var(--color-brand-600);
}


/** ===============================
PRICE TEXT
=================================*/
.price_label{
    margin-top:var(--space-sm);
    font-size:var(--text-sm);
    color:var(--color-text-secondary);
    display:flex;
    justify-content:space-between;
}

.price_label .from,
.price_label .to{
    font-weight:600;
    color:var(--color-text-primary);
}


/** ===============================
BUTTON
=================================*/
.price_slider_amount .button{
    width:100%;
    margin-top:var(--space-sm);
    padding:10px;
    background:var(--color-primary-500) !important;
    color:#fff;
    font-weight:600;
    border-radius:var(--radius-pill);
    border:none;
    transition:var(--transition-normal);
}

.price_slider_amount .button:hover{
    background:var(--color-brand-600);
    transform:translateY(-1px);
    box-shadow:var(--shadow-sm);
}


/** ===============================
LAYER FILTER LIST
=================================*/
.woocommerce-widget-layered-nav-list{
    list-style:none;
    padding:0;
    margin:0;
}

.woocommerce-widget-layered-nav-list__item{
    padding:var(--space-xs) 0;
    font-size:var(--text-sm);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.woocommerce-widget-layered-nav-list__item a{
    color:var(--color-text-primary);
    font-weight:500;
    transition:var(--transition-fast);
}

.woocommerce-widget-layered-nav-list__item a:hover{
    color:var(--color-primary-600);
    padding-left:4px;
}

/* badge */
.woocommerce-widget-layered-nav-list__item .count{
    background:var(--color-primary-50);
    color:var(--color-primary-700);
    padding:2px 8px;
    border-radius:var(--radius-pill);
    font-size:var(--text-xs);
    font-weight:600;
}



/** ===============================
DROPDOWN MENU - FDICARE SYSTEM
================================= */
/** ===============================
MEGA MENU - ALIGN FIX (FDICARE)
================================= */

/* Container dropdown */
.header-nav .menu-item-has-children > .nav-dropdown{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* ép 3 cột đều */
    gap: var(--space-xs);
    padding: var(--space-xl);
    background: var(--color-background);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    min-width: 780px;
    align-items: start; /* FIX lệch dọc */
}

/* Column chuẩn */
.header-nav .nav-dropdown-col{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Title */
.header-nav .nav-dropdown-col > a{
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-brand-700);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-border); /* FIX line đều */
}

/* Remove line cũ */
.header-nav .nav-dropdown-col > a::after{
    display: none;
}

/* Sub menu */
.header-nav .nav-column{
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

/* Item */
.header-nav .nav-column li a{
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    padding: 4px 0;
    line-height: var(--leading-normal);
    transition: var(--transition-fast);
}

/* Hover */
.header-nav .nav-column li a:hover{
    color: var(--color-brand-700);
    transform: translateX(3px);
}

/* ===============================
FIX ITEM KHÔNG CÓ CHILDREN
================================= */

/* Cho item lẻ thành 1 column chuẩn */
.header-nav .nav-dropdown > li:not(.nav-dropdown-col){
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Style giống column luôn */
.header-nav .nav-dropdown > li:not(.nav-dropdown-col) > a{
    font-weight: 600;
    color: var(--color-brand-700);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-border);
}

/* ===============================
CÂN CHỈNH VISUAL
================================= */

/* Fix khoảng cách đều */
.header-nav .nav-dropdown li{
    list-style: none;
}

/* Fix chiều cao các cột */
.header-nav .nav-dropdown{
    align-items: stretch;
}

/* Hover nhẹ cho từng cột */
.header-nav .nav-dropdown-col,
.header-nav .nav-dropdown > li{
    padding: var(--space-sm);
    border-radius: var(--radius-lg);
    transition: var(--transition-fast);
}

.header-nav .nav-dropdown-col:hover,
.header-nav .nav-dropdown > li:hover{
    background: var(--color-surface);
}

/* Arrow */
.header-nav .nav-dropdown::before{
    content: "";
    position: absolute;
    top: -6px;
    left: 60px;
    width: 14px;
    height: 14px;
    background: var(--color-background);
    transform: rotate(45deg);
    border-left: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
}

.menu-item.menu-item-type-taxonomy.menu-item-object-product_cat.menu-item-has-children.nav-dropdown-col a{
	font-size: 12px;
}

.nav-dropdown-has-arrow.nav-dropdown-has-border li.has-dropdown:before{
	display: none;
}
.nav-dropdown-has-arrow li.has-dropdown:after{
	display: none;
}


/** nav menu */
/** ===============================
MOBILE NAV - FDICARE SYSTEM
================================= */

.st-mobile-nav {
    width: 100%;
    background: var(--color-background);
    font-family: inherit;
}

/* Reset list */
.st-menu-list,
.st-sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ===============================
PARENT ROW
================================= */

.st-parent-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
}

/* Link cha */
.st-parent-link {
    flex-grow: 1;
    display: block;
    padding: var(--space-xs);
    color: var(--color-text-primary);

    font-size: var(--text-2xs);
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .6px;

    transition: var(--transition-fast);
}

.st-parent-link:active{
    background: var(--color-primary-50);
}

/* ===============================
TOGGLE BUTTON
================================= */

.st-toggle-btn {
    padding: var(--space-xs);
    background: transparent;
    border: none;
    border-left: 1px solid var(--color-border);
    color: var(--color-text-light);

    display: flex;
    align-items: center;
    justify-content: center;

    transition: var(--transition-fast);
}

/* Khi mở */
.st-menu-item.is-open > .st-parent-row .st-toggle-btn {
    transform: rotate(180deg);
    color: var(--color-brand-700);
}

/* ===============================
SUB MENU
================================= */

.st-sub-menu {
    background: var(--color-surface);
    display: none;
}

.st-menu-item.is-open > .st-sub-menu {
    display: block;
}

/* Item con */
.st-sub-menu li a {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    padding-left: var(--space-lg);

    text-decoration: none;
    color: var(--color-text-secondary);

    font-size: var(--text-xs);
    font-weight: 500;
    line-height: var(--leading-normal);

    border-bottom: 1px solid var(--color-border);
    transition: var(--transition-fast);
}

/* Active mobile */
.st-sub-menu li a:active {
    background: var(--color-primary-50);
    color: var(--color-brand-700);
}

/* ===============================
BADGE (HOT / NEW)
================================= */

.st-badge {
    background: var(--color-brand-600);
    color: #fff;

    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);

    margin-left: var(--space-xs);
    font-weight: 600;
    text-transform: uppercase;

    vertical-align: middle;
}

a{
	color: var(--fd-navy);
	font-weight: 600;
}