/* content.css — CSS cho phần THÂN trang chủ (giữa Hero và Footer).
   CHỈ enqueue ở trang chủ (is_front_page()) — không load ở trang khác.
   Biến màu dùng chung đã khai báo trong header.css (luôn load trước). */

/* ================= Section shell ================= */
section{padding:72px 0;}
.eyebrow{text-align:center;font-size:13px;font-weight:700;letter-spacing:1.5px;color:var(--green-dark);text-transform:uppercase;margin-bottom:10px;}
.section-title{text-align:center;font-size:26px;color:var(--navy);max-width:640px;margin:0 auto;}
.section-title em{color:var(--green-dark);font-style:italic;}
.section-sub{text-align:center;color:var(--ink-soft);margin-top:10px;font-size:15px;}

/* ---- reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1;transform:translateY(0);}
.stagger > *{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.stagger.in > *{opacity:1;transform:translateY(0);}
.stagger.in > *:nth-child(1){transition-delay:.05s;}
.stagger.in > *:nth-child(2){transition-delay:.15s;}
.stagger.in > *:nth-child(3){transition-delay:.25s;}
.stagger.in > *:nth-child(4){transition-delay:.35s;}

/* ---- pain point cards ---- */
.boss-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;}
@media (max-width:860px){.boss-grid{grid-template-columns:1fr;}}
.boss-card{background:#fafaf8;border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center;transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;}
.boss-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -18px rgba(0,35,82,.25);}
.boss-card img{width:44px;height:44px;margin:0 auto 14px;object-fit:contain;}
.boss-card h3{font-size:16px;color:var(--navy);margin-bottom:10px;}
.boss-card p{font-size:13.5px;color:var(--ink-soft);text-align:left;margin-bottom:8px;}
.boss-card p.tip{color:var(--green-dark);font-weight:500;}

/* ---- stats ---- */
.stats-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center;margin-top:40px;}
@media (max-width:860px){.stats-wrap{grid-template-columns:1fr;}}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media (max-width:600px){.stats-grid{grid-template-columns:1fr;}}
.stat-num{font-size:40px;font-weight:800;color:var(--green-dark);}
.stat-label{font-size:13px;font-weight:600;color:var(--navy);margin:4px 0 8px;}
.stat-desc{font-size:13px;color:var(--ink-soft);}

