/* ============================================================ STYLE2 — Design System: nâu đậm / vàng gold / beige Dùng chung cho các trang landing page workshop Team Lead X2. Font: Fraunces (headline) + Be Vietnam Pro (body) — nhớ khai báo Google Fonts link này trong của trang trước khi dùng file này: ============================================================ */ :root{ --brown-950:#170e08; --brown-900:#241408; --brown-800:#33200f; --brown-700:#472c17; --brown-600:#5c3b20; --brown-500:#7a4f2a; --gold-700:#8a6420; --gold-600:#a9812f; --gold-500:#c69a3f; --gold-400:#dcb968; --gold-300:#e9cd8c; --gold-200:#f2ddaa; --beige-050:#fdf9f1; --beige-100:#f8f0e0; --beige-200:#f0e3c9; --beige-300:#e4d1ac; --ink:#241509; --muted:#8a7a68; --text-body:#4d3d2a; --text-body-dark:#e4d7c4; --font-display:'Fraunces', serif; --font-body:'Be Vietnam Pro', sans-serif; --radius-sm:10px; --radius-md:16px; --radius-lg:22px; } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ font-family:var(--font-body); background:var(--beige-050); color:var(--ink); -webkit-font-smoothing:antialiased; } img,svg{ display:block; max-width:100%; } a{ text-decoration:none; } ul{ list-style:none; } strong{ font-weight:700; } section{ position:relative; padding:100px 8vw; overflow:hidden; } section.on-dark{ background:linear-gradient(160deg, var(--brown-900) 0%, var(--brown-950) 55%, #0f0904 100%); color:var(--beige-100); } /* ---------- shared: eyebrow ---------- */ .eyebrow{ display:inline-flex; align-items:center; gap:14px; font-family:var(--font-body); font-weight:600; letter-spacing:.22em; font-size:12.5px; text-transform:uppercase; color:var(--gold-700); } .on-dark .eyebrow{ color:var(--gold-300); } .eyebrow .diamond{ width:6px; height:6px; background:var(--gold-400); transform:rotate(45deg); flex:none; } .eyebrow .rule{ height:1px; width:34px; background:linear-gradient(90deg, transparent, var(--gold-400)); flex:none; } .eyebrow .rule.right{ background:linear-gradient(90deg, var(--gold-400), transparent); } /* ---------- shared: section head ---------- */ .section-head{ position:relative; z-index:2; max-width:820px; margin:0 auto 60px; text-align:center; } .section-head .eyebrow{ justify-content:center; width:100%; margin-bottom:22px; } .section-title{ font-family:var(--font-display); font-optical-sizing:auto; font-weight:700; font-size:clamp(28px, 3.4vw, 44px); line-height:1.28; color:var(--brown-900); margin-bottom:18px; } .on-dark .section-title{ color:var(--beige-050); } .section-title .accent{ background:linear-gradient(100deg, var(--gold-700), var(--gold-500)); -webkit-background-clip:text; background-clip:text; color:transparent; } .on-dark .section-title .accent{ background:linear-gradient(100deg, var(--gold-200), var(--gold-500) 60%, var(--gold-300)); -webkit-background-clip:text; background-clip:text; color:transparent; } .section-sub{ font-size:16.5px; line-height:1.7; color:var(--text-body); } .on-dark .section-sub{ color:var(--text-body-dark); } /* ---------- shared: button ---------- */ .btn-gold{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:19px 44px; font-family:var(--font-body); font-weight:700; font-size:15.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--brown-950); background:linear-gradient(135deg, var(--gold-300), var(--gold-500) 55%, var(--gold-600)); border-radius:var(--radius-sm); box-shadow:0 14px 30px -10px rgba(169,129,47,.55), inset 0 1px 0 rgba(255,255,255,.5); border:1px solid var(--gold-200); cursor:pointer; transition:transform .25s ease, box-shadow .25s ease; } .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -8px rgba(169,129,47,.65), inset 0 1px 0 rgba(255,255,255,.6); } .btn-gold svg{ width:16px; height:16px; flex:none; } .btn-wrap{ position:relative; z-index:2; text-align:center; margin-top:8px; } .btn-sub{ margin-top:16px; font-size:13.5px; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:8px; } .on-dark .btn-sub{ color:#c9b79b; } .btn-sub svg{ width:14px; height:14px; stroke:var(--gold-500); flex:none; } /* ---------- shared: dotted bg texture ---------- */ .dots-bg::before{ content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(122,79,42,.14) 1px, transparent 1.4px); background-size:26px 26px; mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black, transparent 72%); pointer-events:none; } .grid-bg::before{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(0deg, rgba(233,205,140,.045) 0 1px, transparent 1px 88px), repeating-linear-gradient(90deg, rgba(233,205,140,.045) 0 1px, transparent 1px 88px); mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, black 20%, transparent 75%); pointer-events:none; } /* ============ SECTION 1 — HERO ============ */ .hero{ padding:55px 8vw 90px; text-align:center; } .hero-audience{ position:relative; z-index:2; max-width:640px; margin:0 auto 26px; font-size:15px; font-weight:500; color:var(--gold-300); line-height:1.6; } .hero-tag{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:10px; margin:0 auto 24px; padding:8px 18px; border:1px solid var(--gold-600); background:rgba(220,185,104,.1); border-radius:999px; color:var(--gold-300); font-size:13px; font-weight:600; letter-spacing:.03em; } .hero-tag .dot{ width:3px; height:3px; border-radius:50%; background:var(--gold-500); flex:none; } .hero-lead{ position:relative; z-index:2; font-size:18px; font-weight:500; line-height:1.75; color:var(--beige-100); max-width:660px; margin:0 auto 22px; } .hero-lead .accent{ color:var(--gold-300); font-weight:700; } .hero-title{ position:relative; z-index:2; font-family:var(--font-display); font-optical-sizing:auto; font-weight:700; font-size:clamp(38px, 5.8vw, 72px); line-height:1.15; max-width:23ch; margin:0 auto 26px; color:var(--beige-050); } .hero-title .accent{ background:linear-gradient(100deg, var(--gold-200), var(--gold-500) 60%, var(--gold-300)); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero-title .underline{ text-decoration:underline; text-decoration-color:var(--gold-400); text-underline-offset:6px; text-decoration-thickness:2px; } .hero-desc .accent{ color:var(--gold-300); font-weight:600; font-style:normal; } .hero-desc{ position:relative; z-index:2; font-style:italic; font-size:17px; line-height:1.8; color:var(--text-body-dark); max-width:640px; margin:0 auto 34px; } .hero-meta{ position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-bottom:38px; font-size:14px; color:#c9b79b; } .hero-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--gold-500); } .hero-meta .seats{ background:rgba(220,185,104,.14); border:1px solid var(--gold-600); color:var(--gold-300); padding:4px 12px; border-radius:999px; font-weight:600; font-size:12.5px; letter-spacing:.03em; } .hero-img{ position:relative; z-index:2; max-width:880px; margin:56px auto 0; aspect-ratio:2382/1596; border-radius:var(--radius-lg); border:1px solid var(--gold-600); background:linear-gradient(160deg, var(--brown-800), var(--brown-950)); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 30px 70px -24px rgba(0,0,0,.6); } .hero-img img{ width:100%; height:100%; object-fit:cover; display:block; } .img-tag{ display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--gold-400); font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; } .img-tag svg{ width:34px; height:34px; stroke:var(--gold-400); opacity:.8; } /* ============ ARTICLE / STORY ============ */ .article{ position:relative; z-index:2; max-width:720px; margin:0 auto; } .article p{ font-size:16.5px; line-height:1.9; color:var(--text-body); margin-bottom:22px; } .article h3{ font-family:var(--font-display); font-optical-sizing:auto; font-weight:700; font-size:clamp(28px, 3.4vw, 44px); line-height:1.28; color:var(--brown-900); text-align:center; margin:64px 0 32px; } .article blockquote{ margin:36px 0; padding:26px 30px; background:var(--beige-100); border-left:3px solid var(--gold-500); border-radius:0 var(--radius-md) var(--radius-md) 0; font-style:italic; font-size:17px; color:var(--brown-800); line-height:1.75; } .article .closing{ margin-top:46px; padding:34px 36px; background:linear-gradient(160deg, var(--brown-800), var(--brown-950)); color:var(--beige-100); border-radius:var(--radius-lg); border:1px solid var(--gold-600); } .article .closing p{ color:var(--text-body-dark); margin-bottom:16px; } .article .closing p:last-child{ margin-bottom:0; } .article-divider{ display:flex; align-items:center; gap:16px; max-width:720px; margin:56px auto; } .article-divider .line{ flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold-500), transparent); } .article-divider .diamond{ width:7px; height:7px; background:var(--gold-500); transform:rotate(45deg); flex:none; } .img-placeholder{ max-width:720px; margin:44px auto; border-radius:var(--radius-lg); border:1px solid var(--gold-400); background:var(--beige-100); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 20px 50px -22px rgba(51,32,15,.35); } .img-placeholder img{ width:100%; height:100%; object-fit:cover; display:block; } .img-placeholder .img-tag{ color:var(--gold-700); } .img-placeholder .img-tag svg{ stroke:var(--gold-700); } /* ============ COMPARISON CARDS (old vs new / fit vs not-fit) ============ */ .cards{ position:relative; z-index:2; max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:stretch; } .badge-mid{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg, var(--gold-300), var(--gold-600)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--brown-950); box-shadow:0 16px 34px -8px rgba(169,129,47,.55), 0 0 0 6px var(--beige-050); z-index:3; text-align:center; line-height:1.2; padding:6px; } .card{ position:relative; border-radius:var(--radius-lg); padding:44px 38px 40px; } .card-head{ display:flex; align-items:center; gap:12px; margin-bottom:22px; } .card-head .tag{ font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; padding:6px 14px; border-radius:999px; } .card-title{ font-family:var(--font-display); font-optical-sizing:auto; font-weight:700; font-size:23px; } .card-old{ background:#f1e6d2; border:1px solid #e0cead; } .card-old .card-head .tag{ background:#e6d5b6; color:#7a6440; } .card-old .card-title{ color:#6e5a3e; } .card-old li{ color:#6a5a44; } .card-new{ background:linear-gradient(160deg, var(--brown-800), var(--brown-950) 85%); border:1px solid var(--gold-600); box-shadow:0 26px 60px -22px rgba(23,14,8,.55); color:var(--beige-100); } .card-new::before, .card-new::after{ content:""; position:absolute; width:26px; height:26px; border:2px solid var(--gold-400); opacity:.85; } .card-new::before{ top:14px; left:14px; border-right:none; border-bottom:none; border-top-left-radius:6px; } .card-new::after{ bottom:14px; right:14px; border-left:none; border-top:none; border-bottom-right-radius:6px; } .card-new .card-head .tag{ background:linear-gradient(135deg, var(--gold-300), var(--gold-600)); color:var(--brown-950); } .card-new .card-title{ color:var(--gold-200); } .card-new li{ color:#e7dac2; } .list{ display:flex; flex-direction:column; gap:16px; margin-top:24px; } .list li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.65; } .list li .icon{ flex:none; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:2px; } .card-old .icon{ background:rgba(122,90,52,.16); } .card-old .icon svg{ stroke:#8a7350; } .card-new .icon{ background:rgba(220,185,104,.16); } .card-new .icon svg{ stroke:var(--gold-300); } .list li .icon svg{ width:12px; height:12px; } /* fit / not-fit variant: single-color light cards, no dark card */ .card-fit{ background:var(--beige-100); border:1px solid var(--gold-400); } .card-fit .card-head .tag{ background:linear-gradient(135deg, var(--gold-300), var(--gold-600)); color:var(--brown-950); } .card-fit .card-title{ color:var(--brown-900); } .card-fit li{ color:var(--text-body); } .card-fit .icon{ background:rgba(169,129,47,.14); } .card-fit .icon svg{ stroke:var(--gold-700); } .card-fit li strong{ color:var(--brown-900); } /* flowing prose list — no icon bullets, just stacked paragraph lines */ .list-plain{ display:flex; flex-direction:column; gap:18px; margin-top:0; } .list-plain li{ list-style:none; font-size:15.5px; line-height:1.75; color:var(--text-body); } .list-plain li strong{ color:var(--brown-900); } /* ---------- formula / equation banner ---------- */ .formula-line{ position:relative; z-index:2; max-width:820px; margin:56px auto 0; text-align:center; font-family:var(--font-display); font-optical-sizing:auto; } .formula-line .formula-top{ display:block; font-weight:600; font-size:clamp(16px, 1.9vw, 22px); color:var(--brown-700); margin-bottom:12px; } .formula-line .formula-top span{ color:var(--gold-600); font-weight:800; margin:0 8px; } .formula-line .formula-result{ display:block; font-weight:800; font-size:clamp(28px, 3.6vw, 42px); background:linear-gradient(100deg, var(--gold-700), var(--gold-500) 50%, var(--gold-700)); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ============ FEATURE ROWS (curriculum blocks) ============ */ .feature-card{ position:relative; z-index:2; max-width:840px; margin:0 auto 40px; background:var(--beige-100); border:1px solid var(--beige-300); border-radius:var(--radius-lg); padding:44px; } .feature-card:last-child{ margin-bottom:0; } .feature-num{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-700); margin-bottom:14px; } .feature-num .num-circle{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, var(--gold-300), var(--gold-600)); color:var(--brown-950); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:15px; } .feature-title{ font-family:var(--font-display); font-optical-sizing:auto; font-weight:700; font-size:26px; color:var(--brown-900); margin-bottom:26px; } .feature-card .img-placeholder{ margin:0 0 28px; max-width:100%; } .feature-q{ font-style:italic; font-size:16.5px; color:var(--brown-800); margin-bottom:22px; padding-left:16px; border-left:3px solid var(--gold-500); } .feature-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:26px; } .feature-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.65; color:var(--text-body); } .feature-list li .dot-mark{ flex:none; width:8px; height:8px; margin-top:7px; background:var(--gold-500); transform:rotate(45deg); } .result-box{ background:linear-gradient(160deg, var(--brown-800), var(--brown-950)); border-radius:var(--radius-md); padding:20px 24px; color:var(--gold-200); font-size:14.5px; line-height:1.65; } .result-box strong{ color:var(--gold-300); } /* ============ TESTIMONIAL / MEDIA GRID ============ */ .testimonial-grid{ position:relative; z-index:2; max-width:900px; margin:0 auto; display:grid; grid-template-columns:repeat(2, 1fr); gap:28px; } .testimonial-grid .img-placeholder{ margin:0; max-width:100%; background:none; border-color:var(--gold-500); } /* ============ PRICING CARD ============ */ .pricing-card{ position:relative; z-index:2; max-width:640px; margin:0 auto; background:linear-gradient(160deg, var(--brown-800), var(--brown-950) 85%); border:1px solid var(--gold-600); border-radius:var(--radius-lg); padding:52px 44px; box-shadow:0 30px 70px -24px rgba(0,0,0,.6); } .pricing-card::before, .pricing-card::after{ content:""; position:absolute; width:28px; height:28px; border:2px solid var(--gold-400); opacity:.85; } .pricing-card::before{ top:16px; left:16px; border-right:none; border-bottom:none; border-top-left-radius:6px; } .pricing-card::after{ bottom:16px; right:16px; border-left:none; border-top:none; border-bottom-right-radius:6px; } .pricing-list{ display:flex; flex-direction:column; gap:18px; margin-bottom:36px; } .pricing-list li{ display:flex; gap:14px; align-items:flex-start; font-size:15.5px; line-height:1.6; color:var(--text-body-dark); } .pricing-list li .icon{ flex:none; width:24px; height:24px; border-radius:50%; background:rgba(220,185,104,.16); display:flex; align-items:center; justify-content:center; margin-top:1px; } .pricing-list li .icon svg{ width:13px; height:13px; stroke:var(--gold-300); } .price-divider{ height:1px; background:linear-gradient(90deg, transparent, var(--gold-600), transparent); margin:32px 0; } .price-block{ text-align:center; } .price-old{ color:var(--muted); text-decoration:line-through; font-size:15px; margin-bottom:8px; } .price-new{ font-family:var(--font-display); font-optical-sizing:auto; font-weight:800; font-size:46px; color:var(--gold-300); margin-bottom:10px; } .price-note{ font-size:14px; color:#c9b79b; margin-bottom:4px; } .price-note.strong{ color:var(--beige-100); font-weight:600; } /* ============ GUARANTEE ============ */ .seal{ width:90px; height:90px; margin:0 auto 28px; border-radius:50%; background:linear-gradient(135deg, var(--gold-300), var(--gold-600)); display:flex; align-items:center; justify-content:center; box-shadow:0 16px 34px -10px rgba(169,129,47,.5); } .seal svg{ width:42px; height:42px; stroke:var(--brown-950); } .guarantee-box{ position:relative; z-index:2; max-width:720px; margin:0 auto; text-align:center; } .guarantee-box p{ font-size:16.5px; line-height:1.85; color:var(--text-body); margin-bottom:20px; text-align:justify; } .trust-stat{ display:inline-flex; align-items:center; gap:10px; margin-top:12px; padding:12px 22px; background:var(--beige-100); border:1px solid var(--gold-400); border-radius:999px; font-weight:600; font-size:14.5px; color:var(--brown-800); } .trust-stat strong{ color:var(--gold-700); } /* ============ FAQ ============ */ .faq-list{ position:relative; z-index:2; max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px; } .faq-item{ background:var(--beige-100); border:1px solid var(--beige-300); border-radius:var(--radius-md); padding:6px 26px; } .faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; font-weight:600; font-size:16px; color:var(--brown-900); } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary .chev{ flex:none; width:20px; height:20px; stroke:var(--gold-600); transition:transform .25s ease; } .faq-item[open] summary .chev{ transform:rotate(180deg); } .faq-item p{ padding:0 0 22px; font-size:15px; line-height:1.75; color:var(--text-body); } /* ============ TWO PATHS / DECISION BLOCK ============ */ .path-grid{ position:relative; z-index:2; max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:30px; } .path-card{ border-radius:var(--radius-lg); padding:38px 34px; } .path-1{ background:rgba(255,255,255,.04); border:1px solid rgba(233,205,140,.25); } .path-2{ background:linear-gradient(160deg, rgba(220,185,104,.12), rgba(220,185,104,.02)); border:1px solid var(--gold-500); } .path-label{ font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; } .path-1 .path-label{ color:#a9977e; } .path-2 .path-label{ color:var(--gold-300); } .path-card p{ font-size:15.5px; line-height:1.8; color:var(--text-body-dark); } .ps-note{ max-width:760px; margin:44px auto 0; padding:24px 28px; border-radius:var(--radius-md); border:1px solid rgba(233,205,140,.3); font-size:14.5px; line-height:1.75; font-style:italic; color:#c9b79b; } /* ============ FOUNDER / ABOUT ============ */ .founder-row{ position:relative; z-index:2; max-width:1080px; margin:0 auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; } .founder-photo{ aspect-ratio:1/1; border-radius:var(--radius-lg); border:1px solid var(--gold-500); background:linear-gradient(160deg, var(--brown-800), var(--brown-950)); display:flex; align-items:center; justify-content:center; overflow:hidden; } .founder-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .founder-photo .img-tag{ color:var(--gold-400); } .founder-photo .img-tag svg{ stroke:var(--gold-400); } .founder-hello{ font-family:var(--font-display); font-optical-sizing:auto; font-weight:700; font-size:28px; color:var(--brown-900); margin-bottom:20px; } .founder-bio p{ font-size:16px; line-height:1.85; color:var(--text-body); margin-bottom:18px; } .founder-bio .q{ font-style:italic; color:var(--brown-800); } .founder-list{ display:flex; flex-direction:column; gap:14px; margin:26px 0; } .founder-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.65; color:var(--text-body); } .founder-list li .icon{ flex:none; width:22px; height:22px; border-radius:50%; background:rgba(169,129,47,.14); display:flex; align-items:center; justify-content:center; margin-top:2px; } .founder-list li .icon svg{ width:12px; height:12px; stroke:var(--gold-700); } .founder-sign{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:30px; color:var(--gold-700); margin-top:10px; } /* ============ FOOTER ============ */ .site-footer{ background:var(--brown-950); color:#c9b79b; text-align:center; padding:54px 8vw; font-size:13.5px; line-height:1.9; } .site-footer .foot-brand{ font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--gold-300); margin-bottom:10px; } @media (max-width: 980px){ section{ padding:70px 6vw; } .cards, .path-grid{ grid-template-columns:1fr; } .badge-mid{ display:none; } .card{ margin-top:18px; } .testimonial-grid{ grid-template-columns:1fr; } .founder-row{ grid-template-columns:1fr; } .founder-photo{ max-width:280px; margin:0 auto; } }