/*
Theme Name: Nha Thuoc Truc Tuyen Child
Theme URI: https://nhathuoctructuyen.com.vn
Description: Child theme cua Flatsome, tuy chinh rieng cho nhathuoctructuyen.com.vn (TPCN - My pham - Thiet bi & vat tu y te - Duoc lieu - Tinh dau)
Author: 
Template: flatsome
Version: 1.0.0
Text Domain: nhathuoctructuyen-child
*/

/* =========================================================
   1) BIẾN THIẾT KẾ (DESIGN TOKENS)
   Dùng để đồng bộ màu sắc/khoảng bo góc trên toàn site.
   Đã map theo đúng bảng màu của bản demo trang chủ.
========================================================= */
:root{
  --ntt-forest-deep:#0E4A34;
  --ntt-forest:#146B49;
  --ntt-forest-light:#1F8A61;
  --ntt-mint:#EEF6F0;
  --ntt-mint-2:#E1F0E6;
  --ntt-cream:#FBFAF5;
  --ntt-amber:#EF9D2E;
  --ntt-amber-dark:#D97F0C;
  --ntt-ink:#16241C;
  --ntt-ink-soft:#4B5A51;
  --ntt-line:#DCE6DE;
  --ntt-radius:14px;
}

/* =========================================================
   2) FONT CHỮ
   Be Vietnam Pro (nội dung) + Lexend (nhãn/eyebrow, số liệu)
   Font được enqueue qua functions.php
========================================================= */
body, .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
  font-family:'Be Vietnam Pro', sans-serif !important;
}
.ntt-lexend{ font-family:'Lexend', sans-serif !important; }

/* =========================================================
   3) GHI ĐÈ MÀU CHỦ ĐẠO CỦA FLATSOME
   (Theme Options > Style > Colors cũng nên set trùng các mã này,
   phần override dưới đây đảm bảo đồng bộ dù quên set ở đâu đó)
========================================================= */
a{ color:var(--ntt-forest); }
a:hover{ color:var(--ntt-forest-deep); }

.button.is-outline{
  border-color:var(--ntt-forest-deep) !important;
  color:var(--ntt-forest-deep) !important;
}
.button.is-outline:hover{
  background:var(--ntt-forest-deep) !important;
  color:#fff !important;
}
.button:not(.is-outline):not(.is-link){
  background:var(--ntt-amber) !important;
  color:#3A2400 !important;
  border-radius:999px !important;
  font-weight:600;
}
.button:not(.is-outline):not(.is-link):hover{
  background:var(--ntt-amber-dark) !important;
  color:#fff !important;
}

/* =========================================================
   4) EYEBROW / NHÃN NHỎ TRÊN TIÊU ĐỀ
   Dùng trong UX Builder: chèn 1 khối Text, gán Class = ntt-eyebrow
========================================================= */
.ntt-eyebrow{
  font-family:'Lexend', sans-serif;
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ntt-forest-light);
  display:flex; align-items:center; gap:8px;
  margin-bottom:8px;
}
.ntt-eyebrow::before{
  content:""; width:18px; height:2px; background:var(--ntt-amber); display:inline-block; border-radius:2px;
}
.ntt-eyebrow.on-dark{ color:var(--ntt-amber); }

/* =========================================================
   5) THẺ "GIẢI PHÁP CHĂM SÓC SỨC KHỎE" (icon box)
   Dùng UX Builder: Icon Box element, gán Class = ntt-solution-card
   cho Row/Column bọc ngoài, hoặc trực tiếp cho Icon Box
========================================================= */
.ntt-solution-card{
  background:#fff; border-radius:var(--ntt-radius); padding:24px 20px;
  border:1px solid var(--ntt-line); transition:transform .18s ease, box-shadow .18s ease;
}
.ntt-solution-card:hover{
  transform:translateY(-4px); box-shadow:0 18px 30px -18px rgba(14,74,52,.3); border-color:transparent;
}
.ntt-solution-card .icon-box-icon{
  background:var(--ntt-mint-2) !important; color:var(--ntt-forest-light) !important; border-radius:12px !important;
}