/* ---- logo marquee ---- */
.logo-strip{margin-top:24px;overflow:hidden;position:relative;}
.logo-strip::before,.logo-strip::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;}
.logo-strip::before{left:0;background:linear-gradient(90deg,#fff,transparent);}
.logo-strip::after{right:0;background:linear-gradient(-90deg,#fff,transparent);}
.logo-track{display:flex;gap:52px;align-items:center;width:max-content;animation:marquee 32s linear infinite;}
.logo-track img{height:54px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .25s ease, opacity .25s ease;}
.logo-track img:hover{filter:grayscale(0);opacity:1;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---- 4 cách ---- */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px;}
@media (max-width:860px){.services-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.services-grid{grid-template-columns:1fr;}}
.service-card{border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:relative;transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;}
.service-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -18px rgba(0,35,82,.25);}
.service-card img.icon{width:30px;height:30px;margin-bottom:14px;}
.service-card h3{font-size:15.5px;color:var(--navy);margin-bottom:8px;}
.service-card p{font-size:13px;color:var(--ink-soft);white-space:pre-line;}
.badge-new{position:absolute;top:16px;right:16px;width:34px;}

/* ---- 3 kết quả ---- */
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;}
@media (max-width:860px){.results-grid{grid-template-columns:1fr;}}
.result-card{border-radius:18px;padding:28px 26px;color:#0e2b18;transition:transform .3s cubic-bezier(.16,1,.3,1);border:2px solid transparent;}
.result-card:hover{transform:translateY(-4px);}
.result-card.c1{border-color:#00AF51;background:linear-gradient(165deg,#ffffff 0%,#EAFCE9 50%,#C9F5C9 100%);}
.result-card.c2{border-color:#8A94A6;background:linear-gradient(165deg,#ffffff 0%,#F3F5F7 50%,#E1E5EB 100%);}
.result-card.c3{border-color:#2699B1;background:linear-gradient(165deg,#ffffff 0%,#EAF7FA 50%,#C7ECF2 100%);}
.result-card img{width:130px;height:130px;object-fit:contain;display:block;margin:16px auto -6px;}
.result-tag{font-size:12px;font-weight:600;opacity:.75;margin-bottom:10px;}
.result-headline{font-size:19px;font-weight:800;margin-bottom:12px;}
.result-card p{font-size:13px;white-space:pre-line;opacity:.85;}

/* ---- why / why-not ---- */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px;}
@media (max-width:860px){.why-grid{grid-template-columns:1fr;}}
.why-card{border-radius:18px;padding:34px;position:relative;overflow:hidden;}
.why-card.yes{background:linear-gradient(160deg,#7BE39B 0%,#1FA857 55%,#0A7A38 100%);color:#fff;}
.why-card.no{background:linear-gradient(160deg,#B9C2CE 0%,#5C6B80 55%,#1F2937 100%);color:#fff;}
.why-card h3{font-size:18px;margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.why-card h3 img{width:20px;height:20px;}
.why-card.yes h3{color:#fff;}
.why-card p{font-size:13.5px;white-space:pre-line;}
.why-card.yes p{color:rgba(255,255,255,.92);}
.why-card.no p{color:rgba(255,255,255,.82);}
.why-card-logo{width:150px;height:auto;margin-top:26px;opacity:.95;}

/* ---- founder timeline ---- */
.founder-wrap{display:flex;gap:40px;align-items:flex-start;margin-top:20px;flex-wrap:wrap;}
.founder-avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.timeline{flex:1;min-width:260px;}
.tl-row{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);}
.tl-row:last-child{border-bottom:none;}
.tl-year{font-weight:800;font-size:17px;color:var(--green-dark);}
.tl-text{font-size:13.5px;color:var(--ink-soft);white-space:pre-line;}

/* ---- testimonials ---- */
.test-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px;align-items:center;}
@media (max-width:860px){.test-wrap{grid-template-columns:1fr;}}
.test-card{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line);position:relative;}
.test-card:last-child{border-bottom:none;}
.test-fb{
  position:absolute;top:16px;right:0;width:26px;height:26px;border-radius:50%;
  background:#1877F2;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.test-fb svg{width:14px;height:14px;fill:#fff;}
.test-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.test-quote{font-size:13.5px;font-style:italic;color:var(--ink);}
.test-name{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.friend-panel{
  background:linear-gradient(135deg, #F3FCEF 0%, #E1F7E4 55%, #CDF0D6 100%);
  color:var(--navy);border-radius:var(--radius);padding:32px;position:relative;overflow:hidden;
  background-image:radial-gradient(rgba(0,133,48,.07) 1.5px, transparent 1.5px),
                    linear-gradient(135deg, #F3FCEF 0%, #E1F7E4 55%, #CDF0D6 100%);
  background-size:16px 16px, cover;
  border:1px solid rgba(0,133,48,.12);
}
.friend-panel h3{font-size:20px;margin:6px 0 12px;color:var(--navy);}
.friend-panel p{font-size:13.5px;color:var(--ink-soft);margin-bottom:18px;}
.friend-panel .btn{background:var(--green);}

/* ---- blog ---- */
.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;}
@media (max-width:860px){.blog-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1);}
.blog-card:hover{transform:translateY(-4px);}
.blog-thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--navy),#0a3a72);}
.blog-body{padding:14px;}
.blog-date{font-size:11px;color:var(--ink-soft);margin-bottom:6px;}
.blog-title{font-size:13.5px;font-weight:600;color:var(--navy);}

/* ---- contact CTA ---- */
.contact-wrap{display:grid;grid-template-columns:1fr .6fr;gap:40px;align-items:center;}
@media (max-width:860px){.contact-wrap{grid-template-columns:1fr;}}
.contact-wrap h2{font-size:26px;color:var(--navy);}
.contact-wrap .sub{color:var(--ink-soft);font-size:14px;margin:10px 0 26px;}
.contact-row{display:flex;gap:48px;flex-wrap:wrap;}
.contact-label{font-size:12px;color:var(--ink-soft);margin-bottom:4px;}
.contact-value{font-weight:700;color:var(--navy);font-size:15px;}
.contact-wrap img{max-width:200px;margin-left:auto;margin-right:auto;}
@media (max-width:860px){ .contact-wrap img{margin:0 auto;} }

/* ================================================================
   GHI ĐÈ CỨNG — Hub theme vẫn làm mờ/sai màu 1 số heading & đoạn văn
   dù đã tăng priority load. Khôi phục lại đúng màu/độ rõ ý định ban đầu.
   Chỉ ghi đè color/opacity, không đụng layout nên an toàn.
   ================================================================ */
h1,h2,h3{opacity:1 !important;font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif !important;}
p{opacity:1 !important;color:var(--ink) !important;}

.eyebrow{text-align:center !important;color:var(--green-dark) !important;}

.section-title{color:var(--navy) !important;}
.section-title em{color:var(--green-dark) !important;}
.section-sub{color:var(--ink-soft) !important;}

.boss-card h3{color:var(--navy) !important;}
.boss-card p{color:var(--ink-soft) !important;}
.boss-card p.tip{color:var(--green-dark) !important;}

.service-card h3{color:var(--navy) !important;}
.service-card p{color:var(--ink-soft) !important;}

.result-card p{color:inherit !important;}
.result-headline{color:inherit !important;}

.why-card.yes h3{color:#fff !important;}
.why-card.no h3{color:#fff !important;}
.why-card.yes p{color:rgba(255,255,255,.92) !important;}
.why-card.no p{color:rgba(255,255,255,.82) !important;}

.tl-year{color:var(--green-dark) !important;}
.tl-text{color:var(--ink-soft) !important;}

.test-quote{color:var(--ink) !important;}
.test-name{color:var(--ink-soft) !important;}

.contact-wrap h2{color:var(--navy) !important;}
.contact-wrap .sub{color:var(--ink-soft) !important;}
.contact-value{color:var(--navy) !important;}
.contact-label{color:var(--ink-soft) !important;}

.blog-title{color:var(--navy) !important;}
.blog-date{color:var(--ink-soft) !important;}

.stat-label{color:var(--navy) !important;}
.stat-desc{color:var(--ink-soft) !important;}
.stat-num{color:var(--green-dark) !important;}

/* ================================================================
   Section màu xen kẽ — đổi từ xám trung tính (#fafaf8, cắt cứng)
   sang tông xanh rất nhạt (khớp thương hiệu) + rìa trên/dưới tan mềm
   vào section trắng liền kề, thay vì cắt đột ngột.
   ================================================================ */
.section-alt{
  position:relative;
  background:#F6FAF7; /* xanh lá cực nhạt, cùng họ màu --forest thay vì xám trung tính */
}
.section-alt::before,.section-alt::after{
  content:"";position:absolute;left:0;right:0;height:70px;pointer-events:none;
}
.section-alt::before{top:0;background:linear-gradient(to bottom, #fff, transparent);}
.section-alt::after{bottom:0;background:linear-gradient(to bottom, transparent, #fff);}
.section-alt > .wrap{position:relative;z-index:1;}
@media (max-width:600px){ .section-alt::before,.section-alt::after{height:40px;} }

.friend-panel h3{color:var(--navy) !important;}
.friend-panel p{color:var(--ink-soft) !important;}