/* =========================================================
   NỀN TẢNG PHONG CÁCH "TÔ SÁP" — 0000.space style
   Chữ serif trên nền giấy, cụm từ khoá được quẹt sáp 3 màu.

   AN TOÀN: mọi thứ ở đây chỉ áp dưới body.sap-theme. Trang nào chưa
   đại tu thì không có class đó → giữ nguyên giao diện xanh cũ.
   Bật/tắt theo trang trong inc/sap.php.
   ========================================================= */

.sap-theme{
  --paper:#f2ead7;--paper-2:#fbf6ea;
  --ink:#2f2c25;--ink-soft:#57534a;--muted:#8f8b7f;
  --line:rgba(47,44,37,.13);--earth:#9b7653;
  /* 3 màu sáp — mỗi màu một vai trò (xem hướng dẫn trong inc/sap.php) */
  --mint:#8fd0a8;--cam:#f0a875;--duong:#93b8dd;
}

/* ---------- Nền giấy + phông serif ---------- */
.sap-theme{
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 18% 10%, rgba(255,250,235,.5), transparent 42%),
    radial-gradient(circle at 84% 82%, rgba(210,196,168,.30), transparent 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='pn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pn)' opacity='0.06'/%3E%3C/svg%3E");
  background-attachment:fixed;
  color:var(--ink);
  font-family:"Lora",Georgia,"Times New Roman",serif;
}
.sap-theme h1,.sap-theme h2,.sap-theme h3{
  font-family:"Lora",Georgia,serif;color:var(--ink);letter-spacing:-.012em;font-weight:600;
}
/* Nhãn nhỏ, nút, menu vẫn dùng sans cho gọn — chỉ tiêu đề/đoạn văn mới serif */
.sap-theme .kicker,.sap-theme .eyebrow,.sap-theme .btn,.sap-theme nav,
.sap-theme .sap-sans{font-family:Inter,system-ui,-apple-system,sans-serif}

