/*
Theme Name: CamSim - Cầm Sim Số Đẹp
Theme URI: https://camsim.vn
Author: Antigravity Team
Author URI: https://camsim.vn
Description: Giao diện WordPress chuyên nghiệp dành cho dịch vụ cầm sim số đẹp, định giá sim, mua bán trả góp sim VIP. Thiết kế chuẩn SEO, tối ưu tốc độ, tích hợp công cụ tính khoản vay và hệ thống quản lý khách hàng đăng ký (Lead) trực tiếp trong WP Admin.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: camsim
Tags: custom-background, custom-logo, custom-menu, featured-images, full-width-template, theme-options, translation-ready
*/

:root {
  color-scheme: light only;
  supported-color-schemes: light;
  --green-900: #0a4632;
  --green-800: #0c5c40;
  --green-700: #10714f;
  --green-100: #e3f0e9;
  --green-50: #f2f8f4;
  --amber-500: #f2a007;
  --amber-600: #d98a00;
  --amber-100: #fdf3dd;
  --ink: #15211b;
  --muted: #5c6b62;
  --line: #e2e9e4;
  --bg: #ffffff;
  --bg-alt: #f5f9f6;
  --radius: 14px;
  --shadow: 0 12px 32px rgba(12, 92, 64, 0.10);
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  color-scheme: light only;
  background-color: #ffffff !important;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  overflow-x: hidden;
  max-width: 100%;
}
body {
  color-scheme: light only;
  background-color: #ffffff !important;
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}
img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; transition: color 0.2s, opacity 0.2s; }
.container { width: min(1140px, 92%); margin: 0 auto; }
.container.narrow { width: min(760px, 92%); }

