/* GIAO DIỆN MẶC ĐỊNH (chốt 27/09/2026) — EDITORIAL (kiểu tạp chí, báo cáo tài chính): nền giấy ngà, tiêu đề chữ có chân, kẻ mảnh, ít khung hộp */ /* Font Lora được nạp cùng Be Vietnam Pro trong của index.html */ :root { --bg: #FBF9F4; --bg-alt: #F4F0E6; --text: #1C1A17; --text-2: #4A453D; --text-3: #7A7366; --border: #E2DCCD; --border-strong: #CFC6B2; --shadow-sm: none; --shadow: none; --shadow-lg: 0 16px 32px -16px rgba(60, 45, 20, .25); --serif: "Lora", "Noto Serif", Georgia, serif; } body { background: var(--bg); } h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; } .header { background: rgba(251, 249, 244, .92); } .logo span { font-family: var(--serif); font-size: 19px; } .eyebrow { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 16px; color: #8A5A00; } .eyebrow::before { background: #8A5A00; width: 24px; height: 1px; } .btn { border-radius: 2px; } .btn-primary { background: #1C1A17; } .btn-primary:hover { background: #0F3D6E; } .btn-secondary { background: transparent; border-color: #1C1A17; } .hero { background: var(--bg); border-bottom: 1px solid #1C1A17; } .hero h1 { font-size: clamp(36px, 7vw, 64px); line-height: 1.08; font-weight: 600; } .lead { font-size: 19px; } .mock { border-radius: 2px; border-color: var(--border-strong); background: #fff; } .mock-bar { background: var(--bg-alt); } .float-card { border-radius: 2px; } .section-alt { background: var(--bg-alt); border-color: var(--border-strong); } .section-head h2 { font-size: clamp(30px, 5vw, 46px); } /* thẻ → cột báo: chỉ kẻ trên, không nền */ .service, .step, .review { background: transparent; border: 0; border-top: 2px solid #1C1A17; border-radius: 0; padding: 24px 0 0; box-shadow: none; } .service:hover { transform: none; box-shadow: none; } .service-icon { background: transparent; width: auto; height: auto; color: #8A5A00; margin-bottom: 16px; } .service:hover .service-icon { background: transparent; color: #0F3D6E; } .service h3, .step h3 { font-size: 22px; } .services, .steps { gap: 40px 32px; } .step-num { font-family: var(--serif); font-style: italic; font-size: 32px; background: none; border: 0; padding: 0; color: #8A5A00; } .plan { border-radius: 2px; background: #fff; } .plan-featured { border: 1px solid #1C1A17; outline: 4px double #1C1A17; outline-offset: 4px; transform: none; } .plan-featured .price strong { color: #1C1A17; } .price strong { font-family: var(--serif); font-weight: 600; } .plan-badge { border-radius: 2px; background: #1C1A17; color: #FBF9F4; } .plan-list .i { color: #8A5A00; } .review blockquote { font-family: var(--serif); font-style: italic; font-size: 19px; color: #1C1A17; } .review-quote { color: #8A5A00; fill: none; } .faq summary { font-family: var(--serif); font-size: 19px; } .cta { background: #1C1A17; color: #D8D2C4; } .eyebrow-light { color: #F2A900; } .eyebrow-light::before { background: #F2A900; } .form { border-radius: 2px; } .field input, .field select, .field textarea { border-radius: 2px; box-shadow: none; } .footer { background: var(--bg-alt); color: var(--text-2); border-top: 1px solid #1C1A17; } .footer h4, .footer .logo-light, .footer .logo-light b { color: #1C1A17; } .footer .logo-light .logo-mark rect:first-child { fill: #1C1A17; } .footer .logo-light .logo-mark path { stroke: #FBF9F4; } .footer a:hover { color: #0F3D6E; } .footer-bottom { border-color: var(--border-strong); }