/*
Theme Name: Mini AI 9B
Theme URI: https://miniai.vn
Author: Mini AI
Author URI: https://miniai.vn
Description: Theme for Mini AI - Mô Hình 9B
Version: 1.0
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.0
Text Domain: miniai-9b
*/

:root {
  --navy: #1B3A5C;
  --orange: #F97316;
  --blue: #2563EB;
  --teal: #0D9488;
  --green: #16A34A;
  --red: #DC2626;
  --purple: #7C3AED;
  --pink: #EC4899;
  --amber: #D97706;
  --bg: #0F172A;
  --card: #1E293B;
  --card2: #334155;
  --text: #F1F5F9;
  --muted: #94A3B8;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Be Vietnam Pro',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }

.hero {
  min-height:40vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:60px 20px 40px;
  background: radial-gradient(ellipse at 50% 0%, rgba(249,115,22,0.15) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 80%, rgba(37,99,235,0.1) 0%, transparent 50%);
}
.hero h1 { font-family:'Playfair Display',serif; font-size:clamp(2rem,5vw,3.5rem); font-weight:900; letter-spacing:-1px;
  background:linear-gradient(135deg,#F97316,#FB923C,#FBBF24); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero .sub { font-size:1.1rem; color:var(--muted); margin-top:12px; max-width:700px; line-height:1.7; }
.hero .badge { display:inline-block; margin-top:16px; padding:6px 20px; border-radius:20px;
  background:rgba(249,115,22,0.15); border:1px solid rgba(249,115,22,0.3); color:var(--orange); font-weight:600; font-size:0.85rem; }

/* ===== FUNNEL ===== */
.funnel-section { padding:40px 20px 60px; max-width:900px; margin:0 auto; }
.funnel-title { text-align:center; font-size:1.4rem; font-weight:700; margin-bottom:40px; color:var(--orange); }

.funnel { display:flex; flex-direction:column; align-items:center; gap:0; position:relative; }
.funnel::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,var(--orange),var(--blue),var(--green)); transform:translateX(-50%); z-index:0; opacity:0.3; }

.funnel-step {
  position:relative; z-index:1; width:var(--w); text-align:center; padding:14px 20px;
  border-radius:12px; transition:all 0.3s ease; cursor:pointer;
  animation: fadeSlide 0.6s ease forwards; opacity:0;
}
.funnel-step:hover { transform:scale(1.04); box-shadow:0 0 30px rgba(249,115,22,0.2); }

.step-num { font-family:'Playfair Display',serif; font-size:1.8rem; font-weight:900; opacity:0.3; line-height:1; }
.step-name { font-size:1.1rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin:2px 0; }
.step-vn { font-size:0.8rem; font-weight:500; opacity:0.8; }
.step-tag { display:inline-block; margin-top:6px; padding:2px 12px; border-radius:10px; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; }

.phase-hunt { border-left:3px solid var(--orange); }
.phase-nurture { border-left:3px solid var(--blue); }
.phase-grow { border-left:3px solid var(--green); }

.tag-hunt { background:rgba(249,115,22,0.2); color:var(--orange); }
.tag-nurture { background:rgba(37,99,235,0.2); color:#60A5FA; }
.tag-grow { background:rgba(22,163,74,0.2); color:#4ADE80; }

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

.phase-label { text-align:center; margin:20px 0 8px; padding:8px 24px; border-radius:20px; font-weight:700; font-size:0.85rem; letter-spacing:2px; text-transform:uppercase; z-index:2; position:relative; }
.pl-hunt { background:rgba(249,115,22,0.15); color:var(--orange); border:1px solid rgba(249,115,22,0.3); }
.pl-nurture { background:rgba(37,99,235,0.15); color:#60A5FA; border:1px solid rgba(37,99,235,0.3); }
.pl-grow { background:rgba(22,163,74,0.15); color:#4ADE80; border:1px solid rgba(22,163,74,0.3); }

/* ===== DETAIL CARDS ===== */
.details { max-width:1000px; margin:0 auto; padding:20px; }
.detail-card {
  background:var(--card); border-radius:16px; margin-bottom:24px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.06); transition:all 0.3s;
}
.detail-card:hover { border-color:rgba(249,115,22,0.3); }
.card-header { padding:24px 28px 20px; display:flex; align-items:center; gap:16px; cursor:pointer; }
.card-header .num { font-family:'Playfair Display',serif; font-size:2.5rem; font-weight:900; line-height:1; min-width:50px; }
.card-header .info h3 { font-size:1.15rem; font-weight:700; }
.card-header .info p { font-size:0.85rem; color:var(--muted); margin-top:4px; }
.card-body { padding:0 28px 28px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:700px) { .card-body{grid-template-columns:1fr;} }

.cb-section { background:var(--card2); border-radius:10px; padding:16px; }
.cb-section h4 { font-size:0.8rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); margin-bottom:10px; font-weight:600; }
.cb-section ul { list-style:none; }
.cb-section li { font-size:0.88rem; line-height:1.7; padding-left:18px; position:relative; }
.cb-section li::before { content:'›'; position:absolute; left:0; color:var(--orange); font-weight:700; }
.cb-section.example li::before { content:'💡'; font-size:0.7rem; }
.cb-section.tool { border-left:3px solid var(--blue); }
.cb-section.tool li::before { content:'⚙'; color:var(--blue); font-size:0.7rem; }
.cb-section.kpi { border-left:3px solid var(--green); }
.cb-section.kpi li::before { content:'📊'; font-size:0.7rem; }

.c-hunt .num { color:var(--orange); }
.c-nurture .num { color:#60A5FA; }
.c-grow .num { color:#4ADE80; }

.connector { text-align:center; padding:6px; }
.connector svg { width:20px; height:20px; }