/* Adjust for WordPress Admin Bar */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); transition: box-shadow 0.25s; }
.site-header.scrolled { box-shadow: 0 4px 18px rgba(0,0,0,0.07); }
.header-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; color: var(--green-900); }
.logo-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--green-800); color: var(--amber-500); display: grid; place-items: center; font-size: 22px; font-weight: 800; }
.logo-text em { font-style: normal; color: var(--amber-600); }
.main-nav { display: flex; gap: 26px; margin-left: auto; list-style: none; }
.main-nav a { font-size: 15px; font-weight: 500; color: var(--ink); position: relative; padding: 6px 0; }
.main-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--amber-500); transition: width 0.25s; border-radius: 2px; }
.main-nav a:hover::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.hotline { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--green-800); font-size: 15.5px; white-space: nowrap; }
.hotline.light { color: #ffd97a; margin-top: 12px; display: inline-flex; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: 0.25s; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; border-radius: 10px; cursor: pointer; border: 2px solid transparent; transition: transform 0.15s, box-shadow 0.2s, background 0.2s; font-family: var(--font); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--amber-500); color: #231603; }
.btn-primary:hover { background: var(--amber-600); box-shadow: 0 8px 20px rgba(242,160,7,0.35); }
.btn-outline { border-color: var(--green-800); color: var(--green-800); background: transparent; }
.btn-outline:hover { background: var(--green-800); color: #fff; }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-lg { padding: 14px 30px; font-size: 16px; }
.btn-block { width: 100%; }
.link-more { color: var(--green-700); font-weight: 600; font-size: 15px; }
.link-more:hover { color: var(--green-900); text-decoration: underline; }

/* Hero */
.hero { background: linear-gradient(180deg, var(--green-50) 0%, #fff 100%); padding: 72px 0 64px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--green-700); margin-bottom: 14px; }
.hero h1 { font-size: clamp(30px, 4.6vw, 54px); line-height: 1.2; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 18px; word-break: break-word; }
.hero h1 .hl { color: var(--green-800); position: relative; }
.hero h1 .hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 10px; background: rgba(242,160,7,0.35); z-index: -1; border-radius: 4px; }
.lead { font-size: 17.5px; color: var(--muted); margin-bottom: 28px; max-width: 520px; }
.lead strong { color: var(--ink); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-points { list-style: none; display: flex; gap: 22px; flex-wrap: wrap; }
.hero-points li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; }

/* Hero Visual (Chuyên viên tài chính VIP) */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: flex-end; padding: 10px 0 0; min-height: 480px; }
.hero-person-wrap { position: relative; width: 100%; max-width: 440px; display: flex; justify-content: center; align-items: flex-end; }
.hero-person-img { width: 100%; max-width: 400px; height: auto; display: block; filter: drop-shadow(0 18px 40px rgba(12, 92, 64, 0.18)); z-index: 1; }

.hero-pill-badge { position: absolute; z-index: 2; background: #ffffff; border: 1.5px solid var(--line); border-radius: 14px; padding: 11px 18px; box-shadow: 0 12px 28px rgba(12, 92, 64, 0.12); display: flex; align-items: center; gap: 12px; animation: float 5s ease-in-out infinite; backdrop-filter: blur(8px); }
.hero-pill-badge.pill-top { top: 14%; left: -20px; }
.hero-pill-badge.pill-bottom { bottom: 10%; right: -20px; animation-direction: reverse; animation-duration: 6s; }
.hero-pill-badge .pill-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--green-100); color: var(--green-800); display: grid; place-items: center; font-size: 19px; flex-shrink: 0; }
.hero-pill-badge .pill-text { display: flex; flex-direction: column; }
.hero-pill-badge .pill-text strong { font-size: 14.5px; color: var(--green-800); line-height: 1.25; font-weight: 700; }
.hero-pill-badge .pill-text span { font-size: 12px; color: var(--muted); }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Stats */
.stats { background: var(--green-900); color: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 34px 0; }
.stat { text-align: center; }
.stat strong { display: block; font-size: 32px; font-weight: 800; color: var(--amber-500); }
.stat span { font-size: 14px; color: #cfe3d6; }

/* Sections */
.section { padding: 84px 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--green-900); color: #fff; }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.4px; margin-bottom: 10px; }
.section-head p { color: var(--muted); font-size: 16.5px; }
.section-head.light p { color: #cfe3d6; }
.section-head.light .eyebrow { color: var(--amber-500); }
.section-head.row { display: flex; align-items: flex-end; justify-content: space-between; max-width: none; }

/* Feature Cards */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; transition: transform 0.25s, box-shadow 0.25s; }
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.feature-icon { width: 58px; height: 58px; border-radius: 14px; background: var(--green-100); color: var(--green-800); display: grid; place-items: center; margin-bottom: 20px; }
.feature-card h3 { font-size: 19px; margin-bottom: 10px; }
.feature-card p { color: var(--muted); font-size: 15.5px; }
.feature-card .link-more { display: inline-block; margin-top: 14px; }

/* Steps */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.steps li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; display: flex; gap: 16px; }
.step-num { flex: 0 0 46px; height: 46px; border-radius: 50%; background: var(--green-800); color: #fff; font-weight: 800; font-size: 18px; display: grid; place-items: center; }
.steps h3 { font-size: 16.5px; margin-bottom: 6px; }
.steps p { font-size: 14.5px; color: var(--muted); }

/* Advantages */
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.adv-item { border-left: 4px solid var(--amber-500); background: var(--bg-alt); border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 24px; }
.adv-item strong { display: block; font-size: 16.5px; margin-bottom: 6px; }
.adv-item p { font-size: 14.5px; color: var(--muted); }

/* Calculator */
.calc-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 20px; padding: 40px; }
.calc-label { display: flex; justify-content: space-between; font-weight: 600; margin: 22px 0 10px; font-size: 15.5px; }
.calc-label:first-child { margin-top: 0; }
.calc-label output { color: var(--amber-500); font-weight: 800; }
input[type="range"] { width: 100%; accent-color: var(--amber-500); height: 32px; cursor: pointer; }
.calc-scale { display: flex; justify-content: space-between; font-size: 12.5px; color: #9dbfae; margin-top: -4px; }
.calc-note { font-size: 13.5px; color: #9dbfae; margin-top: 18px; }
.calc-results { background: #fff; color: var(--ink); border-radius: 16px; padding: 30px; display: flex; flex-direction: column; gap: 16px; }
.calc-result { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 16px; border-bottom: 1px dashed var(--line); }
.calc-result:last-of-type { border-bottom: 0; padding-bottom: 0; }
.calc-result span { font-size: 14.5px; color: var(--muted); }
.calc-result strong { font-size: 21px; color: var(--green-800); white-space: nowrap; }

/* Commitments */
.commit-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.commit-grid h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; margin-bottom: 12px; }
.commit-grid > div p { color: var(--muted); margin-bottom: 24px; }
.commit-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.commit-list li { background: var(--bg-alt); border-radius: var(--radius); padding: 22px 24px 22px 60px; position: relative; }
.commit-list li::before { content: "✓"; position: absolute; left: 22px; top: 22px; width: 28px; height: 28px; border-radius: 50%; background: var(--green-800); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.commit-list strong { display: block; margin-bottom: 4px; }
.commit-list p { font-size: 14.5px; color: var(--muted); }

/* Rate Table */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; max-width: 100%; width: 100%; }
.rate-table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 640px; }
.rate-table th, .rate-table td { padding: 16px 22px; text-align: left; }
.rate-table thead th { background: var(--green-800); color: #fff; font-weight: 700; }
.rate-table tbody tr:nth-child(even) { background: var(--bg-alt); }
.rate-table tbody tr:hover { background: var(--green-100); }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.faq-item summary { padding: 18px 22px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--green-700); flex: 0 0 auto; transition: transform 0.25s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 22px 20px; color: var(--muted); font-size: 15.5px; }

/* Blog */
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.post-thumb { height: 170px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 20px; letter-spacing: 1px; overflow: hidden; position: relative; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-thumb.t1 { background: linear-gradient(135deg, #0c5c40, #1a8a5f); }
.post-thumb.t2 { background: linear-gradient(135deg, #7a5200, #d99a06); }
.post-thumb.t3 { background: linear-gradient(135deg, #1d3a5f, #2f6db3); }
.post-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.post-date { font-size: 13px; color: var(--muted); }
.post-body h3 { font-size: 17px; margin: 8px 0; line-height: 1.45; }
.post-body h3 a:hover { color: var(--green-700); }
.post-body p { font-size: 14.5px; color: var(--muted); margin-bottom: 12px; flex: 1; }

/* Form */
.reg-form { background: #fff; color: var(--ink); border-radius: 20px; padding: 38px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); position: relative; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
.form-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.form-field input { width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 15.5px; font-family: var(--font); transition: border-color 0.2s; }
.form-field input:focus { outline: none; border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(16,113,79,0.12); }
.form-error { color: #c0392b; font-size: 14.5px; margin-bottom: 14px; font-weight: 500; }
.form-ok { background: var(--green-100); color: var(--green-900); border-radius: 10px; padding: 14px 18px; margin-top: 16px; font-size: 15px; font-weight: 500; }
.btn.loading { opacity: 0.7; pointer-events: none; }

/* Single Post & Page Content */
.page-header { background: var(--green-50); padding: 50px 0 40px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.page-title { font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; color: var(--green-900); line-height: 1.25; margin-bottom: 14px; }
.post-meta { font-size: 14px; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap; }
.entry-content { font-size: 16.5px; line-height: 1.8; color: var(--ink); }
.entry-content h2 { font-size: 24px; font-weight: 700; margin: 32px 0 16px; color: var(--green-900); }
.entry-content h3 { font-size: 20px; font-weight: 700; margin: 24px 0 12px; color: var(--green-800); }
.entry-content p { margin-bottom: 18px; }
.entry-content ul, .entry-content ol { margin: 0 0 20px 24px; }
.entry-content li { margin-bottom: 8px; }
.entry-content blockquote { border-left: 4px solid var(--amber-500); padding: 12px 20px; background: var(--bg-alt); margin: 24px 0; font-style: italic; border-radius: 0 var(--radius) var(--radius) 0; }
.entry-content img { border-radius: var(--radius); margin: 20px 0; }
.entry-thumbnail { margin-bottom: 30px; border-radius: var(--radius); overflow: hidden; }

/* Footer */
.site-footer { background: #0d2118; color: #cfe3d6; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 36px; padding: 60px 0 40px; }
.footer-brand p { font-size: 14.5px; margin: 14px 0; color: #9dbfae; }
.footer-col h4 { color: #fff; font-size: 15px; margin-bottom: 16px; font-weight: 700; }
.footer-col a, .footer-col p { display: block; font-size: 14.5px; color: #9dbfae; margin-bottom: 10px; }
.footer-col a:hover { color: var(--amber-500); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 0; font-size: 13.5px; color: #7d937f; }
.footer-bottom .container { text-align: center; }

/* Floating Contact Buttons */
.quick-contact-bar { position: fixed; bottom: 24px; right: 24px; z-index: 999; display: flex; flex-direction: column; gap: 12px; }
.quick-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.22); transition: transform 0.25s, box-shadow 0.25s; position: relative; }
.quick-btn:hover { transform: scale(1.1); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.quick-btn.call-btn { background: #27ae60; }
.quick-btn.call-btn::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #27ae60; animation: pulse 1.8s infinite; }
.quick-btn.zalo-btn { background: #0088cc; }
@keyframes pulse { 0% { transform: scale(0.95); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } }

/* Reveal Animation */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding: 52px 0 48px; }
  .cards-3, .steps, .adv-grid { grid-template-columns: 1fr 1fr; }
  .calc-grid, .commit-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .header-inner { justify-content: space-between; gap: 10px; width: 100%; }
  .header-actions { margin-left: auto; gap: 10px; }
  .main-nav { position: fixed; top: 72px; right: 0; left: 0; background: #fff; flex-direction: column; padding: 12px 4%; gap: 0; border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(0,0,0,0.08); display: none; }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .main-nav a:last-child { border-bottom: 0; }
  .nav-toggle { display: flex; }

  /* Bỏ nút đăng ký cầm sim bị vỡ trên mobile header */
  .header-actions .btn-header-cta { display: none !important; }

  /* Hiển thị số điện thoại rõ ràng trên mobile */
  .header-actions .hotline {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--green-800);
    background: #eef7f2;
    border: 1px solid #cce5d7;
    padding: 7px 12px;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(12, 92, 64, 0.08);
  }
  .header-actions .hotline svg {
    width: 14px;
    height: 14px;
    color: var(--green-800);
    flex-shrink: 0;
  }
  .header-actions .hotline:active {
    background: var(--green-800);
    color: #ffffff;
  }
  .header-actions .hotline:active svg {
    color: #ffffff;
  }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

@media (max-width: 600px) {
  .container { width: calc(100% - 28px); margin: 0 auto; }
  .section { padding: 48px 0; }
  .hero { padding: 36px 0 32px; overflow: hidden; }
  .hero h1 { font-size: clamp(23px, 6.5vw, 30px); line-height: 1.25; }
  .hero h1 .hl { white-space: normal !important; display: inline; }
  .lead { font-size: 15px; margin-bottom: 20px; }
  .hero-points li { font-size: 13.5px; }
  .hero-cta { flex-direction: column; gap: 10px; }
  .hero-cta .btn { width: 100%; }

  /* Chuyên viên tài chính trên mobile: căn giữa gọn gàng, không tràn lề */
  .hero-visual { padding: 14px 0 0; min-height: auto; width: 100%; overflow: visible; }
  .hero-person-wrap { max-width: 290px; margin: 0 auto; }
  .hero-person-img { max-width: 270px; filter: drop-shadow(0 12px 24px rgba(12, 92, 64, 0.15)); }
  .hero-pill-badge { display: none !important; }

  /* Các khối danh sách chuyển 1 cột */
  .cards-3, .steps, .adv-grid { grid-template-columns: 1fr; gap: 16px; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Bảng tính khoản vay */
  .calc-grid { padding: 20px 14px; gap: 20px; border-radius: 16px; }
  .calc-label { font-size: 14.5px; }
  .calc-results { padding: 18px 14px; border-radius: 14px; }
  .calc-result { flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 12px; }
  .calc-result span { font-size: 13px; line-height: 1.4; }
  .calc-result strong { font-size: 18px; }

  /* Điều kiện & nguyên tắc */
  .condition-card { padding: 20px 14px; border-radius: 14px; }
  .condition-card h3 { font-size: 16px; margin-bottom: 12px; }
  .condition-card ul { gap: 10px; }
  .condition-card li { font-size: 13.5px; gap: 8px; }

  /* Quy trình các bước */
  .steps li { padding: 16px 14px; gap: 12px; }
  .step-num { flex: 0 0 38px; height: 38px; font-size: 16px; }
  .steps h3 { font-size: 15px; margin-bottom: 4px; }
  .steps p { font-size: 13.5px; }

  /* Ưu điểm & Cam kết */
  .adv-item { padding: 16px 14px; }
  .adv-item strong { font-size: 15px; }
  .adv-item p { font-size: 13.5px; }
  .commit-list li { padding: 16px 14px 16px 48px; }
  .commit-list li::before { left: 14px; top: 16px; width: 24px; height: 24px; font-size: 13px; }

  /* Form đăng ký */
  .reg-form { padding: 22px 14px; border-radius: 16px; }
  .form-field label { font-size: 13.5px; }
  .form-field input { font-size: 14.5px; padding: 11px 13px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 24px; padding: 40px 0 28px; }

  /* Nút liên hệ nổi */
  .quick-contact-bar { bottom: 14px; right: 14px; gap: 10px; }
  .quick-btn { width: 46px; height: 46px; }
  .quick-btn svg { width: 22px; height: 22px; }
}

@media (max-width: 480px) {
  .logo { font-size: 18px; gap: 7px; }
  .logo-mark { width: 32px; height: 32px; font-size: 18px; border-radius: 8px; }
  .header-actions { gap: 6px; }
  .header-actions .hotline {
    font-size: 12px;
    padding: 6px 10px;
    gap: 4px;
  }
  .stat strong { font-size: 24px; }
  .stat span { font-size: 12px; }
}

@media (max-width: 380px) {
  .logo-text em { display: inline; }
  .header-actions .hotline {
    font-size: 11px;
    padding: 5px 8px;
    gap: 4px;
  }
  .header-actions .hotline svg {
    width: 12px;
    height: 12px;
  }
  .header-actions { gap: 4px; }
  .nav-toggle { padding: 6px; }
}

/* Khóa giao diện sáng cố định - Ngăn điện thoại tự động đảo màu sang nền tối */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light only;
  }
  html, body {
    background-color: #ffffff !important;
    color: #15211b !important;
  }
  .site-header {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .hero {
    background: linear-gradient(180deg, var(--green-50) 0%, #ffffff 100%) !important;
    color: var(--ink) !important;
  }
  .hero h1, .section-head h2, .commit-grid h2, .page-title {
    color: var(--ink) !important;
  }
  .lead, .section-head p, .steps p, .adv-item p, .commit-grid > div p, .post-body p {
    color: var(--muted) !important;
  }
  .lead strong, .commit-list strong, .adv-item strong {
    color: var(--ink) !important;
  }
  .feature-card, .steps li, .calc-results, .reg-form, .faq-item, .post-card, .table-wrap {
    background: #ffffff !important;
    color: var(--ink) !important;
  }
  .form-field label {
    color: var(--ink) !important;
  }
  .form-field input {
    background: #ffffff !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
  }
  .main-nav {
    background: #ffffff !important;
  }
  .main-nav a {
    color: var(--ink) !important;
  }
  .header-actions .hotline {
    color: var(--green-800) !important;
    background: #eef7f2 !important;
    border-color: #cce5d7 !important;
  }
  .condition-card {
    background: #ffffff !important;
    color: var(--ink) !important;
  }
  .condition-card li {
    color: var(--muted) !important;
  }
  .condition-card li strong {
    color: var(--ink) !important;
  }
}

/* Conditions & Badges */
.conditions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.condition-card { background: #fff; border-radius: var(--radius); padding: 32px 28px; border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
.condition-card.approved { border-top: 4px solid var(--green-700); }
.condition-card.rejected { border-top: 4px solid #d9534f; }
.condition-card h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 18px; color: var(--ink); }
.condition-card ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.condition-card li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.condition-card li strong { color: var(--ink); }
.condition-card.approved li svg { color: var(--green-700); flex-shrink: 0; margin-top: 2px; }
.condition-card.rejected li svg { color: #d9534f; flex-shrink: 0; margin-top: 2px; }
.feature-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--green-100); color: var(--green-800); margin-bottom: 12px; }
.feature-badge.accent { background: var(--amber-100); color: var(--amber-600); }
@media (max-width: 768px) {
  .conditions-grid { grid-template-columns: 1fr; }
}