/* =========================================================
   6) THẺ DANH MỤC SẢN PHẨM (ảnh gradient + tiêu đề)
   Dùng cho Row có background gradient, Class = ntt-cat-t1 ... t8
========================================================= */
.ntt-cat-t1{ background:linear-gradient(150deg,#3FA173,#0E4A34) !important; }
.ntt-cat-t2{ background:linear-gradient(150deg,#63B78B,#1F8A61) !important; }
.ntt-cat-t3{ background:linear-gradient(150deg,#EFAF4E,#D97F0C) !important; }
.ntt-cat-t4{ background:linear-gradient(150deg,#7BC49B,#2E7A54) !important; }
.ntt-cat-t5{ background:linear-gradient(150deg,#4F9C8C,#0E4A34) !important; }
.ntt-cat-t6{ background:linear-gradient(150deg,#F0C078,#EF9D2E) !important; }
.ntt-cat-t7{ background:linear-gradient(150deg,#5FAE7F,#146B49) !important; }
.ntt-cat-t8{ background:linear-gradient(150deg,#8FCBA9,#3FA173) !important; }
.ntt-cat-t1, .ntt-cat-t2, .ntt-cat-t3, .ntt-cat-t4,
.ntt-cat-t5, .ntt-cat-t6, .ntt-cat-t7, .ntt-cat-t8{
  border-radius:var(--ntt-radius); color:#fff;
}

/* =========================================================
   7) BANNER "GÓC NGƯỜI CAO TUỔI" (nền xanh đậm + glow cam)
   Dùng cho Row lớn, Class = ntt-elder-banner
========================================================= */
.ntt-elder-banner{
  background:linear-gradient(120deg, var(--ntt-forest-deep), #123F2E 60%, #0A2E20) !important;
  border-radius:26px !important; color:#fff; position:relative; overflow:hidden;
}
.ntt-elder-banner::after{
  content:""; position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(239,157,46,.22), transparent 70%); top:-120px; right:-100px; pointer-events:none;
}
.ntt-elder-banner h1, .ntt-elder-banner h2, .ntt-elder-banner h3, .ntt-elder-banner p{ color:#fff; position:relative; z-index:1; }
.ntt-elder-banner .ntt-eyebrow{ position:relative; z-index:1; }

.ntt-elder-tag{
  display:inline-block; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:999px;
  padding:8px 16px; font-size:13px; font-weight:500; color:#fff; margin:0 8px 8px 0;
}
.ntt-elder-stat{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:22px; color:#fff;
}
.ntt-elder-stat strong{ display:block; font-family:'Lexend',sans-serif; font-size:26px; font-weight:700; color:var(--ntt-amber); margin-bottom:4px; }

/* =========================================================
   8) DẢI "HÀNH TRÌNH CHĂM SÓC" (điểm nhấn khác biệt)
   Chèn 1 khối Custom HTML (UX Builder) và dùng shortcode:
   [ntt_journey]
========================================================= */
.ntt-journey{ padding:20px 0 6px; }
.ntt-journey-track{ display:flex; align-items:center; justify-content:space-between; position:relative; padding:0 6px; flex-wrap:wrap; }
.ntt-journey-track::before{
  content:""; position:absolute; left:34px; right:34px; top:19px; height:2px;
  background:repeating-linear-gradient(90deg, var(--ntt-line) 0 8px, transparent 8px 14px);
}
.ntt-journey-step{ display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; z-index:1; background:var(--ntt-cream); padding:0 10px; text-align:center; }
.ntt-journey-step .dot{
  width:38px; height:38px; border-radius:50%; background:#fff; border:2px solid var(--ntt-forest-light);
  color:var(--ntt-forest-deep); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; font-family:'Lexend',sans-serif;
}
.ntt-journey-step:last-child .dot{ background:var(--ntt-forest-deep); color:#fff; border-color:var(--ntt-forest-deep); }
.ntt-journey-step span{ font-size:12.5px; font-weight:600; color:var(--ntt-ink-soft); max-width:110px; }

/* =========================================================
   9) Ô CẢNH BÁO / MIỄN TRỪ TRÁCH NHIỆM Y KHOA
   Dùng shortcode: [ntt_disclaimer]tuỳ chỉnh nội dung[/ntt_disclaimer]
========================================================= */
.ntt-disclaimer{
  background:var(--ntt-mint); border-left:3px solid var(--ntt-forest-light); border-radius:0 10px 10px 0;
  padding:14px 20px; font-size:13px; color:var(--ntt-ink-soft); margin:18px 0;
}

/* =========================================================
   10) BADGE NHỎ NỔI TRÊN ẢNH (vd: "2.400+ khách hàng tin dùng")
   Dùng Icon Box hoặc Custom HTML, Class = ntt-float-badge
========================================================= */
.ntt-float-badge{
  background:#fff; border-radius:16px; padding:14px 18px; box-shadow:0 16px 34px -14px rgba(14,74,52,.35);
  display:flex; align-items:center; gap:11px; max-width:240px;
}
.ntt-float-badge strong{ display:block; font-size:13.5px; color:var(--ntt-forest-deep); font-weight:700; }
.ntt-float-badge span{ font-size:11.5px; color:var(--ntt-ink-soft); }

/* =========================================================
   11) CHIP BỘ LỌC NHANH (trang Giải pháp CSSK)
========================================================= */
.ntt-chip{
  display:inline-block; background:#fff; border:1px solid var(--ntt-line); border-radius:999px;
  padding:7px 15px; font-size:12.5px; color:var(--ntt-ink-soft); margin:0 8px 8px 0; cursor:pointer;
}
.ntt-chip:hover{ border-color:var(--ntt-forest-light); color:var(--ntt-forest-deep); }

/* =========================================================
   12) NỀN SECTION MÀU MINT (thay cho section-bg mặc định)
========================================================= */
.ntt-bg-mint{ background:var(--ntt-mint) !important; }
.ntt-bg-cream{ background:var(--ntt-cream) !important; }

/* Responsive: thu nhỏ padding banner trên mobile */
@media (max-width: 849px){
  .ntt-elder-banner{ padding:32px !important; }
  .ntt-journey-step span{ display:none; }
}