/* ---------- Vệt sơn quẹt ---------- */
/* Dùng: <span class="hl mint">từ khoá</span> — mint | cam | duong */
.sap-theme .hl{position:relative;white-space:nowrap;padding:0 5px}
.sap-theme .hl::before{
  content:"";position:absolute;z-index:-1;left:-7px;right:-7px;top:-1px;bottom:-2px;
  background:var(--c,var(--mint));
  filter:url(#sap-quet);
  -webkit-mask:linear-gradient(88deg, transparent 0%, #000 7%, #000 90%, transparent 100%);
  mask:linear-gradient(88deg, transparent 0%, #000 7%, #000 90%, transparent 100%);
  transform:rotate(-.8deg);
}
.sap-theme .hl.mint::before{--c:var(--mint)}
.sap-theme .hl.cam::before{--c:var(--cam)}
.sap-theme .hl.duong::before{--c:var(--duong)}
/* Tiêu đề cỡ lớn: vệt mảnh hơn để không "nuốt" chữ */
.sap-theme h1 .hl::before{top:2px;bottom:1px;left:-5px;right:-5px}

.sap-theme .doodle{display:inline-block;color:#c98b6e;font-size:.78em;vertical-align:.14em}

/* ---------- Nút theo phong cách mới ---------- */
.sap-theme .btn{border-radius:999px;font-weight:700;border:1.5px solid var(--ink);transition:.2s ease}
.sap-theme .btn-primary{background:var(--ink);color:var(--paper);box-shadow:none}
.sap-theme .btn-primary:hover{background:#43403a;transform:translateY(-2px)}
.sap-theme .btn-secondary{background:transparent;color:var(--ink)}
.sap-theme .btn-secondary:hover{background:var(--paper-2);transform:translateY(-2px)}

/* =========================================================
   ĐẠI TU TRANG CHỦ (bước 3) — override các khối sang phong cách giấy
   ========================================================= */

/* ---------- Header / menu ---------- */
.sap-theme header{background:rgba(242,234,215,.86);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.sap-theme .brand{color:var(--ink)}
.sap-theme nav a{color:var(--ink-soft)}
.sap-theme nav a:hover,.sap-theme nav a[aria-current="page"]{color:var(--ink);font-weight:700}
.sap-theme .brand-mark{background:linear-gradient(135deg,#6f9c82,#8fd0a8)}

/* ---------- Hero căn giữa kiểu trang sách ---------- */
.sap-theme .sap-hero{padding:56px 0 40px;text-align:center;overflow:visible}
.sap-theme .sap-hero::before{display:none}
.sap-theme .sap-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;justify-content:center;color:var(--earth);border:0;background:transparent;padding:0;margin-bottom:14px}
.sap-theme .sap-hero .eyebrow .dot{width:6px;height:6px;background:var(--cam)}
.sap-theme .sap-h1{font-size:clamp(38px,7vw,66px);line-height:1.26;font-weight:600;letter-spacing:-.02em;margin:0 auto 22px;max-width:14ch}
.sap-theme .sap-hero .lead{font-size:clamp(17px,2.3vw,20px);color:var(--ink-soft);max-width:600px;margin:0 auto 30px;line-height:1.75}
.sap-theme .hero-actions{justify-content:center;margin-bottom:44px}
.sap-theme .btn-lg{padding:15px 30px;font-size:15px}

/* Con số nổi bật — hàng ngang, viền giấy */
.sap-theme .hero-stats{grid-template-columns:repeat(3,1fr);max-width:760px;margin:0 auto;gap:16px}
.sap-theme .stat{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;text-align:left}
.sap-theme .stat:hover{background:#fff;border-color:rgba(47,44,37,.24)}
.sap-theme .stat strong{color:var(--ink);font-family:"Lora",serif}
.sap-theme .stat span{color:var(--muted)}

/* Câu trích dẫn — kiểu ghi tay */
.sap-theme .sap-quote{font-style:italic;font-size:clamp(19px,2.6vw,24px);line-height:1.6;max-width:600px;margin:48px auto 0;color:var(--ink);text-align:center}
.sap-theme .sap-quote-by{display:block;font-style:normal;font-family:Inter,sans-serif;font-size:14px;color:var(--muted);margin-top:12px;letter-spacing:.02em}

/* ---------- Section chung ---------- */
.sap-theme section{padding:52px 0}
.sap-theme .kicker{color:var(--earth)}
.sap-theme .section-head h2{font-size:clamp(26px,3.6vw,38px);line-height:1.3}
.sap-theme .section-head p,.sap-theme .wide-text{color:var(--ink-soft)}

/* ---------- Dải thương hiệu ---------- */
.sap-theme .brands-kicker{color:var(--ink)}
.sap-theme .brands-note{color:var(--muted)}
.sap-theme .brand-item{background:var(--paper-2);border:1px solid var(--line);border-radius:16px}
.sap-theme .brand-item:hover{background:#fff;border-color:rgba(47,44,37,.22)}
.sap-theme .brand-name{color:var(--ink)}
.sap-theme .brand-role,.sap-theme .brand-year{color:var(--muted)}
.sap-theme .brands-link{color:var(--earth)}

/* ---------- Timeline ---------- */
.sap-theme .tl-year-num{color:var(--ink);font-family:"Lora",serif}
.sap-theme .tl-event{background:var(--paper-2);border:1px solid var(--line)}
.sap-theme .tl-event:hover{background:#fff;border-color:var(--earth)}
.sap-theme .tl-event-ic{background:var(--mint);color:#1f3a2b}
.sap-theme .tl-event-t{color:var(--ink)}
.sap-theme .tl-act-sum{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.sap-theme .tl-act-sum:hover{background:#43403a;border-color:#43403a}
.sap-theme .tl-act-detail{border-color:var(--line);color:var(--earth)}

/* ---------- Blog ---------- */
.sap-theme .post{background:var(--paper-2);border:1px solid var(--line);border-radius:18px}
.sap-theme .post h3{font-family:"Lora",serif;color:var(--ink)}
.sap-theme .post .date,.sap-theme .post p{color:var(--muted)}
.sap-theme .more{color:var(--earth)}

/* ---------- CTA giấy ---------- */
.sap-theme .cta-band{padding:40px 0 64px}
.sap-theme .sap-cta{display:block;text-align:center;background:var(--paper-2);border:1px solid var(--line);border-radius:26px;padding:44px 40px;box-shadow:none;color:var(--ink)}
.sap-theme .sap-cta h2{color:var(--ink);font-size:clamp(26px,3.6vw,36px);margin:8px 0 12px}
.sap-theme .sap-cta p{color:var(--ink-soft);font-size:17px;max-width:520px;margin:0 auto 24px;line-height:1.7}
.sap-theme .sap-cta-actions{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap}
.sap-theme .sap-cta-mail{font-family:Inter,sans-serif;font-size:14.5px;color:var(--muted)}

/* ---------- Footer ---------- */
.sap-theme footer{background:transparent;border-top:1px solid var(--line);color:var(--ink-soft)}
.sap-theme footer a{color:var(--ink-soft)}
.sap-theme footer a:hover{color:var(--ink)}

/* =========================================================
   ĐẠI TU TOÀN SITE (bước 4) — áp phong cách giấy cho mọi trang
   ========================================================= */

/* ---------- Ô ảnh nhận diện (portrait) trên hero 2 cột ---------- */
.sap-theme .portrait-card{
  background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--shadow,0 24px 60px rgba(47,44,37,.10));
}
.sap-theme .portrait-card::before{border-color:rgba(47,44,37,.12)}
/* Khung ảnh dọc hơn để không cắt mất đầu; đã bỏ nhãn che ảnh cho gọn */
.sap-theme .portrait-placeholder{
  background:linear-gradient(160deg,#e7dcc4,#cdbfa0);color:var(--ink);
  aspect-ratio:4/5;height:auto;min-height:440px;padding:0;border-radius:24px;
}
.sap-theme .quote-chip{background:var(--paper-2);border:1px solid var(--line);color:var(--ink)}
.sap-theme .quote-chip strong{color:var(--ink);font-family:"Lora",serif}

/* ---------- Mọi thẻ sáng: đổi tiêu đề sang serif, giữ nền giấy ---------- */
.sap-theme .cap-card,.sap-theme .course-card,.sap-theme .duan-card,.sap-theme .case-card,
.sap-theme .rev-card,.sap-theme .lab-card,.sap-theme .step,.sap-theme .contact-card.light{
  background:var(--paper-2);border:1px solid var(--line);
}
.sap-theme .cap-card h3,.sap-theme .course-card h3,.sap-theme .duan-card h3,
.sap-theme .step h3,.sap-theme .case-card h3{font-family:"Lora",serif;color:var(--ink)}
.sap-theme .card-num{background:var(--mint);color:#1f3a2b}
.sap-theme .step-ic{background:var(--ink);color:var(--paper)}

/* ---------- Mọi khối "nền xanh chữ kem" → nền giấy chữ mực ---------- */
.sap-theme .cta-box,.sap-theme .kv-tieptuc,.sap-theme .hoc-side-head,
.sap-theme .duan-single-head .duan-status.st-active{
  background:var(--paper-2) !important;color:var(--ink) !important;border:1px solid var(--line);
}
.sap-theme .cta-box h2,.sap-theme .cta-box p,.sap-theme .kv-tieptuc h2,.sap-theme .kv-tieptuc a,
.sap-theme .hoc-side-title,.sap-theme .hoc-side-so{color:var(--ink)}
/* contact-card tối (trong cta-box) → giấy */
.sap-theme .contact-card{background:rgba(255,255,255,.5);border:1px solid var(--line)}
.sap-theme .contact-card label{color:var(--muted)}
.sap-theme .contact-card input,.sap-theme .contact-card textarea,.sap-theme .contact-card select{
  background:#fff;border:1px solid var(--line);color:var(--ink)
}

/* ---------- Cột phòng học (Hướng dẫn) ---------- */
.sap-theme .hoc-side-head{background:var(--ink) !important}
.sap-theme .hoc-side-title,.sap-theme .hoc-side-so{color:var(--paper)}
.sap-theme .hoc-ds-item.dang-xem .hoc-ds-thumb{outline-color:var(--ink)}
.sap-theme .hoc-video{background:var(--ink)}

/* ---------- Khu vực của tôi (thẻ xem tiếp nền xanh) ---------- */
.sap-theme .kv-tieptuc{background:var(--ink) !important}
.sap-theme .kv-tieptuc h2,.sap-theme .kv-tieptuc h2 a,.sap-theme .kv-tieptuc-label{color:var(--paper)}
.sap-theme .kv-thanh span{background:var(--mint)}
.sap-theme .kv-thanh span.kv-thanh-lam{background:var(--cam)}

/* ---------- Tường khoá, đăng nhập ---------- */
.sap-theme .hd-lock-ic{background:var(--mint);color:#1f3a2b}
.sap-theme .nw-login-card .login-submit input[type=submit]{background:var(--ink);border-color:var(--ink)}
.sap-theme .nw-login-card .login-submit input[type=submit]:hover{background:#43403a}

/* ---------- Breadcrumb, chip, filter ---------- */
.sap-theme .breadcrumb{color:var(--muted)}
.sap-theme .chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sap-theme .duan-status.st-active{background:var(--mint);color:#1f3a2b}

/* ---------- Nút liên hệ nổi: về tông trầm cho hợp giấy ---------- */
.sap-theme .contact-dock a{filter:saturate(.72)}

/* ---------- Timeline modal ---------- */
.sap-theme .tl-modal-card{background:var(--paper)}
.sap-theme .tl-detail h3{font-family:"Lora",serif;color:var(--ink)}

/* ---------- Nút còn dùng màu xanh trực tiếp → về tông mực ---------- */
.sap-theme .hd-tim button,
.sap-theme .hd-more-lock,
.sap-theme .tl-act-sum,
.sap-theme .kv-item-go,
.sap-theme .nw-dd.da-lam{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.sap-theme .hd-tim button:hover,.sap-theme .hd-more-lock:hover,.sap-theme .tl-act-sum:hover{background:#43403a;border-color:#43403a;color:var(--paper)}
.sap-theme .nw-dd.da-lam .nw-dd-ic{background:var(--paper);color:var(--ink)}
.sap-theme .hd-tim:focus-within{border-color:var(--earth)}
/* Chấm/gạch dùng green-deep trong nội dung */
.sap-theme .hd-single-chude,.sap-theme .kv-item-title,.sap-theme .hoc-ds-ten{color:var(--ink)}
.sap-theme .hd-toc a.dang-doc{color:var(--cam)}

/* ---------- Vá 2 lỗi phát hiện khi soi (bước 4) ---------- */
/* Khối "Ảnh sắp cập nhật" ở mốc dự án: nền xanh → nền giấy đậm */
.sap-theme .nw-moc-noimg{background:linear-gradient(160deg,#c7b99a,#a89a7c)}
.sap-theme .nw-moc-noimg span{color:rgba(47,44,37,.55)}
/* Mũi tên "→" ở khu vực khách: bỏ nền ô đen, chỉ để màu mực */
.sap-theme .kv-item-go{background:transparent !important;color:var(--earth) !important;border:0 !important;width:auto;height:auto}