/* Font: xem css/fonts.css (tự lưu trên web, được nạp trong <head>) */

:root {
  --bg: #ffffff;
  --bg-elevated: #f8fafc;
  --fg: #0f172a;
  --muted: #64748b;
  --accent: #047857;
  --accent-dim: rgba(26, 143, 92, 0.08);
  --accent-dark: #157a4e;
  --accent-light: #e8f5f0;
  --card: #ffffff;
  --border: #e2e8f0;
  --danger: #ef4444;
  --warning: #f59e0b;
  --success: #22c55e;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overflow-x: clip;
  width: 100%;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input,select,textarea { font-family: inherit; font-size: 1rem; }
img { max-width: 100%; height: auto; display: block; }
ul,ol { list-style: none; }
svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Độ rộng nội dung trang: 1240px; màn hình rộng (>= 1400px) nới tới 1600px (khối "Trang chủ mẫu 2026-10" cuối file) */
:root { --page-w: 1240px; }
.wrap { width: 100%; max-width: calc(var(--page-w) + 40px); margin: 0 auto; padding: 0 20px; }
.section { padding-top: 80px; padding-bottom: 80px; }
.section-head { text-align: center; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(28px, 5vw, 40px); font-weight: 800; margin-bottom: 12px; color: var(--fg); }
.section-head p { color: var(--muted); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }
.alt { background: var(--bg-elevated); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; border-radius: var(--radius-sm); font-weight: 600; font-size: 1rem;
  transition: var(--transition); white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-dim); }
.btn-outline { border: 2px solid var(--border); color: var(--fg); background: transparent; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--fg); }
.btn-lg { padding: 18px 36px; font-size: 1.1rem; }
.btn-sm { padding: 10px 20px; font-size: 0.9rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #ffffff; border-bottom: 1px solid var(--border); transition: var(--transition); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; }
.logo-mark { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), #157a4e); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #ffffff; font-size: 1rem; }
.nav-links { display: flex; gap: 8px; }
.nav-links a { padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 500; color: var(--muted); transition: var(--transition); }
.nav-links a:hover, .nav-links a.active { color: var(--fg); background: var(--bg-elevated); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.hotline { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.hotline strong { color: var(--accent); font-weight: 700; }
.menu-toggle { display: none; width: 44px; height: 44px; border-radius: var(--radius-sm); align-items: center; justify-content: center; color: var(--fg); background: var(--bg-elevated); border: 1px solid var(--border); }

.hero { min-height: 100vh; display: flex; align-items: center; padding-top: 72px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(26,143,92,0.08) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(26,143,92,0.05) 0%, transparent 50%); pointer-events: none; }
.hero-inner { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: center; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(36px, 6vw, 56px); font-weight: 800; line-height: 1.1; margin-bottom: 20px; }
.hero .hl { color: var(--accent); }
.hero .hl-under { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 4px; text-decoration-skip-ink: none; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--accent-dim); border: 1px solid var(--accent); border-radius: 100px; font-size: 0.85rem; font-weight: 600; color: var(--accent); margin-bottom: 20px; }
.lede { font-size: 1.15rem; color: var(--muted); margin-bottom: 32px; max-width: 500px; line-height: 1.7; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 16px; }
.trust-item { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--muted); }
.trust-item svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }

.home-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; position: relative; }
.hc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.hc-title { font-weight: 700; font-size: 1.1rem; }
.hc-badge { font-size: 0.75rem; font-weight: 700; padding: 4px 12px; background: var(--accent-dim); color: var(--accent); border-radius: 100px; }
.eta-track { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.eta-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); position: relative; z-index: 1; flex-shrink: 0; }
.eta-dot.end { background: var(--muted); box-shadow: none; }
.eta-line { flex: 1; height: 2px; background: linear-gradient(90deg, var(--accent), var(--border)); position: relative; top: -1px; }
.eta-labels { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--muted); margin-bottom: 20px; }
.stat-row { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border); font-size: 0.9rem; }
.stat-row:first-child { border-top: none; padding-top: 0; }
.stat-row .k { color: var(--muted); }
.stat-row .v { font-weight: 600; color: var(--fg); font-family: var(--font-mono); }
.cta-strip { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.cta-strip .txt { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: var(--muted); }
.cta-strip .txt span { color: var(--accent); font-weight: 600; font-family: var(--font-mono); }

.ticker-band { background: #f0fdf4; border-bottom: 1px solid var(--border); padding: 14px 0; overflow: hidden; position: relative; }
.ticker-band::before, .ticker-band::after { content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 1; }
.ticker-band::before { left: 0; background: linear-gradient(90deg, #f0fdf4, transparent); }
.ticker-band::after { right: 0; background: linear-gradient(270deg, #f0fdf4, transparent); }
.ticker-label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.85rem; color: var(--accent); white-space: nowrap; margin-right: 32px; flex-shrink: 0; }
.ticker-label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.5s infinite; }
.ticker-track { display: flex; animation: ticker 30s linear infinite; width: max-content; will-change: transform; }
.ticker-item { display: flex; align-items: center; gap: 16px; padding: 0 32px; white-space: nowrap; font-size: 0.9rem; }
.ticker-item .price { font-family: var(--font-mono); font-weight: 700; color: var(--accent); margin: 0 16px; }
.ticker-item .up { color: var(--success); }
.ticker-item .down { color: var(--danger); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } }

.stepper { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 40px; flex-wrap: wrap; }
.step { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; flex: 1; min-width: 100px; }
.step:not(:last-child)::after { content: ''; position: absolute; top: 20px; left: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.step.active:not(:last-child)::after { background: var(--accent); }
.step-num { width: 40px; height: 40px; border-radius: 50%; background: var(--border); color: var(--muted); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-mono); z-index: 1; transition: var(--transition); }
.step.active .step-num { background: var(--accent); color: var(--bg); box-shadow: 0 0 0 4px var(--accent-dim); }
.step-label { font-size: 0.85rem; font-weight: 600; color: var(--muted); text-align: center; z-index: 1; }
.step.active .step-label { color: var(--accent); }

.panel { display: none; animation: fadeIn 0.3s ease; }
.panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.fault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.fault-card { background: var(--card); border: 2px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; cursor: pointer; transition: var(--transition); }
.fault-card:hover, .fault-card.selected { border-color: var(--accent); background: var(--accent-dim); transform: translateY(-4px); box-shadow: 0 12px 32px var(--accent-dim); }
.fault-card .icon { font-size: 2.5rem; margin-bottom: 12px; }
.fault-card .name { font-weight: 600; font-size: 0.95rem; }

.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.device-card { background: var(--card); border: 2px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; cursor: pointer; transition: var(--transition); font-size: 0.9rem; }
.device-card:hover, .device-card.selected { border-color: var(--accent); background: var(--accent-dim); }
.device-card .brand { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.device-card .model { font-weight: 700; }

.price-summary { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.price-row { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); }
.price-row:last-child { border-bottom: none; padding-bottom: 0; }
.price-row.total { font-size: 1.2rem; font-weight: 700; color: var(--accent); border-top: 2px solid var(--border); margin-top: 8px; padding-top: 20px; }
.price-row .label { color: var(--muted); }
.price-row .value { font-weight: 700; font-family: var(--font-mono); color: var(--fg); }
.price-row.total .value { color: var(--accent); }

.booking-form { display: grid; gap: 20px; }
.form-row { display: grid; gap: 8px; }
.form-row label { font-weight: 600; font-size: 0.9rem; color: var(--fg); }
.form-row .req { color: var(--danger); }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 14px 16px; background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius-sm); color: var(--fg); transition: var(--transition);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }
.form-row textarea { min-height: 100px; resize: vertical; }
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--muted); opacity: 0.7; }
.time-options { display: flex; flex-direction: column; gap: 12px; }
.time-options .opt { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--card); border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); }
.time-options .opt:hover { border-color: var(--accent); background: var(--accent-dim); }
.time-options input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; }
.time-options span { font-weight: 500; }
.form-actions { display: flex; gap: 16px; margin-top: 8px; }
.form-actions .btn { flex: 1; }

.sell-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.sell-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; text-align: center; transition: var(--transition); }
.sell-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.sell-icon { width: 64px; height: 64px; border-radius: 16px; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--accent); }
.sell-icon svg { width: 32px; height: 32px; }
.sell-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.sell-card > p { color: var(--muted); margin-bottom: 20px; font-size: 0.95rem; }
.sell-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; text-align: left; }
.sell-features li { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--bg); border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--fg); }
.sell-features li svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }

.filter-bar { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-bar select, .filter-bar input { padding: 12px 16px; background: var(--card); border: 2px solid var(--border); border-radius: var(--radius-sm); color: var(--fg); flex: 1; min-width: 180px; transition: var(--transition); }
.filter-bar select:focus, .filter-bar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }

.device-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.device-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: var(--transition); }
.device-item:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-4px); }
.device-item img { width: 100%; height: 200px; object-fit: cover; background: var(--bg); }
.device-item-content { padding: 20px; }
.device-item .brand { font-size: 0.75rem; color: var(--accent); font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.device-item .model { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.device-item .meta { display: flex; gap: 12px; font-size: 0.8rem; color: var(--muted); margin-bottom: 16px; flex-wrap: wrap; }
.device-item .meta span { display: flex; align-items: center; gap: 6px; }
.device-item .price-row { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--border); }
.device-item .sale-price { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; color: var(--accent); }
.device-item .condition { font-size: 0.8rem; padding: 4px 10px; border-radius: 100px; font-weight: 600; }
.device-item .condition.c-99 { background: #2ed57333; color: var(--success); }
.device-item .condition.c-95 { background: #00d4aa33; color: var(--accent); }
.device-item .condition.c-90 { background: #ffa50233; color: var(--warning); }
.device-item .condition.c-85 { background: #ff6b3533; color: #ff6b35; }
.load-more-wrap { text-align: center; margin-top: 32px; }

.table-wrap { overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.price-table th, .price-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.price-table th { font-weight: 700; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; background: var(--bg); position: sticky; top: 0; }
.price-table td { color: var(--fg); }
.price-table tbody tr:hover { background: var(--bg-elevated); }
.price-table .service { font-weight: 600; }
.price-table .price { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
.price-table .price-na { color: var(--muted); font-style: italic; }
.price-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; color: var(--muted); }
.price-note svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact-info { display: grid; gap: 20px; }
.contact-item { display: flex; gap: 16px; padding: 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); transition: var(--transition); }
.contact-item:hover { border-color: var(--accent); }
.ci-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.ci-icon svg { width: 24px; height: 24px; }
.contact-item div strong { display: block; margin-bottom: 4px; font-size: 1rem; }
.contact-item div a { color: var(--muted); font-size: 0.9rem; transition: var(--transition); }
.contact-item div a:hover { color: var(--accent); }
.contact-form { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; display: grid; gap: 20px; }
.contact-form .form-actions { justify-content: flex-start; }

.footer { background: var(--bg-elevated); border-top: 1px solid var(--border); padding: 60px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 40px; }
.footer-grid strong { font-size: 1.3rem; display: block; margin-bottom: 8px; }
.footer-grid p { color: var(--muted); font-size: 0.9rem; line-height: 1.7; }
.footer-grid h4 { font-size: 0.9rem; font-weight: 700; margin-bottom: 16px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }
.footer-grid a { display: block; color: var(--muted); padding: 6px 0; font-size: 0.9rem; transition: var(--transition); }
.footer-grid a:hover { color: var(--accent); }
.footer-bottom { padding-top: 24px; border-top: 1px solid var(--border); text-align: center; color: var(--muted); font-size: 0.85rem; }

.toast { position: fixed; bottom: 24px; right: 24px; padding: 16px 24px; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; z-index: 2000; transform: translateX(400px); opacity: 0; transition: var(--transition); }
.toast.show { transform: translateX(0); opacity: 1; }
.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--danger); }
.toast svg { width: 24px; height: 24px; flex-shrink: 0; }
.toast.success svg { color: var(--success); }
.toast.error svg { color: var(--danger); }

.modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: var(--transition); }
.modal.show { opacity: 1; visibility: visible; }
.modal::before { content: ''; position: absolute; inset: 0; background: rgba(15,23,42,0.5); backdrop-filter: blur(4px); }
.modal-content { position: relative; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); max-width: 500px; width: 100%; max-height: 90vh; overflow: auto; padding: 32px; transform: scale(0.9); transition: var(--transition); box-shadow: var(--shadow); }
.modal.show .modal-content { transform: scale(1); }
.modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); color: var(--muted); transition: var(--transition); }
.modal-close:hover { background: var(--danger); border-color: var(--danger); color: var(--fg); }

/* ===== NEW LIGHT THEME COMPONENT STYLES ===== */

/* Header Light Styles */
.logo-info { display: flex; flex-direction: column; line-height: 1.2; }
.logo-subtitle { font-size: 0.7rem; color: var(--muted); font-weight: 400; font-family: var(--font-body); }
.nav-pill { }
.nav-links { gap: 16px; display: flex; align-items: center; }
.nav-links a { border-radius: 100px; padding: 8px 16px; font-size: 0.95rem; color: #334155; font-weight: 500; }
.nav-links a.active { background: #d1fae5; color: #10b981; font-weight: 700; }
.hotline { display: flex; align-items: center; gap: 10px; color: var(--fg); }
.hotline-info { display: flex; flex-direction: column; line-height: 1.2; }
.hotline-label { font-size: 0.7rem; color: var(--muted); font-weight: 500; }
.hotline-number { font-size: 0.95rem; font-weight: 700; color: var(--accent); font-family: var(--font-heading); }
.btn-admin { font-size: 0.85rem; padding: 8px 16px; border-radius: 100px; }

/* Hero Light Styles with 3D Showroom Background */
.hero {
  position: relative;
  min-height: auto;
  padding: 85px 0 50px;
  background: #f8fafc;
  overflow: hidden;
}

.hero-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/public/images/hero-bg.webp') center bottom / cover no-repeat;
  z-index: 1;
  pointer-events: none;
}

.hero-bg-layer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.45) 80%, #ffffff 100%);
  pointer-events: none;
}

.hero::before { display: none; }
.hero-inner { grid-template-columns: 1.05fr 1fr 1.05fr; gap: 32px; position: relative; z-index: 2; }
.hero-badge { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 100px; font-size: 0.85rem; font-weight: 600; margin-bottom: 24px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); color: var(--accent); border: 1px solid rgba(226, 232, 240, 0.8); }
.hero h1 { font-size: clamp(28px, 4vw, 42px); color: var(--fg); }
.hero h1 .highlight { background: linear-gradient(135deg, var(--accent), #22c55e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-desc { color: var(--muted); font-size: 0.95rem; margin-bottom: 20px; }

.hero-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.hero-trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--fg); }
.hero-trust-item svg { color: var(--accent); flex-shrink: 0; }

.hero-phones { display: flex; align-items: center; justify-content: center; position: relative; }
.phone-showcase { display: flex; gap: -20px; align-items: center; justify-content: center; position: relative; }
/* 3D Hero Spatial Phone Showcase */
.hero-phones-spatial {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  min-height: 460px;
}

.hero-spatial-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 480px;
  height: 420px;
  background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.28) 0%, rgba(6, 182, 212, 0.2) 38%, rgba(37, 99, 235, 0.08) 65%, transparent 75%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 1;
  animation: auraPulse 6s ease-in-out infinite alternate;
}

.hero-spatial-pedestal-glow {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 48px;
  background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.55) 0%, rgba(6, 182, 212, 0.35) 45%, transparent 75%);
  filter: blur(16px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.hero-phone-stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-phone-img-wrap {
  position: relative;
  animation: heroPhoneFloat 6s ease-in-out infinite;
  transform-style: preserve-3d;
}

.hero-phone-img {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 24px 36px rgba(15, 23, 42, 0.16)) drop-shadow(0 10px 18px rgba(16, 185, 129, 0.18));
  user-select: none;
  pointer-events: none;
}

/* Floating Badges */
.floating-glass-badge {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
  border-radius: 100px;
  padding: 10px 20px 10px 12px;
  white-space: nowrap;
  pointer-events: auto;
  cursor: default;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-glass-badge:hover {
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.16), 0 6px 16px rgba(16, 185, 129, 0.14);
}

.floating-glass-badge .badge-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.floating-glass-badge .badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
}

.floating-glass-badge .badge-text strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.floating-glass-badge .badge-text span {
  font-size: 0.76rem;
  color: #64748b;
  font-weight: 500;
}

.badge-apple {
  top: 24%;
  left: -20px;
  animation: floatBadge1 5s ease-in-out infinite;
}

.badge-apple .badge-icon {
  background: #0f172a;
  color: #ffffff;
}

.badge-warranty {
  bottom: 14%;
  right: -10px;
  animation: floatBadge2 5.5s ease-in-out infinite 0.7s;
}

.badge-warranty .badge-icon {
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}

@keyframes heroPhoneFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(0.4deg);
  }
}

@keyframes floatBadge1 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(-1deg);
  }
}

@keyframes floatBadge2 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-7px) rotate(1deg);
  }
}

@keyframes auraPulse {
  0% {
    transform: translate(-50%, -52%) scale(0.95);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -52%) scale(1.08);
    opacity: 1;
  }
}

/* Booking Card in Hero */
.hero-booking-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.06);
  border: 1px solid var(--border);
  box-sizing: border-box;
  width: 100%;
}
.booking-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 12px;
}
.booking-card-header h2, .booking-card-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fg);
}
.booking-card-toggle {
  padding: 5px 12px;
  border-radius: 100px;
  background: #d1fae5;
  color: #047857;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.booking-card-tabs {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 100px;
  padding: 4px;
  margin-bottom: 20px;
}
.booking-card-tab {
  flex: 1;
  padding: 8px 12px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  border: none;
  background: transparent;
  color: #475569;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  white-space: nowrap;
}
.booking-card-tab.active {
  background: #ffffff;
  color: var(--accent);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  font-weight: 700;
}
.booking-card-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.booking-card-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.85rem;
  gap: 8px;
}
.booking-card-field .field-label {
  color: var(--muted);
  flex-shrink: 0;
}
.booking-card-field .field-value {
  font-weight: 600;
  color: var(--fg);
  text-align: right;
}
.booking-card-cta {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: #ffffff;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  margin-top: 16px;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.2);
}
.booking-card-cta:hover {
  background: var(--accent-dark);
}

/* Trust Bar */
.trust-bar { padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; }
.trust-bar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.trust-bar-item { display: flex; align-items: center; gap: 12px; }
.trust-bar-icon { font-size: 1.5rem; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; }
.trust-bar-text { display: flex; flex-direction: column; }
.trust-bar-text strong { font-size: 0.9rem; font-weight: 600; color: var(--fg); }
.trust-bar-text span { font-size: 0.8rem; color: var(--muted); }

/* Service Category Cards */
.service-categories { padding: 32px 0; }
.service-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.service-cat-card { display: flex; align-items: center; gap: 16px; padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: 16px; transition: var(--transition); cursor: pointer; text-decoration: none; color: inherit; }
.service-cat-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.service-cat-img { width: 80px; height: 80px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.service-cat-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.service-cat-info strong { font-size: 0.95rem; font-weight: 600; color: var(--fg); }
.service-cat-info span { font-size: 0.8rem; color: var(--muted); }
.service-cat-card svg { color: var(--muted); flex-shrink: 0; }

/* Featured Services */
.featured-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; }
.featured-label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.featured-header h2 { font-size: clamp(24px, 4vw, 36px); font-weight: 800; color: var(--fg); background: none; -webkit-text-fill-color: var(--fg); }
.featured-services-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.featured-service-item { display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: 14px; transition: var(--transition); }
.featured-service-item:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.featured-service-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.3rem; }
.featured-service-info { display: flex; flex-direction: column; gap: 2px; }
.featured-service-info strong { font-size: 0.85rem; font-weight: 600; color: var(--fg); }
.featured-service-info span { font-size: 0.75rem; color: var(--muted); }

/* ===== COMPLETE PRODUCTION STYLES FOR LOWER SECTIONS ===== */

/* 1. Ticker Band */
.ticker-band {
  background: linear-gradient(90deg, #ecfdf5 0%, #f0fdf4 100%);
  border-bottom: 1px solid #d1fae5;
  padding: 8px 0;
  overflow: hidden;
  font-size: 0.85rem;
}
.ticker-band .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ticker-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #10b981;
  color: #fff;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.78rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: blinkDot 1.5s infinite;
}
@keyframes blinkDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.ticker-track {
  display: flex;
  gap: 32px;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.ticker-track::-webkit-scrollbar { display: none; }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-weight: 500;
  font-size: 0.82rem;
}
.ticker-item strong {
  color: #047857;
  font-weight: 700;
  font-family: var(--font-heading);
}

/* 2. Interactive Price Calculator Section */
.calc-section {
  background: #ffffff;
  padding: 80px 0;
}
.calc-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.05);
}
.calc-selector-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.calc-pill {
  padding: 10px 20px;
  border-radius: 100px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.calc-pill:hover {
  border-color: #10b981;
  background: #ecfdf5;
  color: #047857;
}
.calc-pill.active {
  background: #047857;
  border-color: #047857;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}
.calc-models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.calc-model-btn {
  padding: 12px 16px;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #1e293b;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calc-model-btn:hover {
  border-color: #10b981;
  background: #f0fdf4;
}
.calc-model-btn.active {
  border-color: #10b981;
  background: #ecfdf5;
  color: #047857;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}
.calc-faults-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.calc-fault-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border-radius: 16px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.calc-fault-btn .icon {
  font-size: 1.6rem;
}
.calc-fault-btn .name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
}
.calc-fault-btn:hover {
  border-color: #10b981;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.calc-fault-btn.active {
  border-color: #10b981;
  background: #ecfdf5;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
}
.calc-fault-btn.active .name {
  color: #047857;
  font-weight: 700;
}
.price-results-box {
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px;
  margin-top: 24px;
}
.price-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.price-option-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.price-option-card:hover {
  border-color: #10b981;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}
.price-option-card.recommended {
  border-color: #047857;
  position: relative;
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.12);
}
.badge-rec {
  position: absolute;
  top: -12px;
  right: 16px;
  background: #047857;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.price-opt-title { font-size: 1rem; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.price-opt-spec { font-size: 0.8rem; color: #64748b; margin-bottom: 14px; line-height: 1.4; }
.price-opt-val { font-size: 1.4rem; font-weight: 800; color: #047857; font-family: var(--font-heading); margin-bottom: 12px; }
.price-opt-meta { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; color: #475569; margin-bottom: 18px; }
.price-opt-meta span { display: flex; align-items: center; gap: 6px; }
.btn-book-this {
  width: 100%;
  padding: 10px 16px;
  border-radius: 100px;
  background: #047857;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-book-this:hover {
  background: #047857;
}

/* Calc View Switcher & Master Screen Price Table */
.calc-view-switch {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.calc-tab-btn {
  padding: 10px 24px;
  border-radius: 100px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.calc-tab-btn:hover {
  border-color: #10b981;
  color: #047857;
  background: #f0fdf4;
}
.calc-tab-btn.active {
  background: #047857;
  border-color: #047857;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.25);
}
.full-price-table-container {
  overflow-x: hidden;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  width: 100%;
}
.screen-master-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.88rem;
}
.screen-master-table th {
  background: #f8fafc;
  padding: 12px 10px;
  font-weight: 700;
  color: #0f172a;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
  font-size: 0.84rem;
  letter-spacing: -0.2px;
}
.screen-master-table th:nth-child(2),
.screen-master-table th:nth-child(3),
.screen-master-table th:nth-child(4),
.screen-master-table th:nth-child(5),
.screen-master-table th:nth-child(6) {
  text-align: center;
}
.screen-master-table td {
  padding: 11px 8px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  white-space: nowrap;
  vertical-align: middle;
}
.screen-master-table td:nth-child(2),
.screen-master-table td:nth-child(3),
.screen-master-table td:nth-child(4),
.screen-master-table td:nth-child(5),
.screen-master-table td:nth-child(6) {
  text-align: center;
}
.screen-master-table tr:hover td {
  background: #f0fdf4;
}
.model-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.model-cell-click {
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 8px;
  transition: all 0.2s ease;
  user-select: none;
}
.model-cell-click:hover {
  background: #ecfdf5;
}
.model-cell-click:hover .model-name {
  color: #047857;
}
.model-name {
  font-weight: 700;
  color: #0f172a;
  font-size: 0.88rem;
  transition: color 0.2s;
  letter-spacing: -0.2px;
}
.series-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: #f1f5f9;
  color: #047857;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid #e2e8f0;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}
.model-calc-hint {
  display: none;
}
.price-cell-click {
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  user-select: none;
  border-radius: 8px;
}
.price-cell-click:hover {
  background: #e6f9f0 !important;
}
.price-cell-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.cell-book-badge {
  display: none;
}
.price-tag-val {
  font-weight: 700;
  color: #047857;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  transition: transform 0.15s ease;
}
.price-cell-click:hover .price-tag-val {
  transform: scale(1.05);
}
.price-tag-zin {
  font-weight: 800;
  color: #047857;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  background: #ecfdf5;
  padding: 3px 8px;
  border-radius: 7px;
  display: inline-block;
  transition: all 0.15s ease;
}
.price-cell-click:hover .price-tag-zin {
  background: #d1fae5;
  transform: scale(1.05);
}
.price-tag-none {
  color: #64748b;
  font-weight: 500;
}
.th-zin-title {
  display: inline-block;
  vertical-align: middle;
}
.th-rec-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 1px 6px;
  border-radius: 100px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.2px;
}
.btn-table-book {
  padding: 6px 12px;
  border-radius: 100px;
  background: #047857;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.78rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-table-book:hover {
  background: #047857;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.25);
}
.featured-service-item {
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.featured-service-item:hover {
  transform: translateY(-4px);
  border-color: #10b981 !important;
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.12) !important;
}

/* 3. Reasons Grid (Why Choose TRIPHONE) */
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.reason-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.reason-card:hover {
  border-color: #10b981;
  box-shadow: 0 12px 36px rgba(16, 185, 129, 0.08);
  transform: translateY(-4px);
}
.reason-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #ecfdf5;
  color: #047857;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}
.reason-card:hover .reason-icon {
  background: #047857;
  color: #ffffff;
  transform: scale(1.08);
}
.reason-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}
.reason-card p {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.6;
}

/* 4. Process Timeline (Quy trình 4 bước) */
.process-new-header {
  text-align: center;
  margin-bottom: 50px;
}
.process-badge-pill {
  display: inline-block;
  padding: 6px 16px;
  background: var(--accent-light, #e8f5f0);
  color: var(--accent, #047857);
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 100px;
  margin-bottom: 16px;
  letter-spacing: 1px;
}
.process-cards-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 40px;
  z-index: 1;
}
.process-bg-line {
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 2px;
  background: #e2e8f0;
  z-index: -1;
  transform: translateY(-50%);
}
.process-step-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px 20px;
  width: 23%;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,0.02);
}
.process-step-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}
.process-step-card.active {
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.12);
  background: linear-gradient(to bottom, #ffffff, #f0fdf4);
}
.proc-num {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--muted);
  font-size: 0.85rem;
  transition: all 0.3s ease;
}
.process-step-card.active .proc-num {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.proc-img-box {
  width: 140px;
  height: 140px;
  margin: 16px auto;
  border-radius: 50%;
  overflow: hidden;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.proc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.process-step-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 8px;
}
.process-step-card p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.proc-arrow {
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-detail-panel {
  background: #fff;
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 40px;
  display: none;
  box-shadow: 0 12px 40px rgba(16, 185, 129, 0.08);
  animation: fadeInDown 0.3s ease forwards;
}
.process-detail-panel.show {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.proc-det-content h4 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 16px;
}
.proc-det-content p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 24px;
}
.proc-det-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.proc-det-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: var(--fg);
}
.proc-det-list li svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.proc-det-image {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.proc-det-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.process-trust-bar {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid #f1f5f9;
}
.proc-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.proc-trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-light, #e8f5f0);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.proc-trust-text {
  display: flex;
  flex-direction: column;
}
.proc-trust-text strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--fg);
}
.proc-trust-text span {
  font-size: 0.8rem;
  color: var(--muted);
}

/* 5. Booking Form Section */
.booking-form-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.form-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 40px;
}
.form-header h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
}
.form-subtitle {
  color: #64748b;
  font-size: 1rem;
}
.booking-form {
  max-width: 760px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-group.full-width {
  grid-column: 1 / -1;
}
.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}
.form-label .required {
  color: #ef4444;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: #10b981;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}
.form-error {
  color: #ef4444;
  font-size: 0.8rem;
  margin-top: 4px;
  display: none;
}
.time-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.time-option {
  position: relative;
  cursor: pointer;
}
.time-option input {
  position: absolute;
  opacity: 0;
}
.time-option .option-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  transition: all 0.2s ease;
}
.time-option input:checked + .option-content {
  border-color: #047857;
  background: #ecfdf5;
  color: #047857;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}
.option-title {
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  color: #1e293b;
}
.option-detail {
  display: block;
  font-size: 0.72rem;
  color: #64748b;
}
.fee-badge {
  color: #c2410c;
  font-weight: 600;
}
.form-actions {
  margin-top: 24px;
}
.form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 16px;
}

/* 6. Reviews Section */
.reviews-section {
  padding: 80px 0;
  background: #ffffff;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.review-card:hover {
  border-color: #10b981;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}
.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.review-stars {
  color: #f59e0b;
  font-size: 1rem;
  letter-spacing: 2px;
}
.review-service-tag {
  background: #ecfdf5;
  color: #047857;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
}
.review-text {
  font-size: 0.92rem;
  color: #334155;
  line-height: 1.6;
  margin-bottom: 20px;
  font-style: italic;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #047857);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}
.author-info strong {
  display: block;
  font-size: 0.9rem;
  color: #0f172a;
}
.author-info span {
  display: block;
  font-size: 0.78rem;
  color: #64748b;
}

/* 7. Comparison Table */
.comparison-section {
  padding: 80px 0;
  background: #f8fafc;
}
.comparison-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.04);
}
.comp-table {
  width: 100%;
  border-collapse: collapse;
}
.comp-table th, .comp-table td {
  padding: 18px 24px;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
}
.comp-table th {
  background: #f8fafc;
  font-weight: 700;
  font-size: 0.95rem;
  color: #0f172a;
}
.comp-table th.triphone-col {
  background: #ecfdf5;
  color: #047857;
  font-size: 1.05rem;
}
.comp-table td.triphone-cell {
  background: #f0fdf4;
  font-weight: 600;
  color: #047857;
}

/* 8. FAQ Accordion */
.faq-grid {
  display: grid;
  gap: 16px;
  max-width: 860px;
  margin: 0 auto;
}
.faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 24px;
  transition: all 0.2s ease;
}
.faq-item:hover {
  border-color: #10b981;
  box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}
.faq-item summary {
  font-weight: 700;
  font-size: 1.02rem;
  color: #0f172a;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 400;
  color: #10b981;
  transition: transform 0.2s;
}
.faq-item[open] summary::after {
  content: '−';
  transform: rotate(180deg);
}
.faq-item p {
  margin-top: 14px;
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.65;
}

/* 9. Contact Section */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 36px;
}
.contact-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
  transition: all 0.2s;
}
.contact-card:hover {
  border-color: #10b981;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}
.contact-card .contact-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #ecfdf5;
  color: #047857;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}
.contact-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #047857;
  display: block;
  margin-bottom: 4px;
}
.contact-note {
  font-size: 0.8rem;
  color: #64748b;
}

/* 10. Floating Speed Dial Widget */
.floating-speed-dial {
  position: fixed;
  bottom: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 999;
}
.dial-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #ffffff;
  text-decoration: none;
}
.dial-btn:hover {
  transform: scale(1.1);
}
.dial-hotline {
  background: linear-gradient(135deg, #10b981, #047857);
  animation: hotlinePulse 2s infinite;
}
.dial-zalo {
  background: #0068ff;
}
.dial-tele {
  background: linear-gradient(135deg, #0088cc, #0284c7);
}
.dial-top {
  background: #0f172a;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.dial-top.visible {
  opacity: 1;
  visibility: visible;
}
@keyframes hotlinePulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .hero-content { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto; }
  .hero-trust-row { justify-content: center; }
  .hero-ctas { justify-content: center; }
  .hero-phones-spatial { max-width: 460px; width: 100%; min-height: 380px; margin: 0 auto; }
  .hero-booking-card { max-width: 500px; width: 100%; margin: 0 auto; text-align: left; }
  .trust-bar-grid { grid-template-columns: repeat(2, 1fr); }
  .service-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-services-grid { grid-template-columns: repeat(3, 1fr); }
  .featured-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .calc-faults-grid { grid-template-columns: repeat(3, 1fr); }
  .calc-prices-grid { grid-template-columns: 1fr; }
  .reasons-grid { grid-template-columns: repeat(2, 1fr); }
  .process-cards-container { flex-wrap: wrap; justify-content: center; gap: 24px; }
  .process-step-card { width: calc(50% - 12px); margin-bottom: 24px; }
  .process-bg-line { display: none; }
  .proc-arrow { display: none; }
  .reviews-grid { grid-template-columns: 1fr; }
  .screen-master-table { font-size: 0.84rem; }
  .screen-master-table th { padding: 10px 6px; font-size: 0.8rem; }
  .screen-master-table td { padding: 10px 5px; }
  .model-name { font-size: 0.84rem; }
  .series-badge { font-size: 0.6rem; padding: 1px 4px; }
  .price-tag-val, .price-tag-zin { font-size: 0.82rem; }
  .btn-table-book { padding: 5px 8px; font-size: 0.74rem; }
  .th-rec-badge { display: none; }
}

@media (max-width: 768px) {
  .full-price-table-container {
    overflow-x: hidden;
  }
  .screen-master-table {
    min-width: 0;
    table-layout: auto;
    display: block;
    width: 100%;
  }
  .screen-master-table thead {
    display: none;
  }
  .screen-master-table tbody, .screen-master-table tr {
    display: block;
    width: 100%;
  }
  .screen-master-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    background: #fff;
  }
  .screen-master-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
    text-align: right;
  }
  .screen-master-table td:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .screen-master-table td::before {
    font-weight: 500;
    color: var(--muted);
  }
  .screen-master-table td:nth-child(2)::before { content: "Phổ thông/GX"; }
  .screen-master-table td:nth-child(3)::before { content: "JK/OLED"; }
  .screen-master-table td:nth-child(4)::before { content: "Soft OLED"; }
  .screen-master-table td:nth-child(5)::before { content: "Zin bóc máy"; font-weight: 700; color: var(--accent); }
  
  .screen-master-table td:first-child {
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
    margin: -12px -12px 8px -12px;
    padding: 12px;
    border-radius: 12px 12px 0 0;
    width: calc(100% + 24px);
    justify-content: flex-start;
  }
  .screen-master-table td:first-child::before { display: none; }
  .price-cell-wrap { justify-content: flex-end; width: auto; }
  .nav-links { position: fixed; top: 72px; left: 0; right: 0; background: var(--bg); flex-direction: column; padding: 20px; gap: 8px; border-bottom: 1px solid var(--border); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: var(--transition); box-shadow: var(--shadow); }
  .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; }
  .menu-toggle { display: flex; }
  .hotline { display: none; }
  .nav-pill { display: none; }
  .hero-phones-spatial { min-height: 320px; }
  .hero-phone-stage { max-width: 320px; }
  .floating-glass-badge { font-size: 0.75rem; padding: 6px 12px; }
  .step:not(:last-child)::after { display: none; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-grid a { display: inline-block; }
  .filter-bar { flex-direction: column; }
  .filter-bar select, .filter-bar input { width: 100%; }
  .device-list { grid-template-columns: 1fr; }
  .trust-bar-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .service-cat-grid { grid-template-columns: 1fr; }
  .featured-services-grid { grid-template-columns: repeat(2, 1fr); }
  .calc-faults-grid { grid-template-columns: repeat(2, 1fr); }
  .reasons-grid { grid-template-columns: 1fr; }
  .process-detail-panel.show { grid-template-columns: 1fr; gap: 24px; }
  .process-trust-bar { flex-direction: column; gap: 16px; align-items: flex-start; padding-top: 24px; }
  .comp-table { font-size: 0.85rem; }
  .comp-table th, .comp-table td { padding: 10px 8px; }
}

@media (max-width: 480px) {
  .btn-lg { padding: 14px 20px; font-size: 0.95rem; }
  .hero { padding-top: 85px; }
  .hero h1 { font-size: 2rem; }
  .hero-ctas { flex-direction: column; width: 100%; gap: 10px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-booking-card { padding: 20px 16px; border-radius: 18px; }
  .booking-card-tabs { flex-direction: column; border-radius: 14px; padding: 6px; }
  .booking-card-tab { text-align: center; }
  .booking-card-field { font-size: 0.82rem; }
  .featured-services-grid { grid-template-columns: 1fr 1fr; }
  .trust-bar-grid { grid-template-columns: 1fr; }
  .calc-faults-grid { grid-template-columns: 1fr; }
  .floating-glass-badge { display: none; }
  .process-step-card { width: 100%; }
}

/* ===== POPUP MODAL: ĐẶT LỊCH SỬA CHỮA TẬN NHÀ (THEO THIẾT KẾ ẢNH) ===== */
.modal-booking {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}
.modal-booking.show {
  opacity: 1;
  visibility: visible;
}
.modal-booking .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-booking-content {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border-radius: 28px;
  max-width: 960px;
  width: 95%;
  max-height: 92vh;
  box-shadow: 0 25px 65px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(226, 232, 240, 0.8);
  display: grid;
  grid-template-columns: 370px 1fr;
  overflow: hidden;
  transform: scale(0.94) translateY(12px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-booking.show .modal-booking-content {
  transform: scale(1) translateY(0);
}
.modal-booking .modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}
.modal-booking .modal-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Modal Left Column (Mint Visual & Perks) */
.modal-booking-left {
  background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 100%);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #d1fae5;
  position: relative;
  overflow: hidden;
}
.modal-booking-left::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.modal-booking-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 8px;
  font-family: var(--font-heading);
}
.modal-booking-title .text-mint {
  color: #047857;
  display: block;
}
.modal-booking-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 12px;
}
.modal-booking-photo-wrap {
  width: calc(100% + 20px);
  margin: 8px -10px 18px;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}
.modal-booking-photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 20px;
  -webkit-mask-image: radial-gradient(ellipse 94% 88% at 50% 50%, black 65%, transparent 100%);
  mask-image: radial-gradient(ellipse 94% 88% at 50% 50%, black 65%, transparent 100%);
  filter: drop-shadow(0 10px 25px rgba(5, 150, 105, 0.15));
}
.modal-booking-perks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-perk-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-perk-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #d1fae5;
  color: #047857;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-perk-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.modal-perk-text strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}
.modal-perk-text span {
  font-size: 0.78rem;
  color: #64748b;
}

/* Modal Right Column (Form) */
.modal-booking-right {
  padding: 34px 36px 30px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 92vh;
}
.modal-booking-header {
  margin-bottom: 20px;
  padding-right: 40px;
}
.modal-booking-header h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
  font-family: var(--font-heading);
}
.modal-booking-header p {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0;
}
.modal-form-grid {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.modal-form-row.col-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.modal-field {
  display: flex;
  flex-direction: column;
}
.modal-field label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.modal-field label .required {
  color: #ef4444;
  font-weight: 700;
}
.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}
.input-with-icon .field-icon {
  position: absolute;
  left: 13px;
  color: #64748b;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}
.input-with-icon .textarea-icon {
  top: 11px;
}
.modal-input, .modal-select, .modal-textarea {
  width: 100%;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px 10px 38px;
  font-size: 0.88rem;
  color: #0f172a;
  background: #ffffff;
  transition: all 0.2s ease;
  font-family: var(--font-body);
}
.modal-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.modal-textarea {
  padding-top: 9px;
  resize: vertical;
  min-height: 64px;
}
.modal-input:focus, .modal-select:focus, .modal-textarea:focus {
  border-color: #047857;
  outline: none;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
}
.modal-input::placeholder, .modal-textarea::placeholder {
  color: #64748b;
  font-size: 0.85rem;
}

/* Modal Live Price Card (Báo giá dự kiến trực quan) */
.modal-price-card {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  border: 1.5px solid #a7f3d0;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 4px 0 2px;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08);
  transition: all 0.25s ease;
}
.modal-price-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.modal-price-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #047857;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  width: fit-content;
  letter-spacing: 0.5px;
}
.price-pulse-dot {
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  display: inline-block;
  animation: pulseDot 1.5s infinite;
}
@keyframes pulseDot {
  0% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.4; transform: scale(0.8); }
}
.modal-price-detail {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}
.modal-price-detail span {
  color: #047857;
  font-weight: 600;
}
.modal-price-meta {
  font-size: 0.74rem;
  color: #475569;
  line-height: 1.3;
}
.modal-price-amount-box {
  text-align: right;
  flex-shrink: 0;
}
.modal-price-amount {
  font-size: 1.35rem;
  font-weight: 800;
  color: #047857;
  font-family: var(--font-heading);
  line-height: 1.1;
}
.modal-price-tag {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 500;
  margin-top: 2px;
}

.btn-modal-primary {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  background: #047857;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.25);
  transition: all 0.2s ease;
}
.btn-modal-primary:hover {
  background: #047857;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.35);
}
.btn-modal-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
.modal-form-footer-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: #64748b;
}

/* Success view inside modal */
.modal-booking-success-view {
  padding: 30px 10px;
  text-align: center;
  animation: fadeIn 0.3s ease;
}
.modal-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #d1fae5;
  color: #047857;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.modal-booking-success-view h4 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}
.modal-booking-success-view p {
  color: #475569;
  font-size: 0.9rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .modal-booking-content {
    grid-template-columns: 1fr;
    max-height: 90vh;
  }
  .modal-booking-left {
    padding: 24px 20px;
    border-right: none;
    border-bottom: 1px solid #d1fae5;
  }
  .modal-booking-photo-wrap {
    display: none;
  }
  .modal-booking-right {
    padding: 24px 20px;
  }
  .modal-form-row.col-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
/* ===== NEW SECTIONS STYLES ===== */

/* Tech Products Grid */
.tech-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.tech-product-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--border);
  padding: 20px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tech-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
  border-color: var(--accent);
}
.product-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #ef4444;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  z-index: 2;
}
.product-img-box {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.product-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.tech-product-card:hover .product-img {
  transform: scale(1.05);
}
.product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-info h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--fg);
  line-height: 1.4;
}
.product-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.product-tags span {
  font-size: 0.7rem;
  padding: 4px 8px;
  background: var(--bg-elevated);
  border-radius: 6px;
  color: var(--muted);
  font-weight: 600;
}
.product-price {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 16px;
  margin-top: auto;
}
.product-price del {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
  margin-left: 6px;
}
.product-buy-btn {
  width: 100%;
  border-radius: 12px;
  padding: 10px;
  font-weight: 600;
}

/* Trade In Section */
.tradein-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.tradein-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tradein-benefits li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: var(--fg);
  font-weight: 600;
}
.tradein-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.tradein-glass-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.4));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 32px;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 30px 60px rgba(16, 185, 129, 0.15), inset 0 2px 10px rgba(255, 255, 255, 0.8);
  position: relative;
  width: 100%;
  max-width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tradein-scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 10px var(--accent);
  animation: scan 3s infinite linear;
  z-index: 10;
}
@keyframes scan {
  0% { top: 10%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}
.tradein-price-float {
  position: absolute;
  bottom: 20px;
  right: -20px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  padding: 16px 24px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,1);
  z-index: 5;
  transform: translateY(0);
  transition: transform 0.3s ease;
}
.tradein-visual:hover .tradein-price-float {
  transform: translateY(-5px);
}

/* Bento Grid Accessories */
.accessories-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 240px);
  gap: 20px;
}
.bento-item {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  background: #f8fafc;
}
.bento-item:hover {
  transform: translateY(-4px);
}
.bento-large {
  grid-column: span 2;
  grid-row: span 2;
}
.bento-small {
  grid-column: span 1;
  grid-row: span 1;
}
.bento-wide {
  grid-column: span 2;
  grid-row: span 1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.bento-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  display: block;
}
.bento-content h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--fg);
}
.bento-large .bento-content h3 {
  font-size: 1.8rem;
}
.bento-content p {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 12px;
}
.bento-price {
  font-weight: 700;
  color: var(--accent);
  font-size: 1.1rem;
}
.bento-img-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  min-height: 0;
}
.bento-large .bento-img-wrapper {
  margin-top: 24px;
}
.bento-img-right {
  margin-top: 0;
  margin-left: 16px;
  justify-content: flex-end;
}
.bento-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .tech-products-grid { grid-template-columns: repeat(2, 1fr); }
  .tradein-container { grid-template-columns: 1fr; text-align: center; }
  .tradein-benefits { align-items: center; }
  .accessories-bento-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .bento-wide { grid-column: span 2; }
  .bento-large { grid-column: span 2; min-height: 300px; }
}

@media (max-width: 768px) {
  .tech-products-grid { grid-template-columns: 1fr; }
  .accessories-bento-grid { grid-template-columns: 1fr; }
  .bento-wide, .bento-large { grid-column: span 1; }
  .bento-wide { flex-direction: column; align-items: flex-start; }
  .bento-img-right { margin-left: 0; margin-top: 16px; justify-content: center; }
}

/* Catalog Modal */
.catalog-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.catalog-modal.show {
  opacity: 1;
  visibility: visible;
}
.catalog-modal-content {
  background: #f8fafc;
  width: 100%;
  max-width: 1200px;
  height: 90vh;
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -20px 60px rgba(0,0,0,0.1);
}
.catalog-modal.show .catalog-modal-content {
  transform: translateY(0);
}
.catalog-header {
  padding: 24px 32px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  border-radius: 24px 24px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}
.catalog-close-btn {
  background: #f1f5f9;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}
.catalog-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.catalog-filters {
  padding: 16px 32px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.catalog-filters::-webkit-scrollbar { display: none; }
.catalog-filter {
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: #475569;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
.catalog-filter:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.catalog-filter.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
.catalog-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
}
.catalog-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
@media (max-width: 768px) {
  .catalog-modal-content { height: 95vh; }
  .catalog-header { padding: 16px 20px; }
  .catalog-filters { padding: 12px 20px; }
  .catalog-body { padding: 20px; }
}
/* ===== VALUATION MODAL STYLES ===== */
.valuation-modal {
  display: none; 
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.valuation-modal.show {
  display: flex;
}
.valuation-content {
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 48px rgba(0,0,0,0.12);
  animation: modalPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalPopIn {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.valuation-close {
  position: absolute;
  top: 20px; right: 20px;
  background: none; border: none;
  font-size: 1.2rem;
  color: #64748b;
  cursor: pointer;
  z-index: 10;
  padding: 8px;
}
.valuation-close:hover {
  color: #0f172a;
}
.valuation-header {
  padding: 24px 32px 20px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 16px;
}
.valuation-icon {
  width: 40px; height: 40px;
  background: #ecfdf5;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #10b981;
}
.valuation-header-text h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}
.valuation-header-text p {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0;
}
.valuation-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
}
.val-form {
  padding: 32px;
}
@media (max-width: 768px) {
  .valuation-body { grid-template-columns: 1fr; }
}

/* Left Column (Form) */
.val-section { margin-bottom: 28px; }
.val-section-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: #0f172a; margin-bottom: 16px; font-size: 1.05rem;
}
.val-section-title svg { color: #0f172a; }
.val-form-group {
  display: flex; align-items: center;
  margin-bottom: 12px;
  justify-content: space-between;
}
.val-form-group label {
  font-size: 0.85rem; color: #64748b; flex: 0 0 130px;
}
.val-select {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  font-size: 0.9rem; color: #0f172a;
  outline: none; transition: all 0.2s;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}
.val-select:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.1); }

.val-upload-box:hover {
  border-color: #10b981;
}
.val-upload-box {
  cursor: pointer;
  transition: border-color 0.2s;
  border: 1.5px dashed #cbd5e1;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.val-upload-info {
  display: flex; align-items: center; gap: 12px;
}
.val-upload-text { text-align: left; }
.val-upload-text strong { display: block; font-size: 0.85rem; color: #0f172a; }
.val-upload-text span { font-size: 0.75rem; color: #64748b; }
.val-upload-thumbs {
  display: flex; gap: 8px; align-items: center;
}
.val-upload-thumb {
  width: 36px; height: 36px; border-radius: 4px; border: 1px solid #e2e8f0;
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.val-upload-add {
  width: 36px; height: 36px; border-radius: 4px; border: 1px dashed #cbd5e1; display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* Right Column (Result) */
.val-result {
  padding: 24px;
}
.val-result-card {
  background: #f0fdf4;
  border-radius: 16px;
  padding: 24px;
  height: 100%;
}
.val-result-phone {
  display: flex; align-items: center; gap: 16px; margin-bottom: 24px;
}
.val-result-phone img { width: 64px; height: 64px; object-fit: contain; }
.val-result-info h3 { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.val-result-badge {
  display: inline-block; padding: 4px 10px; background: #d1fae5; color: #047857; font-size: 0.7rem; font-weight: 700; border-radius: 100px; margin-bottom: 8px;
}
.val-result-price {
  font-size: 1.4rem; font-weight: 800; color: #10b981; line-height: 1.2;
}
.val-result-details { margin-bottom: 24px; flex: 1; }
.val-result-details h4 {
  font-size: 0.9rem; font-weight: 700; color: #0f172a; margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}
.val-result-table { width: 100%; border-collapse: collapse; }
.val-result-table td { padding: 8px 0; font-size: 0.8rem; }
.val-result-table td:first-child { color: #64748b; }
.val-result-table td:last-child { color: #0f172a; font-weight: 500; text-align: right; }

.val-warning {
  background: #fef9c3; border-radius: 8px; padding: 12px; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 24px;
}
.val-warning-icon { color: #d97706; flex-shrink: 0; }
.val-warning p { font-size: 0.75rem; color: #b45309; margin: 0; line-height: 1.4; }

.btn-val-submit {
  width: 100%; padding: 16px; background: #0f766e; color: #fff; border: none; border-radius: 20px; cursor: pointer; transition: all 0.2s;
}
.btn-val-submit:hover { background: #115e59; transform: translateY(-2px); }
.btn-val-submit-inner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.btn-val-submit-text { display: flex; flex-direction: column; align-items: flex-start; }
.btn-val-submit-text strong { font-size: 1rem; font-weight: 700; }
.btn-val-submit-text span { font-size: 0.75rem; font-weight: 400; opacity: 0.9; }


/* ===== Responsive fixes ===== */

/* Nhãn "Hotline:", "Địa chỉ:"… trong footer không bị .footer-grid strong phóng to */
.footer-grid address strong { display: inline; font-size: inherit; margin: 0; }

/* Cột grid không bị nội dung dài (số điện thoại, địa chỉ) kéo tràn khung */
.contact-grid > *, .contact-card > div, .footer-grid > * { min-width: 0; }
.contact-card, .footer-grid address { overflow-wrap: anywhere; }

/* Ô chọn khung giờ trong form đặt lịch không tràn trên màn hình hẹp */
.time-options, .time-option, .time-option .option-content, .time-option .option-info { min-width: 0; }
.time-option .option-info span { overflow-wrap: anywhere; }

/* Vùng bấm tối thiểu ~40px cho các nút/link nhỏ */
.booking-card-tab { min-height: 40px; }
a.contact-value { display: inline-block; padding: 8px 0; }
.btn-link { padding: 10px 6px; }

/* Ô nhập trong popup đăng nhập / đăng ký (.form-group chưa có style) */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 12px;
  font: inherit; font-size: 1rem; background: var(--color-card); color: var(--color-navy);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-dim); }

@media (max-width: 768px) {
  /* Chữ nhãn tối thiểu ~11.5px trên điện thoại (font gốc mobile là 14px nên 0.7rem chỉ còn 9.8px) */
  .product-tags span, .product-badge, .bento-tag, .review-service-tag, .badge-rec,
  .option-detail, .fee-badge, .modal-price-tag, .modal-price-meta, .booking-card-toggle, .ticker-label { font-size: 0.82rem; }
  #tickerTrack .ticker-item, #tickerTrack .ticker-item * { font-size: 0.82rem !important; }
  /* Link "Xem chi tiết / Đọc bài viết" dễ bấm hơn */
  #news a[href*="news.html#"] { padding: 10px 0; }
}

/* ===== Header khi thu phóng (zoom) / màn hình trung bình =====
   7 mục menu + logo + hotline + nút cần ~1300px trên một hàng.
   Trước đây menu chỉ thu gọn ở 768px nên ở 780-1300px chữ bị gãy dòng và tràn. */
.nav-links a, .logo-subtitle, .hotline-info span, .btn-admin { white-space: nowrap; }
.logo, .nav-cta { flex-shrink: 0; }
.nav-menu { min-width: 0; }

/* Menu nằm giữa logo và cụm hotline, phần trống chia đều 2 bên; khoảng cách mục gọn ở mọi độ rộng
   (trước đây >1440px giãn rộng hơn khung trang nên đè lên số điện thoại) */
@media (min-width: 1101px) {
  .nav-menu { flex: 1 1 auto; display: flex; justify-content: center; margin: 0 clamp(8px, 1.5vw, 24px); }
  .nav-links { gap: clamp(2px, 0.4vw, 6px); }
  .nav-links a { padding: 8px clamp(10px, 0.9vw, 14px); }
}
@media (max-width: 1200px) {
  .hotline-info { display: none; } /* chỉ giữ biểu tượng điện thoại */
}
/* Đã đăng nhập (Header.updateAuthUI): số hotline + nút tên người dùng cũng thu gọn, không dính vào mục menu */
.nav-cta { margin-left: 12px; }
.nav-cta .hotline-text { white-space: nowrap; }
.nav-cta .user-btn span { display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
@media (max-width: 1280px) {
  .nav-cta .hotline-text { display: none; }
  .nav-cta .hotline:has(.hotline-text) { width: 40px; height: 40px; justify-content: center; border-radius: 50%; background: #ecfdf5; color: var(--accent); }
  .nav-cta .user-btn { padding: 8px 12px !important; }
  .nav-cta .user-btn span { max-width: 110px; }
}
@media (max-width: 1100px) {
  .nav-links { position: fixed; top: 72px; left: 0; right: 0; background: var(--bg); flex-direction: column; align-items: stretch; padding: 20px; gap: 8px; border-bottom: 1px solid var(--border); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: var(--transition); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08); max-height: calc(100vh - 72px); overflow-y: auto; }
  .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav-links a { display: flex; align-items: center; min-height: 44px; padding: 10px 16px; }
  .menu-toggle { display: flex; }
  .nav-pill { display: none; }
}
@media (max-width: 480px) {
  /* Điện thoại nhỏ: nhường chỗ cho nút menu */
  .logo-subtitle { display: none; }
  .nav-cta { gap: 8px; }
  .btn-admin { font-size: 0; gap: 0; padding: 0; width: 44px; height: 44px; justify-content: center; } /* chỉ còn biểu tượng, chữ vẫn có cho trình đọc màn hình */
}

/* ===== Popup chi tiết sản phẩm ===== */
.pd-modal[hidden] { display: none; }
.pd-modal { position: fixed; inset: 0; z-index: 3500; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pd-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.2s ease; }
.pd-dialog { position: relative; width: 100%; max-width: 860px; max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25); transform: translateY(16px) scale(0.98); opacity: 0; transition: transform 0.25s ease, opacity 0.2s ease; }
.pd-modal.show .pd-backdrop { opacity: 1; }
.pd-modal.show .pd-dialog { transform: none; opacity: 1; }
.pd-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e2e8f0; background: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #0f172a; }
.pd-close:hover { background: #f1f5f9; }
.pd-media { position: relative; background: linear-gradient(160deg, #f8fafc, #ecfdf5); display: flex; align-items: center; justify-content: center; padding: 32px; min-height: 280px; }
.pd-media img { max-width: 100%; max-height: 340px; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(15, 23, 42, 0.15)); }
.pd-badge { position: absolute; top: 16px; left: 16px; background: #ef4444; color: #fff; font-size: 0.78rem; font-weight: 800; padding: 4px 12px; border-radius: 100px; text-transform: uppercase; }
.pd-body { padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.pd-body h2 { font-size: 1.45rem; color: #0f172a; margin: 0; padding-right: 36px; }
.pd-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-tags span { background: #f1f5f9; color: #334155; font-size: 0.82rem; padding: 4px 12px; border-radius: 100px; }
.pd-price { font-size: 1.7rem; font-weight: 800; color: #047857; }
.pd-price del { font-size: 1rem; font-weight: 500; color: #64748b; margin-left: 8px; }
.pd-perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 0.9rem; color: #475569; }
.pd-perks li::before { content: '✓'; color: #10b981; font-weight: 800; margin-right: 8px; }
.pd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-actions .btn { justify-content: center; min-height: 46px; }
.pd-hold { border-top: 1px dashed #e2e8f0; padding-top: 14px; display: grid; gap: 10px; }
.pd-hold-title { margin: 0; font-size: 0.88rem; color: #475569; font-weight: 600; }
.pd-hold-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-hold input { min-height: 44px; padding: 10px 14px; border: 1px solid #cbd5e1; border-radius: 12px; font: inherit; min-width: 0; }
.pd-hold input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15); }
.pd-hold-btn { min-height: 46px; justify-content: center; }
.catalog-empty { text-align: center; color: #64748b; padding: 32px 16px; }
@media (max-width: 720px) {
  .pd-modal { align-items: flex-end; padding: 0; }
  .pd-dialog { grid-template-columns: minmax(0, 1fr); border-radius: 24px 24px 0 0; max-height: 92vh; }
  .pd-media { min-height: 200px; padding: 24px; }
  .pd-media img { max-height: 200px; }
  .pd-body { padding: 20px 16px 24px; }
  .pd-hold-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pd-backdrop, .pd-dialog { transition: none; } }

/* Popup đăng nhập / đăng ký */
#loginModal .modal-overlay, #registerModal .modal-overlay { position: absolute; inset: 0; }
#loginModal .modal-content, #registerModal .modal-content { max-width: 420px; }
#loginModal h2, #registerModal h2 { margin: 0 0 20px; color: var(--color-navy); }
.btn-full { width: 100%; justify-content: center; min-height: 48px; }
.auth-switch { margin: 16px 0 0; text-align: center; color: var(--color-muted); font-size: 0.92rem; }
.btn-link { background: none; border: none; color: var(--color-primary); font-weight: 700; cursor: pointer; font: inherit; }

/* ===== Mã đơn sau khi đặt lịch ===== */
.order-code-note { margin: 12px auto 0; padding: 12px 16px; max-width: 420px; background: #f0fdf4; border: 1.5px dashed #34d399; border-radius: 14px; color: #065f46; text-align: center; }
.order-code-note strong { font-size: 1.15rem; letter-spacing: 1px; }
.order-code-note span { font-size: 0.82rem; color: #047857; }

/* ===== Tra cứu bảo hành ===== */
.warranty-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; background: linear-gradient(135deg, #ecfdf5 0%, #f0f9ff 100%); border: 1px solid #d1fae5; border-radius: 28px; padding: 40px; }
.section-eyebrow { display: inline-block; font-size: 0.82rem; font-weight: 700; color: #047857; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.warranty-intro h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: #0f172a; margin: 0 0 12px; }
.warranty-intro p { color: #475569; line-height: 1.7; margin: 0 0 16px; }
.warranty-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: #334155; }
.warranty-points li::before { content: '✓'; color: #10b981; font-weight: 800; margin-right: 8px; }
.warranty-points a { color: #047857; font-weight: 700; }
.warranty-box { background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06); }
.warranty-form { display: grid; gap: 8px; }
.warranty-form label { font-weight: 600; font-size: 0.9rem; color: #0f172a; margin-top: 6px; }
.warranty-form input { min-height: 46px; padding: 10px 14px; border: 1.5px solid #cbd5e1; border-radius: 12px; font: inherit; }
.warranty-form input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15); }
.warranty-form .btn { margin-top: 10px; min-height: 48px; justify-content: center; }
.warranty-result { margin-top: 20px; border-top: 1px solid #e2e8f0; padding-top: 18px; display: grid; gap: 14px; }
.wl-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.wl-label { display: block; font-size: 0.78rem; color: #64748b; }
.wl-status { padding: 4px 12px; border-radius: 100px; font-size: 0.8rem; font-weight: 700; background: #e0f2fe; color: #0369a1; }
.wl-status-completed, .wl-status-paid { background: #dcfce7; color: #047857; }
.wl-status-cancelled { background: #fee2e2; color: #b91c1c; }
.wl-warranty { padding: 12px 14px; border-radius: 12px; font-size: 0.92rem; }
.wl-active { background: #dcfce7; color: #065f46; }
.wl-expired { background: #fee2e2; color: #991b1b; }
.wl-pending { background: #fef9c3; color: #854d0e; }
.wl-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; }
.wl-meta dt { font-size: 0.78rem; color: #64748b; }
.wl-meta dd { margin: 2px 0 0; font-weight: 600; color: #0f172a; font-size: 0.9rem; overflow-wrap: anywhere; }
.wl-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid #a7f3d0; display: grid; gap: 8px; font-size: 0.88rem; color: #334155; }
.wl-timeline span { display: block; font-size: 0.76rem; color: #64748b; }
.wl-error { color: #b91c1c; background: #fef2f2; padding: 12px 14px; border-radius: 12px; margin: 0; }
.wl-loading { color: #64748b; margin: 0; }
@media (max-width: 860px) {
  .warranty-card { grid-template-columns: minmax(0, 1fr); padding: 24px 16px; gap: 24px; }
  .wl-meta { grid-template-columns: 1fr; }
}

/* ===== Bản đồ Google ===== */
.map-card { border-radius: 20px; overflow: hidden; border: 1px solid #e2e8f0; background: #f8fafc; }
.map-card iframe { display: block; width: 100%; height: 260px; border: 0; }
.map-directions { display: flex; align-items: center; justify-content: center; min-height: 48px; font-weight: 700; color: #047857; background: #fff; border-top: 1px solid #e2e8f0; }
.map-directions:hover { background: #ecfdf5; }

/* ===== Thanh liên hệ cố định trên điện thoại ===== */
.mobile-cta-bar { display: none; }
@media (max-width: 768px) {
  .mobile-cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2500;
    display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px);
    border-top: 1px solid #e2e8f0; box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
  }
  .mcb-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: 14px; font-weight: 700; font-size: 0.92rem; border: none; cursor: pointer; font-family: inherit; text-decoration: none; }
  .mcb-call { background: #ecfdf5; color: #047857; }
  .mcb-zalo { background: #eff6ff; color: #0055d4; }
  .mcb-zalo-mark { background: #0068ff; color: #fff; font-size: 0.62rem; font-weight: 800; padding: 3px 5px; border-radius: 6px; }
  .mcb-book { background: linear-gradient(135deg, #10b981, #047857); color: #fff; box-shadow: 0 6px 16px rgba(5, 150, 105, 0.3); }
  /* Thanh cố định thay cho cụm nút tròn: chỉ giữ nút lên đầu trang, đặt phía trên thanh */
  .floating-speed-dial .dial-hotline, .floating-speed-dial .dial-zalo, .floating-speed-dial .dial-tele { display: none !important; }
  .floating-speed-dial { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; right: 16px !important; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 769px) {
  /* Máy tính: chừa chỗ để cụm nút tròn không che chữ cuối trang */
  .footer { padding-bottom: 96px !important; }
}

/* ===== Logo mới (điện thoại + dấu tích) ===== */
.logo-mark { background: linear-gradient(135deg, #22c55e 0%, #059669 55%, #065f46 100%) !important; color: #fff !important; padding: 0 !important; overflow: hidden; flex-shrink: 0; box-shadow: 0 4px 12px rgba(4, 120, 87, 0.25); }
.logo-mark svg { display: block; width: 100%; height: 100%; }
.logo-accent { color: #047857; }

/* ===== Hiệu ứng ===== */
/* Hiện dần khi cuộn (class do src/utils/effects.js gắn) */
.reveal.reveal { opacity: 0; transform: translateY(28px); will-change: opacity, transform; }
.reveal.reveal.is-visible { opacity: 1; transform: none; }

/* Header đổ bóng khi cuộn */
.header { transition: box-shadow 0.25s ease, background-color 0.25s ease; }
.header.scrolled { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(160%) blur(10px); }

/* Thẻ nổi lên khi rê chuột, ảnh phóng nhẹ */
.tech-product-card, .featured-service-item, .bento-item, .reason-card, .review-card, .service-cat-card, .contact-card {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.tech-product-card .product-img, .news-card .news-img img { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) {
  .tech-product-card:hover, .featured-service-item:hover, .bento-item:hover, .reason-card:hover, .review-card:hover, .service-cat-card:hover {
    transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
  }
  .tech-product-card:hover .product-img { transform: scale(1.06); }
  .news-card:hover .news-img img { transform: scale(1.05); }
}

/* Điện thoại ở Hero lơ lửng nhẹ */

/* Nút đặt thợ chính: vệt sáng chạy qua */
[data-action="start-booking"].btn-primary, .mcb-book, .pd-hold-btn { position: relative; overflow: hidden; }
[data-action="start-booking"].btn-primary::after, .mcb-book::after {
  content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-150%) skewX(-20deg); animation: tp-shine 4.5s ease-in-out infinite; pointer-events: none;
}
@keyframes tp-shine { 0%, 60% { transform: translateX(-150%) skewX(-20deg); } 85%, 100% { transform: translateX(330%) skewX(-20deg); } }

/* Nhãn giá chính nhấp nháy nhẹ khi vừa đổi (bảng tính giá, định giá) */
@keyframes tp-pop { 0% { transform: scale(0.96); opacity: 0.6; } 100% { transform: scale(1); opacity: 1; } }
#valPriceEst, .price-option-card { animation: tp-pop 0.35s ease; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-phone-img-wrap, [data-action="start-booking"].btn-primary::after, .mcb-book::after, #valPriceEst, .price-option-card { animation: none !important; }
  .tech-product-card, .tech-product-card .product-img, .news-card .news-img img { transition: none !important; }
}

/* ===== Báo giá nhanh 3 chạm (Hero) ===== */
.quick-quote { display: flex; flex-direction: column; gap: 10px; }
.qq-step { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.88rem; color: #0f172a; margin-top: 4px; }
.qq-step span { width: 22px; height: 22px; border-radius: 50%; background: #047857; color: #fff; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qq-select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1.5px solid #cbd5e1; border-radius: 12px; font: inherit; font-weight: 600; color: #0f172a; background: #fff; }
.qq-select:focus { outline: none; border-color: #047857; box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.15); }
.qq-faults { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.qq-fault { min-height: 40px; padding: 6px 8px; border: 1.5px solid #e2e8f0; border-radius: 10px; background: #fff; font: inherit; font-size: 0.85rem; font-weight: 600; color: #334155; cursor: pointer; transition: all 0.15s ease; }
.qq-fault:hover { border-color: #6ee7b7; }
.qq-fault.is-selected { border-color: #047857; background: #ecfdf5; color: #047857; }
.qq-options { display: grid; gap: 6px; }
.qq-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 12px; border: 1.5px solid #e2e8f0; border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: all 0.15s ease; animation: tp-pop 0.25s ease; }
.qq-option:hover { border-color: #6ee7b7; }
.qq-option.is-selected { border-color: #047857; background: #ecfdf5; box-shadow: 0 4px 12px rgba(4, 120, 87, 0.12); }
.qq-option-name { display: flex; flex-direction: column; font-weight: 600; color: #0f172a; font-size: 0.9rem; }
.qq-option-name small { font-weight: 500; color: #64748b; font-size: 0.75rem; }
.qq-option strong { color: #047857; font-size: 1.05rem; white-space: nowrap; }
.qq-note { margin: 0; font-size: 0.75rem; color: #64748b; text-align: center; line-height: 1.5; }
@media (max-width: 480px) { .qq-faults { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.form-optional { font-weight: 500; color: #64748b; font-size: 0.82em; }

/* Điện thoại / tablet: khung báo giá nhanh lên ngay sau phần giới thiệu, ảnh máy xuống dưới */
@media (max-width: 1024px) {
  .hero-inner > .hero-content { order: 1; }
  .hero-inner > .quick-quote { order: 2; }
  .hero-inner > .hero-phones-spatial { order: 3; }
}
@media (max-width: 768px) {
  .qq-option-name small, .qq-note, .quick-quote .booking-card-toggle { font-size: 0.82rem; }
}

/* Dòng "Khu vực phục vụ" ở chân trang (liên kết tới trang SEO từng khu vực) */
.footer-areas { font-size: 0.85rem; color: #64748b; line-height: 1.9; margin-bottom: 20px; }
.footer-areas strong { color: #0f172a; margin-right: 4px; }
.footer-areas a { color: #475569; white-space: nowrap; }
.footer-areas a:hover { color: #047857; }

/* Dải chạy chữ: các ca vừa sửa xong (dữ liệu thật) */
.ticker-live { color: #047857; font-weight: 600; }
.ticker-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #10b981; margin-right: 6px; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); animation: tp-live 1.8s ease-out infinite; vertical-align: 1px; }
@keyframes tp-live { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); } 100% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } }
@media (prefers-reduced-motion: reduce) { .ticker-live-dot { animation: none; } }

/* Hiệu năng: popup đang đóng không hiển thị => trình duyệt không phải tính style/bố cục cho chúng */
.modal:not(.show), .catalog-modal:not(.show), .valuation-modal:not(.show) { display: none; }

/* Báo giá nhanh: chọn theo triệu chứng */
.qq-step-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qq-symptom-toggle { background: none; border: none; color: #047857; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; padding: 6px 2px; text-decoration: underline; text-underline-offset: 3px; }
.qq-symptoms { display: grid; gap: 6px; padding: 10px; background: #f0fdf4; border: 1px dashed #6ee7b7; border-radius: 12px; animation: tp-pop 0.2s ease; }
.qq-symptoms p { margin: 0 0 2px; font-size: 0.8rem; color: #065f46; font-weight: 600; }
.qq-symptom { text-align: left; padding: 8px 10px; border: 1px solid #d1fae5; border-radius: 10px; background: #fff; font: inherit; font-size: 0.85rem; color: #0f172a; cursor: pointer; min-height: 40px; }
.qq-symptom:hover { border-color: #047857; background: #ecfdf5; }

/* Thông báo (toast) luôn nằm trên cùng, không bị thanh liên hệ / popup che */
.toast { z-index: 4000; }
@media (max-width: 768px) {
  .toast { left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateY(24px); max-width: none; }
  .toast.show { transform: translateY(0); }
}

/* =====================================================================
   RÚT GỌN TRANG CHỦ TRÊN ĐIỆN THOẠI (≤768px) — chỉ đổi cách hiển thị, không bỏ nội dung
   ===================================================================== */
@media (max-width: 768px) {
  /* Thẻ vuốt ngang dùng chung: thẻ kế tiếp ló ra để khách biết còn nội dung */
  .m-swipe {
    display: flex !important; grid-template-columns: none !important; flex-direction: row !important; flex-wrap: nowrap !important;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px !important;
    justify-content: flex-start !important; /* căn giữa sẽ đẩy thẻ đầu ra ngoài, không vuốt tới được */
    margin-inline: -16px; padding: 18px 16px 12px; scroll-padding-inline: 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .m-swipe::-webkit-scrollbar { display: none; }
  .m-swipe > * { flex: 0 0 82%; scroll-snap-align: start; min-width: 0; }

  /* Bảng tính giá */
  #calcSeriesRow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-bottom: 4px; }
  #calcSeriesRow::-webkit-scrollbar { display: none; }
  #calcSeriesRow > * { flex: 0 0 auto; }
  #calcModelsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #calcModelsGrid .calc-model-btn { min-height: 44px; padding: 8px 10px; font-size: 0.85rem; }
  #calcModelsGrid .calc-model-btn span:last-child { display: none; }
  #calcFaultsGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #calcFaultsGrid .calc-fault-btn { min-height: 72px; padding: 8px 4px; font-size: 0.8rem; flex-direction: column; justify-content: center; text-align: center; gap: 4px; }
  #calcPriceResults .price-options-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -16px; padding: 4px 16px 12px; scrollbar-width: none; }
  #calcPriceResults .price-options-grid::-webkit-scrollbar { display: none; }
  #calcPriceResults .price-option-card { flex: 0 0 82%; scroll-snap-align: start; }

  /* Sản phẩm: 2 cột, hiện 4 máy (đầy đủ ở "Xem tất cả sản phẩm") */
  #sell-buy .tech-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  #sell-buy .tech-products-grid > .tech-product-card:nth-child(n+5) { display: none; }
  #sell-buy .tech-product-card { padding: 10px; }
  #sell-buy .product-img-box { height: 130px; }
  #sell-buy .product-info h3 { font-size: 0.9rem; line-height: 1.3; }
  #sell-buy .product-tags span:nth-child(n+2) { display: none; }
  #sell-buy .product-price { font-size: 1rem; flex-wrap: wrap; }
  #sell-buy .product-price del { font-size: 0.78rem; }
  #sell-buy .product-buy-btn { width: 100%; min-height: 40px; padding: 8px; font-size: 0.82rem; }

  /* Quy trình: ảnh minh hoạ chi tiết ẩn bớt */
  #processDetailPanel .proc-det-image { display: none; }

  /* Liên hệ: form tư vấn thu gọn, bấm mới mở */
  .contact-form.is-collapsed > :not(.contact-form-toggle) { display: none !important; }
  .contact-form-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border: 2px dashed #6ee7b7; border-radius: 16px; background: #f0fdf4; color: #047857; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; }
  .contact-form.is-collapsed { padding: 12px !important; }
  .contact-card { padding: 16px; }
}
.contact-form-toggle { display: none; }
@media (max-width: 768px) { .contact-form.is-collapsed .contact-form-toggle, .contact-form-toggle { display: flex; } .contact-form:not(.is-collapsed) .contact-form-toggle { display: none; } }
@media (max-width: 768px) {
  /* Phụ kiện: 2 cột gọn */
  .accessories-bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .accessories-bento-grid .bento-large { grid-column: 1 / -1; }
  .accessories-bento-grid .bento-item { padding: 16px !important; min-height: 0 !important; }
}
@media (max-width: 768px) { .accessories-bento-grid > .bento-item:last-child:nth-child(even) { grid-column: 1 / -1; } }

/* Menu con "Sửa tại nhà": mỗi dịch vụ mở trang riêng */
.nav-has-sub { position: relative; }
.nav-has-sub > a { display: flex; align-items: center; gap: 4px; }
.nav-caret { transition: transform 0.2s ease; }
.nav-sub { list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 1100; }
.nav-sub::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-has-sub:hover .nav-sub, .nav-has-sub:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; }
.nav-has-sub:hover .nav-caret, .nav-has-sub:focus-within .nav-caret { transform: rotate(180deg); }
.nav-links .nav-sub a { display: block; padding: 10px 14px; border-radius: 10px; font-size: 0.92rem; color: #334155; font-weight: 500; }
.nav-links .nav-sub a:hover { background: #ecfdf5; color: #047857; }
.nav-links .nav-sub a.nav-sub-all { color: #047857; font-weight: 700; border-top: 1px solid #f1f5f9; border-radius: 0 0 10px 10px; margin-top: 4px; padding-top: 12px; }
@media (max-width: 1100px) {
  /* Trong menu điện thoại: hiện sẵn các dịch vụ thành 2 cột gọn */
  .nav-caret { display: none; }
  .nav-sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: #f8fafc; min-width: 0; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px; margin: 2px 0 4px; }
  .nav-sub::before { display: none; }
  .nav-links .nav-sub a { min-height: 40px; padding: 8px 12px; font-size: 0.88rem; display: flex; align-items: center; background: #fff; }
  .nav-links .nav-sub a.nav-sub-all { grid-column: 1 / -1; justify-content: center; border-top: none; border-radius: 10px; margin-top: 0; padding-top: 8px; }
}
a.featured-service-item { text-decoration: none; color: inherit; }

/* Trang riêng cho từng mục menu (cua-hang, thu-cu-doi-moi, bang-gia, lien-he) */
.page-hero { padding: 36px 0 8px; background: linear-gradient(180deg, #ecfdf5 0%, rgba(236, 253, 245, 0) 100%); }
.page-hero h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; color: #0f172a; margin: 10px 0; }
.page-hero p { max-width: 720px; font-size: 1.02rem; line-height: 1.7; color: #475569; margin: 0; }
.page-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.88rem; color: #64748b; }
.page-crumbs a { color: #047857; font-weight: 600; text-decoration: none; }
.page-hero + section.section:not(#buy) { padding-top: 32px !important; }
.page-hero + #buy { margin-top: 28px; }
.page-main #sell-buy { border-top: none !important; }
.tp-table-wrap { overflow-x: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; }
.tp-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tp-table th, .tp-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #f1f5f9; }
.tp-table thead th { background: #f8fafc; color: #334155; font-weight: 700; font-size: 0.85rem; }
.tp-table tbody th { color: #0f172a; font-weight: 700; }
.tp-table td:last-child { color: #047857; font-weight: 800; white-space: nowrap; }
.tp-table tbody tr:last-child th, .tp-table tbody tr:last-child td { border-bottom: none; }
.tp-note { font-size: 0.88rem; color: #64748b; margin: 12px 0 0; }
@media (max-width: 768px) {
  .page-hero { padding: 44px 0 4px; }
  .page-hero p { font-size: 0.95rem; }
  .page-hero + section.section:not(#buy) { padding-top: 20px !important; }
  .tp-table th, .tp-table td { padding: 10px 12px; font-size: 0.88rem; }
}

/* ===== Khối nội dung bổ sung (scripts/page-content.mjs) ===== */
.pc-section { padding-top: 56px; padding-bottom: 56px; }
.pc-head { text-align: center; margin: 0 auto 32px; max-width: 720px; }
.pc-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; color: #0f172a; margin: 6px 0 10px; line-height: 1.2; }
.pc-head p { color: #64748b; margin: 0; line-height: 1.6; }
.pc-steps { list-style: none; counter-reset: pc; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.pc-steps li { counter-increment: pc; position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 6px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pc-steps li:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 23, 42, .08); border-color: #a7f3d0; }
.pc-steps li::before { content: counter(pc); width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #22c55e, #047857); margin-bottom: 8px; box-shadow: 0 6px 14px rgba(4, 120, 87, .25); }
.pc-steps strong { font-size: 1.05rem; color: #0f172a; }
.pc-steps span { font-size: .92rem; line-height: 1.6; color: #475569; }
.pc-steps a, .pc-note a, .pc-faq a { color: #047857; font-weight: 700; }
.pc-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.pc-checks li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px 16px; }
.pc-checks li > svg { flex-shrink: 0; color: #fff; background: #047857; border-radius: 50%; padding: 4px; width: 24px; height: 24px; margin-top: 1px; }
.pc-checks strong { display: block; color: #0f172a; font-size: .97rem; }
.pc-checks span { display: block; color: #64748b; font-size: .88rem; line-height: 1.55; margin-top: 2px; }
.pc-note { text-align: center; color: #64748b; font-size: .9rem; margin: 18px 0 0; }
.pc-faq { max-width: 860px; margin: 0 auto; }
.pc-factors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pc-factor { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 18px; }
.pc-factor h3 { margin: 0 0 10px; font-size: 1.02rem; color: #0f172a; }
.pc-factor ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pc-factor li { display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; color: #475569; line-height: 1.4; }
.pc-factor b { white-space: nowrap; font-weight: 800; }
.pc-factor b.up { color: #047857; }
.pc-factor b.down { color: #b91c1c; }
.pc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pc-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 20px; border-top: 4px solid #22c55e; }
.pc-card h3 { margin: 0 0 6px; font-size: 1.02rem; color: #0f172a; }
.pc-card p { margin: 0; font-size: .9rem; color: #475569; line-height: 1.6; }
.pc-table-wrap { overflow-x: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; }
.pc-table td:last-child { white-space: nowrap; }
.pc-table td:last-child a { color: #047857; font-weight: 800; text-decoration: none; }
.pc-table td { color: #475569; }
.pc-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: linear-gradient(135deg, #064e3b, #047857); color: #fff; border-radius: 24px; padding: 28px 32px; margin-top: 24px; margin-bottom: 48px; }
.pc-cta h2 { margin: 0 0 6px; font-size: 1.4rem; color: #fff; }
.pc-cta p { margin: 0; color: #d1fae5; }
.pc-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pc-cta .btn-primary { background: #fff !important; color: #065f46 !important; }
.pc-cta .btn-outline { border-color: rgba(255, 255, 255, .5) !important; color: #fff !important; background: transparent !important; }
.pc-area-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto; }
.pc-area-list a { padding: 10px 18px; border-radius: 100px; background: #fff; border: 1px solid #d1fae5; color: #065f46; font-weight: 700; font-size: .92rem; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.pc-area-list a::before { content: '📍 '; }
.pc-area-list a:hover { background: #ecfdf5; transform: translateY(-2px); }
.pc-area-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 900px; margin: 24px auto 0; }
.pc-area-info div { background: #f8fafc; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.pc-area-info strong { font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; color: #64748b; }
.pc-area-info span { color: #0f172a; font-weight: 600; }
.pc-area-info a { color: #047857; font-weight: 800; }
@media (max-width: 1024px) {
  .pc-factors, .pc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .pc-section { padding-top: 32px; padding-bottom: 32px; }
  .pc-head { margin-bottom: 20px; }
  .pc-steps { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pc-steps li { padding: 14px; border-radius: 16px; }
  .pc-steps li::before { width: 30px; height: 30px; margin-bottom: 4px; }
  .pc-steps strong { font-size: .95rem; }
  .pc-steps span { font-size: .84rem; }
  .pc-checks { grid-template-columns: 1fr; gap: 8px; }
  .pc-checks li { padding: 12px 14px; }
  .pc-factors { grid-template-columns: 1fr; gap: 10px; }
  .pc-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pc-card { padding: 14px; }
  .pc-card p { font-size: .84rem; }
  .pc-cta { padding: 22px 20px; margin-bottom: 32px; }
  .pc-area-list { gap: 8px; }
  .pc-area-list a { padding: 8px 14px; font-size: .86rem; }
  .pc-area-info { grid-template-columns: 1fr; gap: 8px; }
  .pc-table th, .pc-table td { white-space: normal; }
}

/* Huy hiệu nổi ở khung đầu trang: biểu tượng riêng của TRIPHONE (thay logo Apple), cùng tông xanh thương hiệu */
.badge-apple .badge-icon { background: linear-gradient(135deg, #22c55e 0%, #059669 55%, #065f46 100%); color: #fff; box-shadow: 0 6px 14px rgba(4, 120, 87, 0.35); }
.badge-warranty .badge-icon { background: linear-gradient(135deg, #10b981 0%, #047857 60%, #064e3b 100%); box-shadow: 0 6px 14px rgba(4, 120, 87, 0.35); }
.floating-glass-badge .badge-icon { width: 40px; height: 40px; }

/* Đường quét sáng (định giá): chạy bằng background-position thay vì "top" để không làm xô lệch bố cục */
.tradein-scan-line { top: 10%; height: 80%; background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat; background-size: 100% 4px; box-shadow: none; animation: scan-bg 3s infinite linear; pointer-events: none; }
@keyframes scan-bg {
  0% { background-position: 0 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { background-position: 0 100%; opacity: 0; }
}
/* Danh sách đời máy do JS điền: giữ sẵn chỗ để phần bên dưới không bị đẩy xuống */
@media (max-width: 768px) { #calcModelsGrid:not(:has(*)) { min-height: 148px; } }
/* Ảnh phụ kiện (ảnh vuông) chưa tải xong vẫn giữ sẵn chỗ: không làm trang bị đẩy xuống */
.bento-img { aspect-ratio: 1 / 1; }
@media (max-width: 768px) { .bento-img-wrapper { width: 100%; } .bento-img { width: 100%; height: auto; } }
/* Danh sách triệu chứng chỉ hiện khi bấm "Chưa rõ lỗi?" */
.qq-symptoms[hidden] { display: none; }

/* Đủ tương phản & cỡ chữ dễ đọc trên điện thoại (Lighthouse: color-contrast, font-size) */
.product-badge { background: #dc2626; }
@media (max-width: 768px) {
  .comp-table { font-size: 12.5px; }
  .pc-card p, .price-opt-spec, .footer-bottom { font-size: 12.5px; }
}

/* Thẻ sản phẩm dùng ảnh chung cho nhiều máy: ghi rõ ảnh minh hoạ */
.product-img-box { position: relative; }
.product-img-note { position: absolute; left: 8px; bottom: 8px; z-index: 1; font-size: 0.7rem; font-weight: 600; line-height: 1.4; color: #fff; background: rgba(15, 23, 42, 0.62); padding: 2px 8px; border-radius: 100px; pointer-events: none; }
.tech-product-card[hidden] { display: none !important; }

/* Bảng giá: hàng chọn hãng + bảng giá sửa máy Android */
.calc-brand-row { margin-bottom: 12px; }
.calc-brand-row .calc-pill { font-weight: 700; }
.android-price-wrap { margin-top: 28px; }
.apt-title { font-size: 1.05rem; font-weight: 800; color: #0f172a; margin: 0 0 12px; }
.apt-scroll { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 16px; }
.android-price-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.android-price-table th, .android-price-table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; text-align: center; white-space: nowrap; }
.android-price-table thead th { background: #f8fafc; font-weight: 700; color: #0f172a; border-bottom: 2px solid #e2e8f0; }
.android-price-table tbody th { text-align: left; font-weight: 600; color: #1e293b; }
.android-price-table tbody tr:hover { background: #f0fdf4; }
.apt-cell { border: 0; background: none; font: inherit; font-weight: 700; color: #047857; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.apt-cell:hover { background: #d1fae5; }
@media (max-width: 640px) {
  .apt-scroll { border: 0; overflow: visible; }
  .android-price-table thead { display: none; }
  .android-price-table, .android-price-table tbody, .android-price-table tr { display: block; }
  .android-price-table tr { border: 1px solid #e2e8f0; border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
  .android-price-table tbody th { display: block; background: #f8fafc; }
  .android-price-table td { display: flex; justify-content: space-between; align-items: center; text-align: right; }
  .android-price-table td::before { content: attr(data-label); color: #64748b; font-weight: 600; }
}

/* Bảng giá: tab con theo nhóm linh kiện */
.ptab-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ptab { border: 1.5px solid #e2e8f0; background: #f8fafc; color: #475569; font-weight: 700; font-size: 0.86rem; padding: 8px 16px; border-radius: 100px; cursor: pointer; transition: all .2s; }
.ptab:hover { border-color: #10b981; color: #047857; background: #ecfdf5; }
.ptab.active { background: #047857; border-color: #047857; color: #fff; box-shadow: 0 4px 12px rgba(5, 150, 105, .25); }
.ptab-pane[hidden] { display: none; }
.android-price-wrap { margin-top: 0; }
.apt-note { color: #64748b; font-size: 0.82rem; margin: 10px 0 0; }
@media (max-width: 640px) {
  .ptab-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px 6px; }
  .ptab { flex: none; }
}

/* ===== Bảng giá: chọn loại màn hình (#prices-screens) ===== */
.scr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.scr-card { position: relative; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 22px; padding: 22px 20px 20px; box-shadow: 0 10px 30px rgba(15, 23, 42, .05); }
.scr-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; border-radius: 22px 22px 0 0; background: var(--scr-c, #22c55e); }
.scr-best { --scr-c: linear-gradient(90deg, #059669, #10b981); border-color: #a7f3d0; box-shadow: 0 16px 40px rgba(5, 150, 105, .14); }
.scr-good { --scr-c: linear-gradient(90deg, #0ea5e9, #38bdf8); }
.scr-ok { --scr-c: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.scr-low { --scr-c: linear-gradient(90deg, #f59e0b, #fbbf24); }
.scr-tag { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 3px 10px; border-radius: 100px; background: #f1f5f9; color: #334155; }
.scr-best .scr-tag { background: #047857; color: #fff; }
.scr-top h3 { margin: 10px 0 6px; font-size: 1.15rem; color: #0f172a; }
.scr-top p { margin: 0; color: #64748b; font-size: .88rem; line-height: 1.5; }
.scr-price { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #f8fafc; }
.scr-best .scr-price { background: #ecfdf5; }
.scr-price small { color: #64748b; font-size: .75rem; font-weight: 600; }
.scr-price b { font-size: 1.45rem; color: #047857; font-family: var(--font-heading, inherit); line-height: 1.1; }
.scr-price span { color: #64748b; font-size: .76rem; }
.scr-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.scr-bars li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .82rem; color: #334155; }
.scr-dots { display: inline-flex; gap: 3px; flex: none; }
.scr-dots i { width: 16px; height: 6px; border-radius: 4px; background: #e2e8f0; }
.scr-dots i.on { background: #10b981; }
.scr-low .scr-dots i.on { background: #f59e0b; }
.scr-ok .scr-dots i.on { background: #8b5cf6; }
.scr-good .scr-dots i.on { background: #0ea5e9; }
.scr-pros { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.scr-pros li { position: relative; padding-left: 22px; font-size: .84rem; color: #1e293b; line-height: 1.45; }
.scr-pros li::before { content: ''; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #d1fae5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 9px no-repeat; }
.scr-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scr-meta span { display: grid; gap: 2px; font-size: .82rem; color: #0f172a; padding: 8px 10px; border: 1px solid #f1f5f9; border-radius: 12px; }
.scr-meta b { font-size: .7rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.scr-fit { margin: 0; font-size: .82rem; color: #475569; line-height: 1.5; }
.scr-cta { margin-top: auto; width: 100%; border: 1.5px solid #047857; background: #fff; color: #047857; font: inherit; font-weight: 800; font-size: .88rem; padding: 11px 14px; border-radius: 100px; cursor: pointer; transition: all .2s; }
.scr-cta:hover, .scr-best .scr-cta { background: #047857; color: #fff; }
.scr-best .scr-cta:hover { background: #065f46; }
.scr-sub { font-size: 1.15rem; color: #0f172a; margin: 36px 0 14px; }
.scr-compare td { text-align: center; }
.scr-compare td:last-child { color: inherit; font-weight: inherit; }
.scr-compare th:first-child { text-align: left; }
.scr-two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-top: 8px; align-items: start; }
.scr-signs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.scr-signs li { display: grid; gap: 3px; padding: 14px 16px; background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #f59e0b; border-radius: 14px; }
.scr-signs li b { color: #0f172a; font-size: .92rem; }
.scr-signs li span { color: #475569; font-size: .85rem; }
.scr-side { display: grid; gap: 14px; margin-top: 50px; }
.scr-box { padding: 18px 20px; border-radius: 18px; background: linear-gradient(145deg, #f8fafc, #ecfdf5); border: 1px solid #d1fae5; }
.scr-box h3 { margin: 0 0 6px; font-size: 1rem; color: #0f172a; }
.scr-box p { margin: 0; font-size: .86rem; color: #334155; line-height: 1.6; }
.scr-box b { color: #047857; }
@media (max-width: 1100px) { .scr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .scr-two { grid-template-columns: 1fr; }
  .scr-side { margin-top: 0; }
}
@media (max-width: 560px) {
  /* Điện thoại: 4 thẻ thành dải vuốt ngang, hé thẻ kế tiếp */
  .scr-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -16px; padding: 4px 16px 14px; scrollbar-width: none; }
  .scr-grid::-webkit-scrollbar { display: none; }
  .scr-card { flex: 0 0 86%; scroll-snap-align: center; }
  .scr-compare { overflow-x: auto; }
  .scr-compare table { min-width: 560px; }
}

/* ===== Tra cứu giá trên điện thoại: gọn, vuốt ngang, dòng bảng giá mở/gọn ===== */
.m-row-toggle { display: none; }
@media (max-width: 640px) {
  #price-table .calc-card { padding: 16px 14px; border-radius: 20px; }
  #price-table .calc-view-switch { gap: 8px; }
  #price-table .calc-tab-btn { flex: 1; justify-content: center; padding: 10px 8px; font-size: .8rem; text-align: center; line-height: 1.25; }
  #calcInteractiveCard > div:not([class]) { margin-bottom: 8px !important; font-size: .85rem !important; }

  /* Hãng: 1 hàng 4 nút đều nhau */
  .calc-brand-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
  .calc-brand-row .calc-pill { padding: 9px 4px; font-size: .82rem; text-align: center; }

  /* Dòng máy, model, lỗi: dải vuốt ngang 1 hàng */
  #calcSeriesRow, #calcModelsGrid, #calcFaultsGrid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; gap: 8px; margin: 0 -14px 16px; padding: 2px 14px 4px; }
  #calcSeriesRow::-webkit-scrollbar, #calcModelsGrid::-webkit-scrollbar, #calcFaultsGrid::-webkit-scrollbar { display: none; }
  #calcSeriesRow .calc-pill { flex: none; padding: 8px 14px; font-size: .82rem; scroll-snap-align: start; }
  #calcModelsGrid .calc-model-btn { flex: none; min-height: 40px; padding: 8px 14px; border-radius: 100px; font-size: .82rem; scroll-snap-align: start; }
  #calcModelsGrid:not(:has(*)) { min-height: 44px; }
  #calcFaultsGrid .calc-fault-btn { flex: 0 0 76px; min-height: 68px; padding: 8px 4px; font-size: .74rem; gap: 4px; scroll-snap-align: start; }
  #calcFaultsGrid .calc-fault-btn .name { font-size: .74rem; line-height: 1.2; }

  /* Kết quả báo giá: gọn hơn */
  #calcPriceResults.price-results-box { padding: 14px 12px; margin-top: 4px; border-radius: 16px; }
  #calcPriceResults h3 { font-size: 1rem !important; }
  #calcPriceResults > div:first-child > span { display: none; } /* "Miễn phí kiểm tra 30 tiêu chuẩn" */
  #calcPriceResults > div:first-child { margin-bottom: 10px !important; }
  #calcPriceResults .price-options-grid { margin-inline: -12px; padding: 12px 12px 6px; }
  #calcPriceResults .price-option-card { flex-basis: 84%; padding: 14px; }
  #calcPriceResults .price-opt-spec { font-size: .78rem; margin-bottom: 8px; }
  #calcPriceResults .price-opt-val { font-size: 1.25rem; margin-bottom: 8px; }
  #calcPriceResults .price-opt-meta { gap: 3px; margin-bottom: 12px; font-size: .76rem; }

  /* Tab con bảng giá + ô tìm kiếm */
  #calcFullTableCard .price-table-header-row { margin-bottom: 12px !important; }
  #calcFullTableCard .price-table-header-row h3 { font-size: 1.05rem !important; }
  #calcFullTableCard .price-table-search-box { min-width: 0 !important; }

  /* Bảng màn hình iPhone: mỗi máy 1 dòng, bấm "Từ ..." để mở đủ giá */
  .screen-master-table tr { padding: 0; margin-bottom: 8px; overflow: hidden; }
  .screen-master-table td:first-child { margin: 0; width: 100%; border-radius: 0; padding: 10px 12px; display: flex; align-items: center; gap: 8px; background: #fff; }
  .screen-master-table tr:not(.m-open) td:first-child { border-bottom: 0; }
  .screen-master-table tr:not(.m-open) td:not(:first-child) { display: none; }
  .screen-master-table tr.m-open td:first-child { background: var(--bg-elevated, #f8fafc); }
  .screen-master-table tr.m-open td:not(:first-child) { padding: 8px 12px; }
  .screen-master-table .model-cell { flex: 1; min-width: 0; }
  .screen-master-table .model-calc-hint { display: none; }

  /* Bảng linh kiện / Android: như trên */
  .android-price-table tr { margin-bottom: 8px; }
  .android-price-table tbody th { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
  .android-price-table tr:not(.m-open) td { display: none; }
  .android-price-table td { padding: 6px 12px; }

  .m-row-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none; border: 0; background: #ecfdf5; color: #047857; font: inherit; font-weight: 800; font-size: .8rem; padding: 6px 10px; border-radius: 100px; cursor: pointer; white-space: nowrap; }
  .m-row-toggle::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
  tr.m-open .m-row-toggle::after { transform: rotate(-135deg) translateY(-1px); }
}

/* ===== Trang chủ: 4 lối vào chính (.service-categories) ===== */
.service-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.svc-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; background: var(--svc-bg, #f8fafc); border: 1px solid var(--svc-bd, #e2e8f0); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.svc-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15, 23, 42, .08); border-color: var(--svc-ac, #10b981); }
.svc-repair { --svc-bg: #eef2ff; --svc-bd: #e0e7ff; --svc-ac: #6366f1; }
.svc-sell { --svc-bg: #ecfdf5; --svc-bd: #d1fae5; --svc-ac: #059669; }
.svc-buy { --svc-bg: #fff7ed; --svc-bd: #ffedd5; --svc-ac: #ea580c; }
.svc-acc { --svc-bg: #faf5ff; --svc-bd: #f3e8ff; --svc-ac: #9333ea; }
.svc-main { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.svc-main img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; flex: none; }
.svc-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.svc-text strong { font-size: 1rem; font-weight: 800; color: #0f172a; line-height: 1.25; }
.svc-text span { font-size: .78rem; color: #64748b; line-height: 1.4; }
.svc-go { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--svc-ac); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 4px 10px rgba(15, 23, 42, .06); transition: transform .25s ease, background .25s ease, color .25s ease; }
.svc-card:hover .svc-go { transform: translateX(3px); background: var(--svc-ac); color: #fff; }
.svc-stat { margin: 0; font-size: .82rem; color: #334155; padding: 8px 10px; background: rgba(255, 255, 255, .7); border-radius: 12px; }
.svc-stat b { color: var(--svc-ac); }
.svc-links { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-links a { font-size: .74rem; font-weight: 700; color: #334155; background: #fff; border: 1px solid var(--svc-bd); padding: 5px 10px; border-radius: 100px; text-decoration: none; transition: all .2s ease; }
.svc-links a:hover { border-color: var(--svc-ac); color: var(--svc-ac); }
@media (max-width: 1100px) { .service-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .service-cat-grid { grid-template-columns: 1fr; gap: 10px; }
  .svc-card { padding: 12px; gap: 8px; }
  .svc-main img { width: 52px; height: 52px; }
}

/* Popup "Xem tất cả sản phẩm" trên điện thoại: lưới 2 cột gọn như trang chủ */
@media (max-width: 640px) {
  .catalog-modal-content { height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .catalog-header { padding: 14px 16px !important; }
  .catalog-header h2 { font-size: 1.3rem !important; }
  .catalog-header p { font-size: .8rem !important; }
  .catalog-filters { padding: 10px 16px !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .catalog-filters::-webkit-scrollbar { display: none; }
  .catalog-filter { flex: none; }
  .catalog-body { padding: 12px !important; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .catalog-grid .tech-product-card { padding: 10px; }
  .catalog-grid .product-img-box { height: 120px; margin-bottom: 10px; }
  .catalog-grid .product-info h3 { font-size: .86rem; line-height: 1.3; }
  .catalog-grid .product-tags span:nth-child(n+2) { display: none; }
  .catalog-grid .product-price { font-size: .98rem; flex-wrap: wrap; }
  .catalog-grid .product-buy-btn { display: none; } /* bấm cả thẻ để xem chi tiết */
  .catalog-grid .product-info { margin-bottom: 0; }
  .catalog-grid .product-price { margin-bottom: 0; }
}
#sell-buy .tech-product-card, .catalog-grid .tech-product-card { cursor: pointer; }

/* Trang dài: các mục dưới màn hình đầu chỉ được trình duyệt dựng bố cục khi khách cuộn gần tới
   (giảm ~270ms tính bố cục lúc tải trang trên điện thoại). "auto" nhớ chiều cao thật sau lần hiển thị đầu. */
main > section:is(#anatomy, #price-table, #sell-buy, #buy, #accessories, #news, #why-choose, #process, #comparison, #reviews, #warranty, #faq, #areas, #contact) {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
/* Khối mời đặt lịch + chân trang có hiệu ứng chạy liên tục (quầng sáng xoay, chấm nhấp nháy, logo):
   khi nằm ngoài màn hình thì trình duyệt bỏ qua hẳn, không tốn CPU vẽ lại */
main > #booking-container { content-visibility: auto; contain-intrinsic-size: auto 700px; }
body > footer.footer { content-visibility: auto; contain-intrinsic-size: auto 1300px; }
/* Các mục ngay dưới hero cũng chỉ dựng khi cuộn gần tới (lần dựng bố cục đầu tiên phải dàn chữ cho mọi phần đang hiện, rất tốn trên điện thoại) */
#hero-container > .trust-bar, #hero-container > .service-categories, main > #services { content-visibility: auto; contain-intrinsic-size: auto 700px; }
/* (Khung Báo giá nhanh KHÔNG dùng content-visibility: nằm chung lưới với nội dung hero, lúc chuyển từ bỏ qua sang dựng
   làm cột lưới đổi bề rộng -> cả hero dịch ngang ~60px trên mạng chậm, CLS 0,098) */
/* Trang riêng (Bảng giá, Cửa hàng, Liên hệ, Thu cũ): mọi mục sau phần đầu trang cũng chỉ dựng khi cuộn gần tới */
main.page-main > section:not(.page-hero) { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* Tương phản chữ đủ chuẩn trên nền màu của thẻ phụ kiện */
.accessories-bento-grid .bento-tag, .accessories-bento-grid .bento-content p { color: #475569; }

/* ===== Điện thoại: bớt khoảng trắng giữa các mục, ảnh phụ kiện vừa phải ===== */
@media (max-width: 640px) {
  /* Khoảng đệm 80px trên/dưới (viết sẵn trong HTML cho máy tính) quá lớn trên điện thoại */
  main > section.section, main > section.calc-section, main > section.comparison-section,
  main > section.reviews-section, main > section.warranty-section, .page-main > section.section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  main > section#buy { padding: 28px 18px !important; }
  /* Ảnh phụ kiện: không giãn kín bề ngang thành ô vuông khổng lồ */
  .accessories-bento-grid .bento-img-wrapper { width: 100%; display: flex; justify-content: center; }
  .accessories-bento-grid .bento-img { width: auto !important; max-width: 100%; height: 150px !important; object-fit: contain; }
  .accessories-bento-grid .bento-large .bento-img { height: 190px !important; }
}

/* ===== Dải kêu gọi hành động (.pc-cta) — thiết kế lại ===== */
.pc-cta-wrap { padding-top: 24px; padding-bottom: 64px; }
.pc-cta-wrap .pc-cta { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; margin: 0; padding: 30px 36px; border-radius: 28px; background: radial-gradient(120% 140% at 0% 0%, #10b981 0%, #047857 45%, #064e3b 100%); box-shadow: 0 20px 50px rgba(4, 120, 87, .25); }
.pc-cta-wrap .pc-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 92% 20%, rgba(255, 255, 255, .16), transparent 40%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 14px); }
.pc-cta-icon { width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.pc-cta-wrap .pc-cta h2 { margin: 0 0 6px; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; color: #fff; }
.pc-cta-wrap .pc-cta p { margin: 0; color: #d1fae5; font-size: .98rem; line-height: 1.5; }
.pc-cta-wrap .pc-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.pc-cta-wrap .pc-cta-actions .btn { min-height: 48px; padding: 12px 22px; border-radius: 100px; font-weight: 800; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; }
.pc-cta-wrap .pc-cta .btn-primary { background: #fff !important; color: #065f46 !important; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); }
.pc-cta-wrap .pc-cta .btn-outline { border: 1.5px solid rgba(255, 255, 255, .55) !important; color: #fff !important; background: rgba(255, 255, 255, .06) !important; }
.pc-cta-wrap .pc-cta .btn-outline:hover { background: rgba(255, 255, 255, .16) !important; }
@media (max-width: 760px) {
  .pc-cta-wrap { padding-bottom: 40px; }
  .pc-cta-wrap .pc-cta { grid-template-columns: auto minmax(0, 1fr); padding: 22px 20px; gap: 14px; border-radius: 22px; }
  .pc-cta-icon { width: 46px; height: 46px; border-radius: 14px; }
  .pc-cta-wrap .pc-cta-actions { grid-column: 1 / -1; justify-content: stretch; }
  .pc-cta-wrap .pc-cta-actions .btn { flex: 1 1 140px; }
}

/* ===== Trang chủ: 3 bài viết mới nhất (scripts/articles-render.mjs > homeNews) ===== */
#news .ar-chip { display: inline-flex; width: fit-content; font-size: .7rem; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; }
#news .ar-chip-red { background: #fee2e2; color: #991b1b; } #news .ar-chip-green { background: #dcfce7; color: #166534; }
#news .ar-chip-blue { background: #dbeafe; color: #1e40af; } #news .ar-chip-violet { background: #ede9fe; color: #5b21b6; } #news .ar-chip-amber { background: #fef3c7; color: #92400e; }
.nw-home-card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid #eef2f6; box-shadow: 0 6px 22px rgba(15, 23, 42, .05); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s; }
.nw-home-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(15, 23, 42, .1); }
.nw-home-card .news-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.nw-home-card .news-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.nw-home-card:hover .news-img img { transform: scale(1.05); }
.nw-home-card .news-content { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.nw-home-card .news-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: #64748b; }
.nw-home-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.4; }
.nw-home-card h3 a { color: #0f172a; text-decoration: none; }
.nw-home-card h3 a::after { content: ''; position: absolute; inset: 0; }
.nw-home-card p { margin: 0; color: #64748b; font-size: .9rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-home-more { margin-top: auto; color: #047857; font-weight: 700; font-size: .9rem; text-decoration: none; }

/* ===== Quy trình: bảng chi tiết - chữ bên trái, điện thoại 3D có các thẻ bay vòng quanh bên phải =====
   Toàn bộ chuyển động chỉ dùng transform/opacity; tạm dừng khi bảng ngoài màn hình (.is-live do src/main.js gắn) */
.process-detail-panel { position: relative; overflow: hidden; border: 1px solid #d1fae5; border-radius: 28px; padding: 44px 48px;
  background: radial-gradient(55% 85% at 78% 50%, #e3faf0 0%, rgba(227, 250, 240, 0) 72%), linear-gradient(180deg, #fff, #fbfefd);
  box-shadow: 0 24px 60px -28px rgba(16, 185, 129, .32); }
.process-detail-panel.show { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 16px; }
.process-detail-panel:not(.is-live) .pd3, .process-detail-panel:not(.is-live) .pd3 *, .process-detail-panel:not(.is-live) .pd-pill i { animation-play-state: paused !important; }

.pd-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; margin-bottom: 22px; border-radius: 999px; background: #ecfdf5; color: #047857; font-weight: 700; font-size: .86rem; box-shadow: 0 8px 22px -6px rgba(16, 185, 129, .3); }
.pd-pill svg { color: #10b981; }
.pd-pill i { width: 8px; height: 8px; border-radius: 50%; background: #10b981; animation: pd-blink 1.6s ease-in-out infinite; }
@keyframes pd-blink { 50% { opacity: .25; transform: scale(.7); } }
.process-detail-panel .proc-det-content h4 { font-size: clamp(1.7rem, 2.6vw, 2.45rem); line-height: 1.16; letter-spacing: -.02em; margin-bottom: 18px; }
.process-detail-panel .proc-det-content h4 span { display: block; background: linear-gradient(90deg, #047857, #10b981 55%, #059669); -webkit-background-clip: text; background-clip: text; color: transparent; }
.process-detail-panel .proc-det-content p { font-size: 1rem; line-height: 1.7; margin-bottom: 22px; }
.process-detail-panel .proc-det-content p a { color: #059669; font-weight: 800; text-decoration: none; white-space: nowrap; }
.process-detail-panel .proc-det-list li { align-items: center; gap: 14px; margin-bottom: 14px; font-size: .97rem; }
.process-detail-panel .pd-ck { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: linear-gradient(135deg, #10b981, #047857); box-shadow: 0 5px 12px -3px rgba(16, 185, 129, .55); }
.process-detail-panel .proc-det-list .pd-ck svg { color: #fff; margin: 0; }
.pd-cta { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.process-detail-panel .pd-book { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 30px; border-radius: 18px; font-size: 1.06rem; box-shadow: 0 16px 32px -12px rgba(5, 150, 105, .65); }
.pd-doodle { color: #10b981; opacity: .75; }

/* --- khung 3D --- */
.pd3 { position: relative; height: 540px; animation: pd3-in .7s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes pd3-in { from { opacity: 0; transform: translateY(24px); } }
.pd3-glow { position: absolute; inset: 4% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(16, 185, 129, .3), rgba(16, 185, 129, .08) 60%, transparent); animation: pd3-breathe 6s ease-in-out infinite; }
@keyframes pd3-breathe { 50% { transform: scale(1.08); opacity: .7; } }
.pd3-scene { position: absolute; inset: 0; perspective: 1300px; perspective-origin: 50% 35%; transform: scale(var(--pd3-s, 1)); }
.pd3-world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; animation: pd3-sway 14s ease-in-out infinite; }
@keyframes pd3-sway { 0%, 100% { transform: rotateX(-7deg) rotateY(-10deg); } 50% { transform: rotateX(-4deg) rotateY(10deg); } }

.pd3-ring { position: absolute; left: -220px; top: -220px; width: 440px; height: 440px; border-radius: 50%; border: 1.5px dashed rgba(16, 185, 129, .5); transform: translateY(30px) rotateX(90deg); animation: pd3-ring 40s linear infinite; }
.pd3-ring-2 { left: -270px; top: -270px; width: 540px; height: 540px; border: 1px solid rgba(16, 185, 129, .2); transform: translateY(-80px) rotateX(90deg); animation-direction: reverse; animation-name: pd3-ring-2; }
@keyframes pd3-ring { to { transform: translateY(30px) rotateX(90deg) rotateZ(360deg); } }
@keyframes pd3-ring-2 { to { transform: translateY(-80px) rotateX(90deg) rotateZ(360deg); } }

.pd3-phone { position: absolute; left: -115px; top: -234px; width: 230px; height: 468px; transform-style: preserve-3d; animation: pd3-float 7s ease-in-out infinite; }
@keyframes pd3-float { 0%, 100% { transform: translateY(0) rotateY(-22deg) rotateX(5deg) rotateZ(5deg); } 50% { transform: translateY(-16px) rotateY(-12deg) rotateX(3deg) rotateZ(3deg); } }
.pd3-layer { position: absolute; inset: 0; border-radius: 40px; background: linear-gradient(135deg, #f1f5f9, #94a3b8 35%, #e2e8f0 55%, #64748b); }
.pd3-layer.l1 { transform: translateZ(-3px); }
.pd3-layer.l2 { transform: translateZ(-6px); }
.pd3-layer.l3 { transform: translateZ(-9px); box-shadow: 0 50px 60px -24px rgba(15, 23, 42, .4); }
.pd3-front { position: absolute; inset: 0; border-radius: 40px; padding: 9px; background: #0b1220; box-shadow: inset 0 0 0 2px #cbd5e1, inset 0 0 0 4px #0b1220; }
.pd3-front::after { content: ''; position: absolute; inset: 9px; border-radius: 32px; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .45) 47%, transparent 56%); background-size: 260% 100%; animation: pd3-glare 7s ease-in-out infinite; }
@keyframes pd3-glare { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.pd3-notch { position: absolute; top: 16px; left: 50%; width: 76px; height: 22px; margin-left: -38px; border-radius: 14px; background: #0b1220; z-index: 2; }
.pd3-badge { position: absolute; right: -54px; top: 140px; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 34% 28%, #4ade80, #16a34a 55%, #0e7a3a);
  box-shadow: 0 22px 34px -10px rgba(22, 163, 74, .6), inset 0 -9px 14px rgba(0, 0, 0, .2), inset 0 7px 12px rgba(255, 255, 255, .4);
  animation: pd3-badge 5s ease-in-out infinite; }
.pd3-badge svg { stroke-width: 3; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .2)); }
@keyframes pd3-badge { 0%, 100% { transform: translateZ(70px) rotateY(0) translateY(0); } 50% { transform: translateZ(84px) rotateY(20deg) translateY(-8px); } }

/* các thẻ bay vòng quanh: vòng quay rotateY, mỗi thẻ quay ngược lại để luôn quay mặt về người xem; ra sau máy thì mờ đi */
.pd3-orbit { position: absolute; left: 0; top: 0; transform-style: preserve-3d; animation: pd3-spin 26s linear infinite; }
@keyframes pd3-spin { to { transform: rotateY(360deg); } }
.pd3-chip { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: translateY(var(--y)) rotateY(var(--a)) translateZ(215px) rotateY(calc(var(--a) * -1)); }
.pd3-chip-in { position: absolute; left: 0; top: 0; translate: -50% -50%; display: flex; align-items: center; gap: 11px; padding: 12px 18px 12px 12px; white-space: nowrap; border-radius: 18px;
  background: rgba(255, 255, 255, .95); border: 1px solid #dff5ea; box-shadow: 0 18px 36px -14px rgba(15, 23, 42, .28);
  animation: pd3-face 26s linear infinite, pd3-depth 26s linear infinite, pd3-pop .7s cubic-bezier(.34, 1.56, .64, 1) backwards;
  animation-delay: 0s, var(--d), calc(.25s + var(--k) * .12s); }
@keyframes pd3-face { to { transform: rotateY(-360deg); } }
@keyframes pd3-depth { 0%, 28%, 72%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes pd3-pop { from { scale: .3; } }
.pd3-ci { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; color: #fff; background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 6px 14px -4px rgba(5, 150, 105, .55); }
.pd3-chip-in b { display: block; font-size: 1.02rem; font-weight: 800; color: #0f172a; line-height: 1.25; }
.pd3-chip-in small { display: block; font-size: .78rem; color: #64748b; }
.pd3-dot { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 5px rgba(52, 211, 153, .22), 0 0 16px #34d399; transform: translateY(30px) rotateY(var(--a)) translateZ(220px); }

/* --- màn hình trong điện thoại --- */
.pd3-screen { position: relative; height: 100%; overflow: hidden; border-radius: 32px; padding: 42px 14px 0; background: linear-gradient(180deg, #fff, #f4fdf8); color: #0f172a; font-size: 10px; line-height: 1.35; text-align: left; }
.pd3-screen h5 { margin: 0 0 2px; font-size: 15px; font-weight: 800; }
.ps-sub { margin: 0 0 10px; font-size: 10px; color: #64748b; }
.ps-top { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 12px; font-weight: 800; color: #065f46; }
.ps-logo { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #10b981; }
.ps-menu { margin-left: auto; display: grid; gap: 2px; }
.ps-menu i { display: block; width: 12px; height: 2px; border-radius: 2px; background: #334155; }
.ps-cal { padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.ps-cal-h { display: flex; justify-content: space-between; margin-bottom: 4px; color: #475569; }
.ps-cal-h b { color: #0f172a; }
.ps-cal-w, .ps-cal-d { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.ps-cal i { font-style: normal; }
.ps-cal-w i { font-size: 8px; color: #94a3b8; }
.ps-cal-d i { font-size: 9px; line-height: 17px; color: #334155; border-radius: 50%; }
.ps-cal-d i.past { color: #cbd5e1; }
.ps-cal-d i.on { background: #10b981; color: #fff; font-weight: 800; animation: ps-pulse 2s ease-in-out infinite; }
@keyframes ps-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); } 50% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); } }
.ps-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.ps-slots span { padding: 5px 0; text-align: center; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; }
.ps-slots .on { background: #10b981; border-color: #10b981; color: #fff; font-weight: 700; }
.ps-btn { padding: 10px; text-align: center; font-size: 11px; font-weight: 800; color: #fff; border-radius: 12px; background: linear-gradient(135deg, #10b981, #047857); box-shadow: 0 8px 16px -6px rgba(5, 150, 105, .6); }
.ps-btn-soft { margin-top: 10px; }
.ps-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 8px 6px 14px; background: #fff; border-top: 1px solid #f1f5f9; }
.ps-tabs span { display: grid; justify-items: center; gap: 3px; font-size: 7.5px; color: #94a3b8; }
.ps-tabs i { width: 12px; height: 12px; border-radius: 4px; border: 1.6px solid currentColor; }
.ps-tabs .on { color: #059669; font-weight: 700; }
/* bước 2: bản đồ */
.ps-map { position: relative; height: 150px; overflow: hidden; border-radius: 14px; background-color: #e5f5ee; background-image: linear-gradient(#fff 2px, transparent 2px), linear-gradient(90deg, #fff 2px, transparent 2px); background-size: 30px 30px; }
.ps-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ps-route { fill: none; stroke: #10b981; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 7; animation: ps-dash 1.2s linear infinite; }
@keyframes ps-dash { to { stroke-dashoffset: -15; } }
.ps-pin { position: absolute; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.ps-pin-a { left: 152px; top: 0; background: #ef4444; }
.ps-pin-b { left: 6px; top: 118px; background: #0ea5e9; }
.ps-car { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #059669; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); offset-path: path('M18 130 C 55 120, 46 70, 87 70 S 138 30, 164 22'); offset-rotate: 0deg; animation: ps-drive 5s ease-in-out infinite; }
@keyframes ps-drive { 0% { offset-distance: 0%; } 85%, 100% { offset-distance: 100%; } }
.ps-eta { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px rgba(15, 23, 42, .07); }
.ps-eta small { display: block; font-size: 9px; color: #64748b; }
.ps-eta b { font-size: 14px; color: #047857; }
.ps-live { padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 700; color: #059669; background: #ecfdf5; }
.ps-tech { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: #f1f5f9; }
.ps-tech b { display: block; font-size: 11px; }
.ps-tech small { font-size: 9px; color: #64748b; }
.ps-ava { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #047857; background: #d1fae5; }
.ps-call { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #10b981; }
/* bước 3: kiểm tra */
.ps-ring { position: relative; width: 110px; height: 110px; margin: 4px auto 10px; }
.ps-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ps-ring circle { fill: none; stroke: #e2e8f0; stroke-width: 7; }
.ps-ring .ps-ring-v { stroke: #10b981; stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 201; animation: ps-ring 4s ease-in-out infinite; }
@keyframes ps-ring { 0% { stroke-dashoffset: 201; } 60%, 100% { stroke-dashoffset: 0; } }
.ps-ring b { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 14px; font-size: 26px; font-weight: 800; color: #047857; }
.ps-ring small { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; font-size: 9px; color: #64748b; }
.ps-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ps-check li { display: flex; align-items: center; gap: 8px; padding: 7px 9px; font-size: 10.5px; border-radius: 10px; background: #fff; box-shadow: 0 3px 10px rgba(15, 23, 42, .06); }
.ps-check svg { width: 18px; height: 18px; padding: 3px; flex-shrink: 0; border-radius: 50%; color: #fff; background: #10b981; animation: ps-tick 4s ease-in-out infinite; animation-delay: calc(var(--i) * .45s); }
@keyframes ps-tick { 0%, 8% { background: #cbd5e1; } 22%, 100% { background: #10b981; } }
/* bước 4: bảo hành */
.ps-war { position: relative; overflow: hidden; padding: 14px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #10b981, #047857 60%, #065f46); box-shadow: 0 12px 24px -10px rgba(4, 120, 87, .6); }
.ps-war::after { content: ''; position: absolute; top: -40%; right: -30%; width: 70%; height: 180%; background: rgba(255, 255, 255, .12); transform: rotate(25deg); }
.ps-war-h { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 11px; }
.ps-war small { display: block; font-size: 9px; opacity: .85; }
.ps-war strong { display: block; margin: 2px 0 8px; font-size: 20px; }
.ps-war-tag { display: inline-block; padding: 4px 8px; font-size: 9px; border-radius: 999px; background: rgba(255, 255, 255, .18); }
.ps-lbl { margin: 12px 0 6px; font-size: 10px; color: #64748b; }
.ps-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.ps-pay span { padding: 8px 0; text-align: center; font-size: 9.5px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; }
.ps-pay .on { border-color: #10b981; color: #047857; font-weight: 700; background: #ecfdf5; }

@media (max-width: 1200px) { .pd3 { --pd3-s: .86; } }
@media (max-width: 960px) {
  .process-detail-panel.show { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .process-detail-panel { padding: 32px 28px; }
  .pd3 { height: 470px; --pd3-s: .8; }
}
@media (max-width: 560px) {
  .process-detail-panel { padding: 24px 16px; border-radius: 22px; }
  .pd-cta { flex-wrap: wrap; }
  .process-detail-panel .pd-book { width: 100%; justify-content: center; min-height: 54px; }
  .pd-doodle { display: none; }
  .pd3 { height: 360px; margin: 0 -16px; --pd3-s: .58; }
}
@media (max-width: 380px) { .pd3 { height: 330px; --pd3-s: .52; } }
@media (prefers-reduced-motion: reduce) {
  .pd3-orbit { animation-duration: 70s; }
  .pd3-chip-in { animation-duration: 70s, 70s, .7s; }
  .pd3-phone, .pd3-world { animation-duration: 20s; }
}

/* Đánh giá thật: nhãn đã xác minh + trả lời của cửa hàng */
.review-verified { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: .68rem; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.review-reply { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: #f0fdf4; border-left: 3px solid #10b981; color: #065f46; font-size: .85rem; line-height: 1.5; }

/* ===== Chung cho 2 khu "So sánh" và "Tại sao chọn": nhãn, tiêu đề chuyển màu, gạch chân, chấm sáng ===== */
.cmp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background: rgba(236, 253, 245, .9); color: #047857; font-weight: 800; font-size: .85rem; letter-spacing: .04em; box-shadow: 0 10px 26px -8px rgba(16, 185, 129, .35), inset 0 0 0 1px #d1fae5; }
.cmp-grad { background: linear-gradient(90deg, #047857, #10b981 55%, #059669); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cmp-bar { display: block; width: 64px; height: 4px; margin: 14px auto 0; border-radius: 4px; background: linear-gradient(90deg, #10b981, #059669); }
.cmp-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6ee7b7, #10b981); box-shadow: 0 0 0 6px rgba(16, 185, 129, .12), 0 0 18px rgba(16, 185, 129, .6); animation: cmp-dot 6s ease-in-out infinite; }
.cmp-dot.d1 { left: 2%; top: 22%; } .cmp-dot.d2 { right: 9%; top: 9%; animation-delay: -2s; } .cmp-dot.d3 { left: 11%; bottom: 14%; width: 18px; height: 18px; animation-delay: -4s; }
.cmp-dot.d4 { right: 3%; bottom: 28%; width: 10px; height: 10px; animation-delay: -1s; } .cmp-dot.d5 { right: 12%; top: 26%; width: 18px; height: 18px; animation-delay: -3s; }
@keyframes cmp-dot { 50% { transform: translate(6px, -14px) scale(1.15); } }
@keyframes cmp-float3d { 0%, 100% { transform: translateY(0) rotateX(8deg) rotateY(-16deg) rotateZ(var(--rz, 0deg)); } 50% { transform: translateY(-14px) rotateX(-6deg) rotateY(14deg) rotateZ(var(--rz, 0deg)); } }
.cmp-section:not(.is-live) *, .why-section:not(.is-live) * { animation-play-state: paused !important; }

/* ===== So sánh: TRIPHONE tận nhà vs cửa hàng ===== */
.cmp-section { position: relative; overflow: hidden; isolation: isolate; padding: 90px 0 80px; background: radial-gradient(50% 40% at 50% 0%, #ecfdf5 0%, transparent 70%), radial-gradient(40% 50% at 100% 60%, #e6fbf2 0%, transparent 70%), radial-gradient(40% 50% at 0% 70%, #effdf6 0%, transparent 70%), #f8fafc; }
.cmp-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; perspective: 1000px; }
.cmp-phone { position: absolute; width: 230px; height: 460px; border-radius: 48px; border: 7px solid #e2e8f0; background: linear-gradient(135deg, #f8fafc, #d1fae5 55%, #a7f3d0); box-shadow: 0 40px 80px -40px rgba(4, 120, 87, .45), inset 0 0 0 2px #fff; opacity: .6; }
.cmp-phone-l { left: -90px; top: 18%; transform: rotateY(38deg) rotateZ(-16deg); animation: cmp-phone-l 14s ease-in-out infinite; }
.cmp-phone-r { right: -110px; top: 26%; transform: rotateY(-38deg) rotateZ(14deg); animation: cmp-phone-r 16s ease-in-out infinite; }
.cmp-phone-r i { position: absolute; left: 18px; top: 18px; width: 110px; height: 120px; border-radius: 30px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 2px #fff; }
.cmp-phone-r b { position: absolute; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #475569, #0f172a 60%); box-shadow: 0 0 0 5px #cbd5e1; }
.cmp-phone-r b:nth-of-type(1) { left: 30px; top: 28px; } .cmp-phone-r b:nth-of-type(2) { left: 30px; top: 84px; } .cmp-phone-r b:nth-of-type(3) { left: 78px; top: 56px; }
@keyframes cmp-phone-l { 50% { transform: rotateY(22deg) rotateZ(-12deg) translateY(-18px); } }
@keyframes cmp-phone-r { 50% { transform: rotateY(-24deg) rotateZ(10deg) translateY(16px); } }
.cmp-glass { position: absolute; display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 14px; border-radius: 22px; background: rgba(255, 255, 255, .72); border: 1px solid #fff; box-shadow: 0 24px 40px -20px rgba(15, 23, 42, .25); color: #334155; font-weight: 600; font-size: .86rem; line-height: 1.35; animation: cmp-float3d 8s ease-in-out infinite; }
.cmp-glass-l { left: 4%; top: 110px; --rz: -12deg; }
.cmp-glass-r { right: 4%; top: 100px; --rz: 12deg; animation-delay: -3s; }
.cmp-glass-ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 10px 18px -8px rgba(5, 150, 105, .7); }
.cmp-tool { position: absolute; right: 5%; bottom: 120px; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: #059669; background: #fff; box-shadow: 0 20px 40px -16px rgba(15, 23, 42, .3); animation: cmp-float3d 7s ease-in-out infinite; --rz: 8deg; }

.cmp-head { text-align: center; margin-bottom: 44px; }
.cmp-head h2, .why-head h2 { margin: 22px 0 12px; font-size: clamp(1.75rem, 3.3vw, 2.9rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: #0f172a; }
.cmp-head p, .why-head p { margin: 0 auto; max-width: 640px; color: #64748b; font-size: 1.05rem; }

.cmp-stage { perspective: 1800px; }
.cmp { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr) minmax(0, 1.14fr); transform-style: preserve-3d;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .5s cubic-bezier(.22, 1, .36, 1); animation: cmp-sway 10s ease-in-out infinite; }
.cmp.is-hover { animation-play-state: paused; }
@keyframes cmp-sway { 0%, 100% { rotate: x 4deg; } 50% { rotate: x 1deg; } }
.cmp-row { display: contents; }
.cmp-panel { grid-column: 1 / -1; grid-row: 1 / -1; margin: 16px 0; border-radius: 28px; background: rgba(255, 255, 255, .78); border: 1px solid #e3f4ec; box-shadow: 0 40px 80px -46px rgba(15, 23, 42, .4); }
.cmp-us-bg { grid-column: 2; grid-row: 1 / -1; position: relative; border-radius: 26px; background: linear-gradient(180deg, #f2fdf8, #e3faf0); border: 2px solid #6ee7b7; transform: translateZ(46px);
  box-shadow: 0 40px 70px -30px rgba(16, 185, 129, .55), 0 0 0 7px rgba(16, 185, 129, .07); }
.cmp-us-bg i { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.cmp-us-bg i::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 28%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .7), transparent); transform: translateY(-120%); animation: cmp-sheen 5.5s ease-in-out infinite; }
@keyframes cmp-sheen { 60%, 100% { transform: translateY(420%); } }
.cmp-cell { grid-row: var(--r); position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; margin: 6px 10px; padding: 12px 18px; border-radius: 18px; font-size: .98rem; line-height: 1.45; transform: translateZ(1px); }
.cmp-crit { grid-column: 1; font-weight: 700; color: #0f172a; }
.cmp-us { grid-column: 2; color: #0f172a; font-weight: 600; transform: translateZ(47px); }
.cmp-them { grid-column: 3; color: #64748b; font-size: .93rem; }
.cmp-crit:not(.cmp-h), .cmp-them:not(.cmp-h) { background: rgba(248, 250, 252, .9); }
.cmp-us:not(.cmp-h) { margin: 6px 12px; background: #fff; box-shadow: 0 10px 20px -14px rgba(5, 150, 105, .55); }
.cmp-h { min-height: 86px; margin-top: 22px; font-size: 1.08rem; font-weight: 800; color: #0f172a; }
.cmp-us.cmp-h { margin-top: 12px; color: #065f46; }
.cmp-us.cmp-h b { color: #059669; }
.cmp-ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #334155; background: #fff; box-shadow: 0 6px 14px -6px rgba(15, 23, 42, .25); }
.cmp-shield { width: 50px; height: 50px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #34d399, #047857); box-shadow: 0 10px 20px -8px rgba(4, 120, 87, .7); animation: cmp-shield 4s ease-in-out infinite; }
@keyframes cmp-shield { 50% { transform: rotateY(25deg) scale(1.06); } }
.cmp-store { display: grid; place-items: center; color: #0f172a; }
.cmp-hot { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; font-style: normal; font-size: .76rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #10b981, #047857); box-shadow: 0 6px 14px -6px rgba(4, 120, 87, .7); white-space: nowrap; }
.cmp-hot svg { color: #fcd34d; fill: #fcd34d; }
.cmp-ok, .cmp-no { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; }
.cmp-ok { color: #fff; background: radial-gradient(circle at 35% 30%, #4ade80, #16a34a 60%, #0e7a3a); box-shadow: 0 6px 12px -4px rgba(22, 163, 74, .55); }
.cmp-no { color: #ef4444; background: #fee2e2; box-shadow: inset 0 0 0 1px #fecaca; }
/* Hiện dần khi cuộn tới: tiêu chí trượt từ trái, cột cửa hàng từ phải, dấu tích bật lên lần lượt */
.cmp-section.is-in .cmp-row:not(.cmp-hrow) .cmp-crit { animation: cmp-in-l .6s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i) * .1s); }
.cmp-section.is-in .cmp-row:not(.cmp-hrow) .cmp-them { animation: cmp-in-r .6s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(.15s + var(--i) * .1s); }
.cmp-section.is-in .cmp-ok { animation: cmp-pop .55s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(.3s + var(--i) * .12s); }
@keyframes cmp-in-l { from { opacity: 0; translate: -30px 0; } }
@keyframes cmp-in-r { from { opacity: 0; translate: 30px 0; } }
@keyframes cmp-pop { from { scale: 0; } }

.cmp-cta { display: grid; justify-items: center; gap: 20px; margin-top: 44px; }
.cmp-btn { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 74px; padding: 12px 12px 12px 30px; border: 0; border-radius: 999px; cursor: pointer; font: 800 1.2rem 'Manrope', sans-serif; color: #fff;
  background: linear-gradient(135deg, #059669, #047857 60%, #065f46); box-shadow: 0 22px 44px -16px rgba(4, 120, 87, .75), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s; }
.cmp-btn:hover { transform: translateY(-3px); box-shadow: 0 28px 50px -16px rgba(4, 120, 87, .85), inset 0 1px 0 rgba(255, 255, 255, .25); }
.cmp-btn::before, .cmp-btn::after { content: ''; position: absolute; top: 50%; width: 46px; height: 2px; border-radius: 2px; background: #10b981; opacity: .6; }
.cmp-btn::before { right: calc(100% + 18px); transform: rotate(-20deg); }
.cmp-btn::after { left: calc(100% + 18px); transform: rotate(20deg); }
.cmp-btn-ic { display: grid; place-items: center; }
.cmp-btn-go { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #047857; background: #fff; margin-left: 14px; animation: cmp-go 1.8s ease-in-out infinite; }
@keyframes cmp-go { 50% { transform: translateX(4px); } }
.cmp-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; color: #64748b; font-size: .86rem; }
.cmp-trust li { display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; }
.cmp-trust li + li { border-left: 1px solid #cbd5e1; }

@media (max-width: 1100px) { .cmp-phone, .cmp-glass { display: none; } .cmp-cell { font-size: .92rem; padding: 10px 12px; } }
@media (max-width: 820px) {
  .cmp-section { padding: 48px 0 44px; }
  .cmp-stage { perspective: none; }
  .cmp { display: flex; flex-direction: column; transform: none; animation: none; }
  .cmp-panel, .cmp-us-bg, .cmp-tool, .cmp-hrow .cmp-crit { display: none; }
  .cmp-hrow .cmp-cell { padding: 8px 10px; font-size: .92rem; }
  .cmp-row { display: block; margin-bottom: 12px; padding: 14px; border-radius: 20px; background: #fff; border: 1px solid #e2f5ec; box-shadow: 0 14px 30px -22px rgba(15, 23, 42, .35); }
  .cmp-cell { min-height: 0; margin: 0 !important; padding: 8px 10px; transform: none !important; box-shadow: none !important; }
  .cmp-crit { padding: 0 0 10px; background: none !important; font-size: 1rem; }
  .cmp-ic { width: 38px; height: 38px; }
  .cmp-us { background: #ecfdf5 !important; margin-bottom: 6px !important; }
  .cmp-them { background: #f8fafc !important; }
  .cmp-ok, .cmp-no { width: 28px; height: 28px; }
  .cmp-btn { font-size: 1.05rem; min-height: 62px; padding-left: 22px; }
  .cmp-btn::before, .cmp-btn::after { display: none; }
  .cmp-trust li { padding: 0 10px; font-size: .8rem; }
}

/* ===== Tại sao chọn TRIPHONE: 4 thẻ có hình minh hoạ 3D chuyển động ===== */
.why-section { position: relative; }
.why-deco { position: absolute; inset: 0; pointer-events: none; perspective: 900px; }
.why-tile { position: absolute; width: 78px; height: 78px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #6ee7b7, #10b981 60%, #059669); box-shadow: 0 20px 34px -14px rgba(16, 185, 129, .7), inset 0 2px 0 rgba(255, 255, 255, .5); opacity: .9; animation: cmp-float3d 7s ease-in-out infinite; }
.why-tile-l { left: 3%; top: 60px; --rz: -14deg; }
.why-tile-r { right: 3%; top: 50px; --rz: 12deg; animation-delay: -3s; }
.why-path { position: absolute; left: 7%; top: 30px; width: 280px; height: 150px; }
.why-path path { animation: why-dash 3s linear infinite; }
@keyframes why-dash { to { stroke-dashoffset: -24; } }
.why-head { position: relative; text-align: center; margin-bottom: 44px; }
.why-head .cmp-grad { display: block; }
.why-head .cmp-bar { margin: 6px auto 14px; }
.why-doodle { position: absolute; right: 13%; top: 70px; animation: why-doodle 4s ease-in-out infinite; }
@keyframes why-doodle { 50% { transform: translate(-6px, 4px) rotate(-4deg); } }
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.why-card { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 26px 24px 0; border-radius: 26px; background: linear-gradient(180deg, #fff 50%, var(--cs) 160%); border: 1px solid #eef2f7; box-shadow: 0 26px 50px -32px rgba(15, 23, 42, .35); }
.why-num { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--c); background: var(--cs); font: 800 1rem 'Space Grotesk', sans-serif; }
.why-ic { position: relative; width: 96px; height: 96px; margin-bottom: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle, var(--cs) 0 66%, transparent 67%); perspective: 300px; }
.why-ic::before { content: ''; position: absolute; inset: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 55%, var(--cd)); box-shadow: 0 12px 20px -8px var(--c), inset 0 -5px 10px rgba(0, 0, 0, .15); }
.why-ic svg { position: relative; animation: why-ic 5s ease-in-out infinite; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }
.why-ic::before { animation: why-ic 5s ease-in-out infinite; }
@keyframes why-ic { 0%, 100% { transform: rotateY(-22deg) translateY(0); } 50% { transform: rotateY(22deg) translateY(-5px); } }
.why-ic-clock i { position: absolute; left: -6px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent, #6ee7b7); transform-origin: right; animation: why-speed 1.4s ease-in-out infinite; }
.why-ic-clock i:nth-of-type(1) { top: 36px; width: 30px; } .why-ic-clock i:nth-of-type(2) { top: 48px; width: 22px; left: 2px; animation-delay: -.4s; } .why-ic-clock i:nth-of-type(3) { top: 60px; width: 26px; animation-delay: -.8s; }
@keyframes why-speed { 50% { transform: scaleX(.4); opacity: .4; } }
.why-card h3 { margin: 0 0 10px; padding-right: 40px; font-size: 1.22rem; line-height: 1.3; font-weight: 800; color: #0f172a; }
.why-card p { margin: 0 0 16px; color: #64748b; font-size: .93rem; line-height: 1.65; }
.why-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; margin-bottom: 18px; border-radius: 999px; background: var(--cs); color: var(--cd); font-weight: 700; font-size: .8rem; }
.why-tag svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; color: #fff; background: var(--c); }
.why-art { position: relative; height: 180px; margin: auto -24px 0; perspective: 700px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cs) 70%, transparent)); }

/* 01 bản đồ gấp + ghim nhảy */
.map3d { position: absolute; left: 50%; top: 58%; width: 200px; height: 130px; margin: -65px 0 0 -110px; border-radius: 14px; border: 4px solid #fff; transform: rotateX(58deg) rotateZ(-26deg); animation: why-map 8s ease-in-out infinite;
  background: radial-gradient(circle at 70% 30%, #a7f3d0 0 18%, transparent 19%), radial-gradient(circle at 20% 80%, #bbf7d0 0 14%, transparent 15%), repeating-linear-gradient(0deg, transparent 0 22px, #fff 22px 25px), repeating-linear-gradient(90deg, transparent 0 26px, #fff 26px 29px), #d1fae5;
  box-shadow: 0 30px 30px -14px rgba(4, 120, 87, .45); }
@keyframes why-map { 50% { transform: rotateX(52deg) rotateZ(-18deg); } }
.map3d svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-route { fill: none; stroke: #3b82f6; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 7 7; animation: ps-dash 1.2s linear infinite; }
.map-a, .map-b { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #3b82f6; border: 3px solid #fff; }
.map-a { left: 12px; bottom: 16px; } .map-b { right: 14px; top: 12px; }
.map-pin { position: absolute; left: calc(50% - 26px); top: 6px; color: #047857; animation: why-pin 1.8s ease-in-out infinite; }
.map-pin svg path { fill: #10b981; } .map-pin svg circle { fill: #fff; }
.map-shadow { position: absolute; left: calc(50% - 16px); top: 64px; width: 32px; height: 10px; border-radius: 50%; background: rgba(4, 120, 87, .3); animation: why-pin-sh 1.8s ease-in-out infinite; }
@keyframes why-pin { 50% { transform: translateY(-12px); } }
@keyframes why-pin-sh { 50% { transform: scale(.6); opacity: .5; } }
.map-bubble { position: absolute; right: 16px; top: 10px; padding: 8px 14px; border-radius: 16px; background: #fff; color: #047857; font-weight: 800; font-size: .85rem; line-height: 1.2; text-align: center; box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .35); animation: cmp-float3d 6s ease-in-out infinite; --rz: -8deg; }

/* 02 điện thoại bảo hành + vòng sáng quay */
.war-ring { position: absolute; left: 50%; top: 66%; width: 230px; height: 230px; margin: -115px 0 0 -115px; border-radius: 50%; border: 2px solid rgba(14, 165, 233, .35); transform: rotateX(76deg); animation: why-ring 6s linear infinite; }
.war-ring.r2 { width: 290px; height: 290px; margin: -145px 0 0 -145px; border: 2px dashed rgba(14, 165, 233, .25); animation-duration: 10s; animation-direction: reverse; }
@keyframes why-ring { to { transform: rotateX(76deg) rotateZ(360deg); } }
.war-phone { position: absolute; left: 50%; top: 14px; width: 120px; height: 200px; margin-left: -60px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 22px; border-radius: 24px; background: linear-gradient(180deg, #fff, #f0f9ff); border: 5px solid #1e293b; box-shadow: 0 30px 40px -20px rgba(3, 105, 161, .5); transform: rotateX(20deg) rotateY(-24deg) rotateZ(8deg); animation: why-war 7s ease-in-out infinite; }
@keyframes why-war { 50% { transform: rotateX(14deg) rotateY(14deg) rotateZ(4deg) translateY(-8px); } }
.war-shield { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, #4ade80, #16a34a 60%, #0e7a3a); box-shadow: 0 8px 16px -6px rgba(22, 163, 74, .6); }
.war-phone b { font-size: .78rem; font-weight: 800; text-align: center; line-height: 1.25; color: #0f172a; }
.war-phone i { width: 70%; height: 6px; border-radius: 6px; background: #e2e8f0; }

/* 03 điện thoại mở nắp, các lớp tách ra */
.open3d { position: absolute; left: 50%; top: 52%; width: 170px; height: 100px; margin: -40px 0 0 -110px; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-30deg); animation: why-open 9s ease-in-out infinite; }
@keyframes why-open { 50% { transform: rotateX(50deg) rotateZ(-20deg); } }
.open3d > i { position: absolute; inset: 0; border-radius: 18px; }
.op-body { background: linear-gradient(135deg, #e2e8f0, #94a3b8); border: 4px solid #cbd5e1; box-shadow: 0 20px 24px -10px rgba(15, 23, 42, .4); }
.op-body b { position: absolute; border-radius: 4px; background: #1e293b; }
.op-body b:nth-child(1) { left: 14px; top: 14px; width: 46px; height: 30px; } .op-body b:nth-child(2) { left: 70px; top: 14px; width: 30px; height: 64px; background: #334155; }
.op-body b:nth-child(3) { left: 110px; top: 18px; width: 40px; height: 24px; } .op-body b:nth-child(4) { left: 14px; top: 54px; width: 46px; height: 26px; background: #475569; }
.op-mid { background: rgba(139, 92, 246, .25); border: 2px solid rgba(139, 92, 246, .5); transform: translateZ(22px); animation: why-mid 4s ease-in-out infinite; }
.op-glass { background: linear-gradient(135deg, #475569, #0f172a); border: 3px solid #64748b; transform: translateZ(44px) translate(10px, -14px); animation: why-glass 4s ease-in-out infinite; box-shadow: inset 6px 6px 14px rgba(255, 255, 255, .15); }
@keyframes why-mid { 50% { transform: translateZ(34px); } }
@keyframes why-glass { 50% { transform: translateZ(70px) translate(16px, -22px) rotateX(-8deg); } }
.open-chip { position: absolute; right: 14px; top: 8px; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 14px; background: #fff; color: #334155; font-size: .76rem; font-weight: 700; line-height: 1.25; box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .35); animation: cmp-float3d 6s ease-in-out infinite; --rz: 4deg; }
.open-chip svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #a78bfa, #7c3aed); }

/* 04 bảng kiểm tra + chữ 0Đ nổi khối */
.clip3d { position: absolute; left: 22px; bottom: -6px; width: 124px; height: 156px; padding: 22px 12px 0; border-radius: 14px; background: #fff; border: 5px solid #10b981; box-shadow: 0 20px 30px -14px rgba(4, 120, 87, .5); transform: rotate(-9deg) rotateY(16deg); animation: why-clip 7s ease-in-out infinite; }
.clip3d::before { content: ''; position: absolute; left: 50%; top: -12px; width: 44px; height: 16px; margin-left: -22px; border-radius: 6px; background: #047857; }
@keyframes why-clip { 50% { transform: rotate(-5deg) rotateY(-6deg) translateY(-6px); } }
.clip3d b { display: block; margin-bottom: 8px; font-size: .74rem; font-weight: 800; line-height: 1.2; color: #0f172a; }
.clip3d span { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.clip3d span i { width: 18px; height: 18px; flex-shrink: 0; border-radius: 5px; display: grid; place-items: center; color: #fff; background: #10b981; animation: why-tick 3.6s ease-in-out infinite; }
.clip3d span:nth-of-type(2) i { animation-delay: .5s; } .clip3d span:nth-of-type(3) i { animation-delay: 1s; }
@keyframes why-tick { 0%, 10% { transform: scale(0); } 22%, 100% { transform: scale(1); } }
.clip3d span em { flex: 1; height: 6px; border-radius: 6px; background: #e2e8f0; }
.zero3d { position: absolute; right: 22px; bottom: 18px; font: 900 4.4rem/1 'Space Grotesk', sans-serif; color: #10b981;
  text-shadow: 1px 1px 0 #059669, 2px 2px 0 #059669, 3px 3px 0 #047857, 4px 4px 0 #047857, 5px 5px 0 #065f46, 6px 6px 0 #065f46, 12px 16px 20px rgba(4, 120, 87, .35);
  transform: rotateY(-22deg); animation: why-zero 6s ease-in-out infinite; }
.zero3d small { font-size: .5em; }
@keyframes why-zero { 50% { transform: rotateY(18deg) translateY(-6px); } }

@media (max-width: 1200px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .why-doodle, .why-path { display: none; } }
@media (max-width: 768px) {
  .why-tile { width: 54px; height: 54px; border-radius: 16px; top: 6px; }
  .why-tile svg { width: 24px; height: 24px; }
  .why-grid.m-swipe { display: flex; }
  .why-card { padding: 22px 20px 0; }
  .why-art { margin: auto -20px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-section *, .why-section * { animation-duration: 30s !important; }
  .cmp { animation: none; }
}

/* ===== Khu vực phục vụ: danh sách quận + bản đồ Hà Nội 3D (ghim đứng, xe thợ chạy tới quận đang chọn) ===== */
@property --ar-sway { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.ar-section { position: relative; }
.ar-section:not(.is-live) * { animation-play-state: paused !important; }
.ar-deco { position: absolute; inset: 0; pointer-events: none; perspective: 900px; }
.ar-glass { position: absolute; left: max(4px, calc((100% - var(--page-w)) / 2 - 40px)); top: 70px; display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 14px; border-radius: 20px; background: rgba(255, 255, 255, .78); border: 1px solid #fff; box-shadow: 0 24px 40px -20px rgba(15, 23, 42, .28); color: #334155; font-weight: 600; font-size: .84rem; line-height: 1.35; animation: cmp-float3d 8s ease-in-out infinite; --rz: -10deg; z-index: 2; }
.ar-glass svg { color: #059669; }
.ar-arrow { display: none; }
.ar-arrow path { animation: why-dash 3s linear infinite; }

.ar-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.ar-head { text-align: center; margin-bottom: 30px; }
.ar-head h2 { margin: 22px 0 12px; font-size: clamp(1.8rem, 3.3vw, 2.9rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.ar-head p { max-width: 560px; margin: 0 auto; }
.ar-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ar-list a { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-radius: 999px; background: #fff; border: 1px solid #e3f4ec; color: #0f172a; font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 22px -16px rgba(15, 23, 42, .35); transition: transform .3s cubic-bezier(.22, 1, .36, 1), background .25s, color .25s, box-shadow .25s; }
.ar-list a svg { color: #10b981; flex-shrink: 0; transition: transform .3s, color .25s; }
.ar-list a:hover, .ar-list a.is-on { background: linear-gradient(135deg, #10b981, #047857); color: #fff; transform: translateY(-4px); box-shadow: 0 16px 28px -12px rgba(4, 120, 87, .6); }
.ar-list a:hover svg, .ar-list a.is-on svg { color: #fff; transform: translateY(-2px) scale(1.1); }

/* cảnh 3D */
.ar-scene { position: relative; height: 470px; perspective: 1200px; perspective-origin: 50% 30%; }
.ar-world { --ar-ax: calc(56deg + var(--ar-my, 0deg)); --ar-az: calc(-32deg + var(--ar-mx, 0deg) + var(--ar-sway)); position: absolute; left: 50%; top: 54%; width: 400px; height: 400px; margin: -200px 0 0 -200px; transform-style: preserve-3d; transform: rotateX(var(--ar-ax)) rotateZ(var(--ar-az)); scale: var(--ar-s, 1.12); animation: ar-sway 16s ease-in-out infinite; }
@keyframes ar-sway { 0%, 100% { --ar-sway: -6deg; } 50% { --ar-sway: 6deg; } }
.ar-plate { position: absolute; inset: 0; border-radius: 36px; background: #b7e4cb; transform: translateZ(-20px); box-shadow: 40px 40px 70px -20px rgba(4, 120, 87, .35); }
.ar-plate::before, .ar-plate::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #cdeedb; }
.ar-plate::before { transform: translateZ(7px); } .ar-plate::after { transform: translateZ(14px); background: #dcf3e6; }
.ar-map { position: absolute; inset: 0; border-radius: 36px; border: 6px solid #fff; transform-style: preserve-3d;
  background: radial-gradient(60px 44px at 330px 300px, #bbf7d0 60%, transparent 62%), radial-gradient(50px 40px at 60px 120px, #bbf7d0 60%, transparent 62%), radial-gradient(40px 34px at 120px 330px, #c7f9d8 60%, transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(255, 255, 255, .95) 46px 51px), repeating-linear-gradient(90deg, transparent 0 52px, rgba(255, 255, 255, .95) 52px 57px), #e9f5ee; }
.ar-geo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ar-river { fill: none; stroke: #93cff5; stroke-width: 34; stroke-linecap: round; }
.ar-lake { fill: #a5d8f8; }
.ar-route { fill: none; stroke: #059669; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 10 9; filter: drop-shadow(0 0 6px rgba(16, 185, 129, .6)); animation: ar-dash .9s linear infinite; }
@keyframes ar-dash { to { stroke-dashoffset: -19; } }
/* đứng thẳng quay mặt về người xem: xoay ngược góc nghiêng của bản đồ */
.ar-pin i, .ar-store i, .ar-bike i, .ar-tree::after { transform-origin: 50% 100%; transform: rotateZ(calc(var(--ar-az) * -1)) rotateX(calc(var(--ar-ax) * -1)); }
.ar-pin, .ar-store, .ar-tree, .ar-ring { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; transform-style: preserve-3d; }
.ar-pin::before { content: ''; position: absolute; left: -9px; top: -5px; width: 18px; height: 10px; border-radius: 50%; background: rgba(4, 120, 87, .3); }
.ar-pin i { position: absolute; left: -15px; bottom: 0; display: block; color: #047857; transition: scale .3s; }
.ar-pin i svg path { fill: #10b981; } .ar-pin i svg circle { fill: #fff; }
.ar-pin b { position: absolute; left: 50%; bottom: 0; translate: -50% 0; padding: 4px 10px; border-radius: 999px; background: #fff; color: #047857; font-size: .8rem; white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(15, 23, 42, .35); opacity: 0; transform-origin: 50% 100%; transform: rotateZ(calc(var(--ar-az) * -1)) rotateX(calc(var(--ar-ax) * -1)) translateY(-40px); transition: opacity .3s; pointer-events: none; }
.ar-pin.on i { scale: 1.45; animation: ar-bounce .9s ease-in-out infinite; }
.ar-pin.on i svg path { fill: #059669; }
.ar-pin.on b { opacity: 1; transform: rotateZ(calc(var(--ar-az) * -1)) rotateX(calc(var(--ar-ax) * -1)) translateY(-58px); }
@keyframes ar-bounce { 50% { translate: 0 -8px; } }
.ar-store { left: var(--sx); top: var(--sy); }
.ar-store i { position: absolute; left: -24px; bottom: 6px; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #34d399, #047857); box-shadow: 0 12px 20px -6px rgba(4, 120, 87, .7); }
.ar-ring { left: var(--sx); top: var(--sy); }
.ar-ring::after { content: ''; position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 3px solid rgba(16, 185, 129, .7); background: rgba(16, 185, 129, .12); animation: ar-ring 2.4s ease-out infinite; }
.ar-ring.r2::after { animation-delay: 1.2s; }
@keyframes ar-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.ar-tree::after { content: ''; position: absolute; left: -10px; bottom: 0; width: 20px; height: 26px; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, #86efac, #22c55e 55%, #15803d); box-shadow: 0 3px 0 -1px #a16207; }
.ar-bike { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; offset-rotate: 0deg; offset-distance: 0%; }
.ar-bike.go { animation: ar-drive 2.6s cubic-bezier(.45, 0, .25, 1) forwards; }
@keyframes ar-drive { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.ar-bike i { position: absolute; left: -21px; bottom: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #059669; background: #fff; border: 3px solid #10b981; box-shadow: 0 10px 18px -6px rgba(4, 120, 87, .6); }
.ar-bubble { position: absolute; right: 0; top: 8px; display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; border-radius: 20px; background: rgba(255, 255, 255, .92); border: 1px solid #fff; box-shadow: 0 24px 40px -18px rgba(15, 23, 42, .3); animation: cmp-float3d 7s ease-in-out infinite; --rz: 6deg; z-index: 3; }
.ar-bubble > span { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #34d399, #047857); }
.ar-bubble b { display: block; color: #0f172a; font-size: .95rem; }
.ar-bubble small { color: #475569; font-size: .82rem; line-height: 1.35; }
.ar-bubble em { font-style: normal; font-weight: 800; color: #059669; }

/* 3 thẻ thông tin */
.ar-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.ar-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; padding: 22px; border-radius: 24px; background: #fff; border: 1px solid #eef2f7; box-shadow: 0 24px 48px -32px rgba(15, 23, 42, .35); color: inherit; text-decoration: none; }
.ar-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: #059669; background: linear-gradient(135deg, #ecfdf5, #d1fae5); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.ar-ic-blue { color: #2563eb; background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.ar-card:hover .ar-ic { transform: perspective(300px) rotateY(360deg); }
.ar-txt strong { display: block; margin-bottom: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.ar-txt span { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.45; color: #0f172a; }
.ar-txt .ar-big { font: 800 1.65rem/1.2 'Space Grotesk', sans-serif; }
.ar-tel a { color: #059669; text-decoration: none; }
.ar-txt small { display: block; margin-top: 2px; color: #64748b; font-size: .9rem; }
.ar-go { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #e2e8f0; color: #334155; transition: transform .25s, background .25s; }
.ar-card:hover .ar-go { transform: translateX(3px); background: #ecfdf5; }
.ar-mini { grid-column: 1 / -1; position: relative; height: 140px; margin-top: 14px; overflow: hidden; border-radius: 16px; background: repeating-linear-gradient(28deg, transparent 0 34px, #fff 34px 38px), repeating-linear-gradient(-62deg, transparent 0 44px, #fff 44px 47px), #edf1f5; }
.mm-river { position: absolute; right: -30px; top: -20px; width: 90px; height: 200px; border-radius: 40px; background: #a5d8f8; transform: rotate(22deg); }
.mm-road { position: absolute; height: 7px; border-radius: 4px; background: #fde68a; }
.mm-road.r1 { left: -10px; top: 46px; width: 120%; transform: rotate(-8deg); } .mm-road.r2 { left: 40%; top: -10px; width: 8px; height: 170px; transform: rotate(14deg); } .mm-road.r3 { left: -10px; top: 108px; width: 70%; transform: rotate(6deg); background: #fff; }
.mm-park { position: absolute; left: 14px; top: 64px; width: 70px; height: 34px; border-radius: 12px; background: #bbf7d0; }
.mm-pin { position: absolute; left: 30%; top: 30px; color: #047857; animation: why-pin 1.8s ease-in-out infinite; }
.mm-pin svg path { fill: #10b981; } .mm-pin svg circle { fill: #fff; }
.mm-tag { position: absolute; left: calc(30% + 40px); top: 24px; padding: 8px 12px; border-radius: 12px; background: #fff; font-size: .74rem; line-height: 1.35; color: #475569; box-shadow: 0 10px 20px -10px rgba(15, 23, 42, .35); }
.mm-tag b { display: block; color: #0f172a; font-size: .8rem; }
.ar-checks { grid-column: 1 / -1; list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.ar-checks li { display: flex; align-items: center; gap: 10px; color: #334155; font-size: .93rem; }
.ar-checks svg { width: 24px; height: 24px; padding: 6px; flex-shrink: 0; border-radius: 50%; color: #fff; background: #10b981; }
.ar-acts { grid-column: 1 / -1; display: flex; justify-content: space-around; gap: 8px; margin-top: 16px; }
.ar-acts a, .ar-acts button { display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; font: 600 .9rem 'Manrope', sans-serif; color: #334155; text-decoration: none; cursor: pointer; }
.ar-acts i { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-style: normal; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.ar-acts a:hover i, .ar-acts button:hover i { transform: translateY(-5px) perspective(300px) rotateY(360deg); }
.a-call { color: #fff; background: radial-gradient(circle at 35% 30%, #34d399, #059669 60%, #047857); box-shadow: 0 12px 22px -8px rgba(4, 120, 87, .65); }
.a-zalo { color: #fff; background: radial-gradient(circle at 35% 30%, #3b82f6, #0068ff 60%, #0050c8); box-shadow: 0 12px 22px -8px rgba(0, 104, 255, .6); font-weight: 800; font-size: 1rem; }
.a-book { color: #e11d48; background: #ffe4e6; box-shadow: 0 12px 22px -12px rgba(225, 29, 72, .5); }

@media (max-width: 1100px) {
  .ar-top { grid-template-columns: minmax(0, 1fr); }
  .ar-scene { height: 400px; }
  .ar-glass, .ar-arrow { display: none; }
  .ar-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ar-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ar-list a { padding: 11px 12px; font-size: .88rem; }
  .ar-scene { height: 300px; --ar-s: .66; margin: 0 -16px; }
  .ar-bubble { right: 8px; top: 0; padding: 10px 12px 10px 10px; }
  .ar-bubble > span { width: 36px; height: 36px; }
  .ar-cards { grid-template-columns: minmax(0, 1fr); }
  .ar-txt .ar-big { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .ar-world { animation: none; } }

/* ===== Khách hàng đánh giá: băng chuyền 3D (thẻ giữa nổi lên, 2 bên nghiêng ra sau), tự chạy, vuốt được ===== */
.rvx { position: relative; overflow: hidden; isolation: isolate; padding: 90px 0 70px; background: radial-gradient(50% 40% at 50% 0%, #ecfdf5, transparent 70%), radial-gradient(35% 45% at 0% 60%, #effdf6, transparent 70%), radial-gradient(35% 45% at 100% 50%, #e9fbf2, transparent 70%), #fff; }
.rvx:not(.is-live) * { animation-play-state: paused !important; }
.rvx-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; perspective: 900px; }
.rvx-heart { position: absolute; left: 4%; top: 70px; width: 100px; height: 96px; display: grid; place-items: center; border-radius: 28px 28px 28px 6px; background: rgba(255, 255, 255, .75); border: 1px solid #fff; box-shadow: 0 24px 40px -18px rgba(15, 23, 42, .25); animation: cmp-float3d 7s ease-in-out infinite; --rz: -8deg; }
.rvx-heart svg { filter: drop-shadow(0 8px 10px rgba(5, 150, 105, .4)); animation: rvx-beat 1.6s ease-in-out infinite; }
@keyframes rvx-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(.98); } 45% { transform: scale(1.08); } }
.rvx-note { position: absolute; padding: 14px 18px; border-radius: 18px; background: #fff; color: #0f172a; font: 600 1rem/1.35 'Manrope', sans-serif; box-shadow: 0 20px 36px -18px rgba(15, 23, 42, .3); animation: cmp-float3d 8s ease-in-out infinite; }
.rvx-note-l { left: 8%; top: 190px; --rz: -8deg; animation-delay: -2s; }
.rvx-note-r { right: 2%; top: 250px; --rz: -6deg; animation-delay: -4s; }
.rvx-arrow-l { position: absolute; left: 17%; top: 250px; }
.rvx-arrow-r { position: absolute; right: 19%; top: 330px; }
.rvx-faces { position: absolute; right: 13%; top: 262px; display: flex; animation: cmp-float3d 9s ease-in-out infinite; }
.rvx-faces i { width: 50px; height: 50px; margin-left: -12px; border-radius: 50%; display: grid; place-items: center; font: 800 1.1rem 'Space Grotesk', sans-serif; font-style: normal; color: #fff; border: 3px solid #fff; box-shadow: 0 8px 16px -8px rgba(15, 23, 42, .4); background: linear-gradient(135deg, #10b981, #047857); }
.rvx-faces i:nth-child(2) { background: linear-gradient(135deg, #3b82f6, #1d4ed8); } .rvx-faces i:nth-child(3) { background: linear-gradient(135deg, #f59e0b, #d97706); }
.rvx-faces span { position: absolute; right: -10px; bottom: -12px; color: #f59e0b; fill: #fbbf24; animation: rvx-spin 6s linear infinite; }
.rvx-faces span svg { fill: #fbbf24; }
@keyframes rvx-spin { to { transform: rotateY(360deg); } }
.rvx-head { text-align: center; margin-bottom: 26px; }
.rvx-head h2 { margin: 22px 0 12px; font-size: clamp(1.8rem, 3.3vw, 2.9rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: #0f172a; }
.rvx-head p { color: #64748b; font-size: 1.05rem; }
.rvx-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-bottom: 26px; }
.rvx-stat { display: flex; align-items: center; gap: 12px; padding: 12px 22px 12px 12px; border-radius: 18px; background: #fff; border: 1px solid #eef2f7; box-shadow: 0 16px 30px -22px rgba(15, 23, 42, .35); }
.rvx-stat b { display: block; font: 800 1.12rem 'Space Grotesk', sans-serif; color: #0f172a; }
.rvx-stat small { color: #64748b; font-size: .84rem; }
.rvx-si { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #059669; background: #ecfdf5; }
.rvx-si-gold { color: #d97706; background: #fef3c7; }

.rv-stage { position: relative; perspective: 1500px; padding: 28px 0 10px; margin: 0 calc(50% - 50vw); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); touch-action: pan-y; }
.rvx .rv-track { display: grid; grid-template-columns: minmax(0, 1fr); width: min(500px, 100%); margin: 0 auto; transform-style: preserve-3d; }
.rvx .review-card { grid-area: 1 / 1; position: relative; padding: 30px 32px 28px; border-radius: 26px; border: 1.5px solid #eef2f7; background: #fff; box-shadow: 0 30px 60px -36px rgba(15, 23, 42, .45);
  transform: translateX(calc(var(--p, 0) * 104%)) translateZ(calc(var(--d, 0) * -140px)) rotateY(calc(var(--p, 0) * -24deg)) scale(calc(1 - var(--d, 0) * .08));
  opacity: calc(1 - max(var(--d, 0) - 1, 0)); filter: saturate(calc(1 - var(--d, 0) * .25));
  transition: transform .8s cubic-bezier(.22, 1, .36, 1), opacity .6s, border-color .4s, box-shadow .4s, filter .6s; cursor: grab; user-select: none; }
.rvx .review-card:hover { transform: translateX(calc(var(--p, 0) * 104%)) translateZ(calc(var(--d, 0) * -140px)) rotateY(calc(var(--p, 0) * -24deg)) scale(calc(1 - var(--d, 0) * .08)); }
.rvx .review-card.is-on { border-color: #34d399; box-shadow: 0 40px 70px -30px rgba(16, 185, 129, .45), 0 0 0 6px rgba(16, 185, 129, .08); z-index: 3; cursor: default; }
.rvx .review-card.is-far { pointer-events: none; }
.rvx .review-stars { font-size: 1.45rem; letter-spacing: 3px; background: linear-gradient(100deg, #f59e0b 40%, #fde68a 50%, #f59e0b 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.rvx .review-card.is-on .review-stars { animation: rvx-shine 2.6s ease-in-out infinite; }
@keyframes rvx-shine { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.rvx .review-service-tag { padding: 6px 14px; font-size: .82rem; }
.rvx .review-text { position: relative; margin: 18px 0 24px; padding: 0 6px 0 18px; font-size: 1.04rem; line-height: 1.7; color: #1e293b; }
.rvx .review-text::before, .rvx .review-text::after { position: absolute; font: 900 4.2rem/1 Georgia, serif; color: #a7f3d0; }
.rvx .review-text::before { content: '\201C'; left: -14px; top: -22px; }
.rvx .review-text::after { content: '\201D'; right: -4px; bottom: -46px; }
.rvx .author-avatar { width: 58px; height: 58px; font-size: 1.3rem; box-shadow: 0 10px 18px -8px rgba(15, 23, 42, .45); }
.rvx .author-info strong { font-size: 1.04rem; }
.rv-ctrl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.rv-nav { position: relative; flex-shrink: 0; width: 52px; height: 52px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #0f172a; background: #fff; box-shadow: 0 16px 30px -14px rgba(15, 23, 42, .4); cursor: pointer; transition: transform .25s, background .25s, color .25s; }
.rv-nav:hover { background: #10b981; color: #fff; transform: scale(1.08); }
.rv-dots { display: flex; justify-content: center; gap: 8px; }
.rv-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: #cbd5e1; cursor: pointer; transition: width .4s cubic-bezier(.22, 1, .36, 1), background .3s; }
.rv-dots button.is-on { width: 34px; background: linear-gradient(90deg, #10b981, #047857); }
@media (max-width: 1100px) { .rvx-note, .rvx-arrow, .rvx-faces { display: none; } .rvx-heart { width: 70px; height: 66px; top: 30px; } .rvx-heart svg { width: 40px; } }
@media (max-width: 640px) {
  .rvx { padding: 48px 0 40px; }
  .rvx-heart { display: none; }
  .rvx-stats { gap: 8px; }
  .rvx-stat { flex: 1 1 100%; padding: 8px 14px 8px 8px; }
  .rv-stage { padding: 16px 0 6px; margin: 0 -16px; }
  .rvx .rv-track { width: 84%; }
  .rvx .review-card { padding: 22px 20px; transform: translateX(calc(var(--p, 0) * 98%)) translateZ(calc(var(--d, 0) * -120px)) rotateY(calc(var(--p, 0) * -20deg)) scale(calc(1 - var(--d, 0) * .08)); }
  .rvx .review-text { font-size: .95rem; }
  .rv-nav { width: 44px; height: 44px; }
}

/* Các khu "wrap section": khung tràn hết chiều ngang để nền Aurora + hình trang trí 3D không bị cắt ở 2 bên
   (trình duyệt cắt nét vẽ theo khung của mục); nội dung vẫn rộng tối đa 1240px ở giữa.
   #buy, #news giữ dạng thẻ bo góc như thiết kế. */
.wrap.section:not(#buy) { max-width: none; padding-left: max(20px, calc((100% - var(--page-w)) / 2)); padding-right: max(20px, calc((100% - var(--page-w)) / 2)); }
@media (max-width: 640px) { .wrap.section:not(#buy) { padding-left: 16px; padding-right: 16px; } }

/* ===== Thu cũ đổi mới (#buy): thẻ lớn, máy trên bệ kính lơ lửng 3D, mũi tên tăng giá, thẻ kính bay, giá đếm lên ===== */
#buy.ti-section { padding: 30px 20px !important; background: none; }
.ti-section:not(.is-live) * { animation-play-state: paused !important; }
.ti-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: center; overflow: hidden; isolation: isolate; padding: 56px 40px 50px 64px; border-radius: 36px; border: 1.5px solid #c9f1de;
  background: radial-gradient(45% 70% at 78% 55%, #c6f6df 0%, rgba(198, 246, 223, 0) 70%), radial-gradient(40% 60% at 0% 100%, #e3fbef, transparent 70%), linear-gradient(135deg, #f8fffb, #effcf5); box-shadow: 0 40px 80px -50px rgba(4, 120, 87, .45); }
.ti-orb { position: absolute; z-index: -1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .95), rgba(167, 243, 208, .35) 45%, rgba(110, 231, 183, .08) 70%); box-shadow: inset 0 0 20px rgba(255, 255, 255, .8); animation: ti-orb 12s ease-in-out infinite; }
.ti-orb.o1 { width: 380px; height: 380px; right: 4%; top: 6%; }
.ti-orb.o2 { width: 120px; height: 120px; left: 46%; top: 8%; animation-delay: -4s; }
.ti-orb.o3 { width: 70px; height: 70px; right: 3%; bottom: 10%; animation-delay: -8s; }
@keyframes ti-orb { 50% { transform: translate(-14px, 16px) scale(1.05); } }
.ti-copy h2 { margin: 22px 0 16px; font-size: clamp(1.75rem, 3vw, 2.9rem); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: #0f172a; }
.ti-copy h2 .cmp-grad { display: block; }
@media (min-width: 1101px) { .ti-copy h2 .cmp-grad { white-space: nowrap; } .ti-card { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.ti-copy > p { margin: 0 0 22px; max-width: 520px; color: #475569; font-size: 1.05rem; line-height: 1.65; }
.ti-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; }
.ti-list li { display: flex; align-items: center; gap: 14px; color: #1e293b; font-size: 1.02rem; }
.ti-list li span { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, #34d399, #059669 60%, #047857); box-shadow: 0 6px 12px -4px rgba(4, 120, 87, .55); }
.ti-cta { display: flex; align-items: center; gap: 14px; }
#buy .ti-btn { display: inline-flex; align-items: center; gap: 14px; min-height: 66px; padding: 0 26px 0 14px; border-radius: 999px; font-size: 1.1rem; font-weight: 800; background: linear-gradient(135deg, #059669, #047857 60%, #065f46); box-shadow: 0 20px 40px -16px rgba(4, 120, 87, .75), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s; }
#buy .ti-btn:hover { transform: translateY(-3px); }
#buy .ti-btn > svg:last-child { transition: transform .25s; }
#buy .ti-btn:hover > svg:last-child { transform: translateX(4px); }
.ti-btn-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); }
.ti-doodle { animation: why-doodle 4s ease-in-out infinite; }
.ti-trust { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; color: #64748b; font-size: .86rem; }
.ti-trust li { display: inline-flex; align-items: center; gap: 8px; }
.ti-trust svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; color: #059669; background: #ecfdf5; }

/* sân khấu 3D */
.ti-stage { position: relative; height: 470px; perspective: 1100px; }
.ti-halo { position: absolute; left: 50%; top: 52%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: radial-gradient(circle, rgba(52, 211, 153, .35), rgba(52, 211, 153, .08) 55%, transparent 70%); animation: pd3-breathe 6s ease-in-out infinite; }
.ti-ring { position: absolute; left: 50%; top: 80%; width: 440px; height: 440px; margin: -220px 0 0 -220px; border-radius: 50%; border: 2px solid rgba(16, 185, 129, .35); transform: rotateX(78deg); animation: ti-ring 9s linear infinite; }
.ti-ring.r2 { width: 540px; height: 540px; margin: -270px 0 0 -270px; border: 2px dashed rgba(16, 185, 129, .25); animation-duration: 14s; animation-direction: reverse; }
@keyframes ti-ring { to { transform: rotateX(78deg) rotateZ(360deg); } }
.ti-arrow { position: absolute; left: 12%; top: 4%; width: 82%; height: 80%; z-index: 2; pointer-events: none; overflow: visible; }
.ti-arrow-p { stroke-dasharray: 520; stroke-dashoffset: 520; }
.ti-arrow-h { opacity: 0; }
.ti-section.is-in .ti-arrow-p { animation: ti-draw 1.4s .3s cubic-bezier(.22, 1, .36, 1) forwards, ti-pulse 3s 2s ease-in-out infinite; }
.ti-section.is-in .ti-arrow-h { animation: ti-head .4s 1.5s forwards; }
@keyframes ti-draw { to { stroke-dashoffset: 0; } }
@keyframes ti-head { to { opacity: 1; } }
@keyframes ti-pulse { 50% { opacity: .65; } }
.ti-phones { position: absolute; left: 50%; top: 50%; width: min(520px, 92%); translate: -50% -50%; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.ti-phones img { display: block; width: 100%; height: auto; filter: drop-shadow(0 34px 34px rgba(4, 120, 87, .28)); animation: ti-float 6s ease-in-out infinite; }
@keyframes ti-float { 50% { transform: translateY(-12px); } }
.ti-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 14px; border-radius: 20px; background: rgba(255, 255, 255, .86); border: 1px solid #fff; box-shadow: 0 24px 40px -20px rgba(15, 23, 42, .3); color: #0f172a; animation: cmp-float3d 7s ease-in-out infinite; }
.ti-chip b { display: block; font-size: .98rem; line-height: 1.25; }
.ti-chip small { color: #475569; font-size: .8rem; }
.ti-chip.c1 { left: -2%; top: 40%; --rz: -10deg; }
.ti-chip.c2 { right: 0; top: 2%; --rz: 8deg; animation-delay: -2s; }
.ti-chip.c3 { right: -2%; top: 48%; --rz: -6deg; animation-delay: -4s; }
.ti-spin { display: grid; color: #10b981; animation: ti-spin 4s linear infinite; }
@keyframes ti-spin { to { transform: rotate(360deg); } }
.ti-bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.ti-bars i { width: 9px; border-radius: 4px; background: linear-gradient(180deg, #34d399, #047857); transform-origin: bottom; animation: ti-bar 2.4s ease-in-out infinite; }
.ti-bars i:nth-child(1) { height: 40%; }
.ti-bars i:nth-child(2) { height: 70%; animation-delay: .2s; }
.ti-bars i:nth-child(3) { height: 100%; animation-delay: .4s; }
@keyframes ti-bar { 50% { transform: scaleY(.6); } }
.ti-shield { color: #fff; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #34d399, #047857); }
.ti-price { position: absolute; z-index: 3; right: 4%; bottom: 6%; padding: 16px 84px 16px 22px; border-radius: 22px; background: rgba(255, 255, 255, .92); border: 1px solid #fff; box-shadow: 0 30px 50px -24px rgba(4, 120, 87, .45); animation: cmp-float3d 8s ease-in-out infinite; }
.ti-price small { display: block; color: #475569; font-size: .9rem; }
.ti-price strong { display: block; font: 800 1.9rem/1.2 'Space Grotesk', sans-serif; color: #047857; font-variant-numeric: tabular-nums; }
.ti-spark { position: absolute; right: 16px; top: 50%; width: 56px; height: 40px; margin-top: -20px; }
.ti-spark path:first-child { stroke-dasharray: 80; stroke-dashoffset: 80; }
.ti-section.is-in .ti-spark path:first-child { animation: ti-draw 1.2s 1s ease forwards; }

@media (max-width: 1100px) {
  .ti-card { grid-template-columns: minmax(0, 1fr); padding: 40px 32px; }
  .ti-stage { height: 420px; }
}
@media (max-width: 640px) {
  #buy.ti-section { padding: 16px 12px !important; }
  .ti-card { padding: 28px 18px 18px; border-radius: 26px; }
  .ti-list li { font-size: .95rem; }
  .ti-cta { flex-wrap: wrap; }
  #buy .ti-btn { width: 100%; justify-content: center; min-height: 58px; font-size: 1rem; }
  .ti-doodle { display: none; }
  .ti-stage { height: 320px; margin: 0 -10px; }
  .ti-chip { padding: 10px 12px 10px 10px; gap: 8px; }
  .ti-chip b { font-size: .82rem; }
  .ti-chip small { font-size: .7rem; }
  .ti-chip.c1 { left: 0; top: 30%; }
  .ti-chip.c2 { top: 0; }
  .ti-chip.c3 { display: none; }
  .ti-bars { height: 24px; }
  .ti-bars i { width: 7px; }
  .ti-price { right: 2%; bottom: 0; padding: 10px 64px 10px 14px; }
  .ti-price strong { font-size: 1.35rem; }
  .ti-spark { width: 42px; right: 12px; }
}

/* Thu cũ đổi mới: tràn hết chiều ngang như các khu khác - nền xanh, quầng sáng, bong bóng lan ra 2 bên,
   nội dung vẫn rộng tối đa 1240px ở giữa (không còn khung thẻ bo góc) */
#buy.ti-section { position: relative; max-width: none; margin: 0; overflow: hidden; isolation: isolate; padding: 80px max(20px, calc((100% - var(--page-w)) / 2)) !important; border-radius: 0;
  background: radial-gradient(38% 70% at 72% 50%, #c3f5dc 0%, rgba(195, 245, 220, 0) 72%), radial-gradient(30% 60% at 0% 20%, #dcfaea 0%, transparent 70%), radial-gradient(30% 60% at 100% 85%, #d5f8e6 0%, transparent 70%), linear-gradient(180deg, #f5fdf9, #ebfbf3 50%, #f5fdf9) !important; }
#buy.ti-section::before, #buy.ti-section::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; animation: ti-orb 14s ease-in-out infinite; }
#buy.ti-section::before { left: -160px; top: 10%; width: 460px; height: 460px; background: radial-gradient(circle, rgba(110, 231, 183, .45), rgba(110, 231, 183, .1) 55%, transparent 70%); }
#buy.ti-section::after { right: -180px; bottom: -6%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(52, 211, 153, .35), rgba(14, 165, 233, .08) 55%, transparent 70%); animation-delay: -7s; }
#buy .ti-card { overflow: visible; isolation: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; }
#buy .ti-orb { z-index: -1; }
#buy .ti-orb.o1 { width: 440px; height: 440px; right: -6%; top: -4%; }
#buy .ti-orb.o2 { width: 140px; height: 140px; left: 44%; top: -2%; }
#buy .ti-orb.o3 { width: 90px; height: 90px; left: -4%; right: auto; bottom: 4%; }
#buy .ti-stage { height: 520px; }
#buy .ti-phones { width: min(600px, 100%); }
#buy .ti-halo { width: 560px; height: 560px; margin: -280px 0 0 -280px; }
#buy .ti-ring.r1 { width: 520px; height: 520px; margin: -260px 0 0 -260px; }
#buy .ti-ring.r2 { width: 660px; height: 660px; margin: -330px 0 0 -330px; }
#buy .ti-chip.c1 { left: -6%; }
#buy .ti-chip.c2, #buy .ti-chip.c3 { right: -4%; }
@media (max-width: 1100px) { #buy .ti-card { grid-template-columns: minmax(0, 1fr); } #buy .ti-chip.c1 { left: 0; } #buy .ti-chip.c2, #buy .ti-chip.c3 { right: 0; } }
@media (max-width: 640px) {
  #buy.ti-section { padding: 44px 16px 24px !important; }
  #buy .ti-stage { height: 330px; }
  #buy .ti-halo { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
  #buy .ti-ring.r1 { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
  #buy .ti-ring.r2 { width: 400px; height: 400px; margin: -200px 0 0 -200px; }
}
#buy .ti-copy h2 { font-size: clamp(1.75rem, 2.7vw, 2.75rem); }
#buy .ti-copy { min-width: 0; }

/* Tin tức: bỏ khung thẻ bo góc, nền nhạt trải hết chiều ngang như các khu khác */
#news.wrap.section { border-radius: 0 !important; margin-bottom: 0 !important; background: linear-gradient(180deg, rgba(248, 250, 252, 0), #f6faf8 18%, #f6faf8 82%, rgba(248, 250, 252, 0)) !important; }

/* ===================== Trang con (Bán máy, Mua máy, Bảng giá, Liên hệ): đầu trang + khối dùng chung ===================== */
.sp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: rgba(236, 253, 245, .92); color: #047857; font-weight: 800; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 10px 26px -10px rgba(16, 185, 129, .45), inset 0 0 0 1px #d1fae5; }
.hb-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 26px; border: 0; border-radius: 999px; font: 800 1.02rem 'Manrope', sans-serif; color: #fff; text-decoration: none; cursor: pointer; background: linear-gradient(135deg, #059669, #047857 60%, #065f46); box-shadow: 0 18px 36px -14px rgba(4, 120, 87, .75), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.hb-btn:hover { transform: translateY(-3px); color: #fff; }
.hb-btn svg:last-child { transition: transform .25s; }
.hb-btn:hover svg:last-child { transform: translateX(4px); }
.hb-btn-ghost, .hb-btn-ghost:hover { color: #047857; background: rgba(255, 255, 255, .88); box-shadow: 0 14px 30px -18px rgba(15, 23, 42, .35), inset 0 0 0 1.5px #a7f3d0; }
.hb-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Đầu trang --- */
.sp-hero { position: relative; padding: 26px max(20px, calc(50% - 620px)) 64px !important; overflow: hidden; isolation: isolate; text-align: left;
  background: radial-gradient(40% 70% at 80% 45%, rgba(110, 231, 183, .5), transparent 70%), radial-gradient(35% 60% at 0% 100%, rgba(186, 230, 253, .55), transparent 70%), url(../public/images/hero-bg.webp) center / cover no-repeat, #f4fbf8 !important; }
.sp-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 110px; z-index: -1; background: linear-gradient(transparent, #fff); }
.sp-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.sp-hero .page-crumbs { margin-bottom: 18px; }
.sp-hero h1 { margin: 18px 0 14px !important; font: 800 clamp(2.1rem, 4.3vw, 3.5rem)/1.08 'Space Grotesk', sans-serif !important; letter-spacing: -.025em; color: #0f172a; }
.sp-hero h1 span { display: block; margin-top: 8px; font-size: .52em; line-height: 1.25; background: linear-gradient(90deg, #047857, #10b981 55%, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-hero-copy > p { max-width: 540px; margin: 0 0 26px !important; color: #475569 !important; font-size: 1.05rem !important; line-height: 1.7; }
.sp-hero-art { position: relative; height: 470px; perspective: 1300px; }
.sp-ring { position: absolute; left: 50%; top: 74%; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; border: 2px solid rgba(16, 185, 129, .35); transform: rotateX(78deg); animation: ti-ring 10s linear infinite; }
.sp-ring.r2 { width: 580px; height: 580px; margin: -290px 0 0 -290px; border-style: dashed; border-color: rgba(14, 165, 233, .25); animation-duration: 16s; animation-direction: reverse; }
.sp-podium { position: absolute; left: 50%; top: 74%; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; transform: rotateX(78deg); background: radial-gradient(closest-side, rgba(209, 250, 229, .95), rgba(167, 243, 208, .5) 60%, transparent); box-shadow: 0 0 60px rgba(16, 185, 129, .35); }
.sp-img { position: absolute; display: block; }
.sp-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* ảnh sản phẩm: đặt trên bệ, nổi lên xuống */
.sp-hero-art.is-product .sp-img img { filter: drop-shadow(0 30px 26px rgba(4, 80, 60, .3)); }
.sp-hero-art.is-product .i1 { left: 32%; top: 2%; width: 40%; height: 76%; z-index: 3; animation: ti-float 6s ease-in-out infinite; }
.sp-hero-art.is-product .i2 { left: 6%; top: 18%; width: 32%; height: 60%; z-index: 2; animation: ti-float 7s ease-in-out infinite -2s; transform: rotate(-8deg); }
.sp-hero-art.is-product .i3 { right: 2%; top: 22%; width: 34%; height: 56%; z-index: 2; animation: ti-float 7.5s ease-in-out infinite -4s; transform: rotate(7deg); }
.sp-hero-art.is-product .i4 { right: 18%; bottom: 0; width: 34%; height: 32%; z-index: 4; animation: ti-float 8s ease-in-out infinite -1s; }
/* ảnh chụp: thẻ ảnh xếp nghiêng 3D */
.sp-hero-art:not(.is-product) .sp-img { overflow: hidden; border-radius: 24px; border: 5px solid #fff; background: #e2e8f0; box-shadow: 0 34px 60px -28px rgba(15, 23, 42, .5); }
.sp-hero-art:not(.is-product) .sp-img img { object-fit: cover; }
.sp-hero-art:not(.is-product) .i1 { left: 8%; top: 14%; width: 74%; aspect-ratio: 16 / 10; z-index: 2; transform: rotateY(-14deg) rotateX(5deg); animation: hb-f1 9s ease-in-out infinite; }
.sp-hero-art:not(.is-product) .i2 { right: 0; top: 0; width: 44%; aspect-ratio: 4 / 3; z-index: 1; transform: rotateY(-22deg) rotateZ(4deg); animation: hb-f2 11s ease-in-out infinite; }
.sp-hero-art:not(.is-product) .i3 { left: 0; bottom: 6%; width: 42%; aspect-ratio: 4 / 3; z-index: 3; transform: rotateY(12deg) rotateZ(-5deg); animation: hb-f3 10s ease-in-out infinite; }
.sp-hero-art:not(.is-product) .sp-podium, .sp-hero-art:not(.is-product) .sp-ring { top: 62%; }
@keyframes hb-f1 { 50% { transform: rotateY(-8deg) rotateX(3deg) translateY(-12px); } }
@keyframes hb-f2 { 50% { transform: rotateY(-26deg) rotateZ(6deg) translateY(10px); } }
@keyframes hb-f3 { 50% { transform: rotateY(16deg) rotateZ(-3deg) translateY(-10px); } }
.sp-chip { position: absolute; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 11px 18px 11px 11px; border-radius: 18px; background: rgba(255, 255, 255, .9); border: 1px solid #fff; box-shadow: 0 24px 40px -18px rgba(15, 23, 42, .35); animation: cmp-float3d 7s ease-in-out infinite; white-space: nowrap; }
.sp-chip > span { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #34d399, #047857); flex-shrink: 0; }
.sp-chip b { display: block; font-size: .92rem; color: #0f172a; }
.sp-chip small { color: #64748b; font-size: .76rem; }
.sp-chip.c1 { left: -2%; top: 4%; --rz: -6deg; }
.sp-chip.c2 { right: -2%; top: 46%; --rz: 5deg; animation-delay: -2.5s; }
.sp-chip.c3 { left: 4%; bottom: 4%; --rz: -4deg; animation-delay: -5s; }
.sp-hero-art:not(.is-product) .sp-chip.c3 { left: 40%; bottom: 0; }

/* --- Tiêu đề khu --- */
.sp-head { text-align: center; max-width: 760px; margin: 0 auto 34px !important; }
.sp-head h2 { margin: 18px 0 10px !important; font: 800 clamp(1.7rem, 3.2vw, 2.6rem)/1.15 'Space Grotesk', sans-serif !important; letter-spacing: -.02em; color: #0f172a !important; }
.sp-head h2 span { background: linear-gradient(90deg, #047857, #10b981 55%, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-head h2::after { display: none !important; }
.sp-head p { color: #64748b; font-size: 1.02rem; }

/* --- Các bước --- */
.sp-steps { position: relative; display: grid !important; grid-template-columns: repeat(var(--n), minmax(0, 1fr)) !important; gap: 20px !important; counter-reset: none; }
.sp-steps::after { content: ''; position: absolute; left: 10%; right: 10%; top: 58px; z-index: 0; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, #6ee7b7 0 10px, transparent 10px 18px); background-size: 36px 3px; animation: hb-march 1.2s linear infinite; }
@keyframes hb-march { to { background-position: 36px 0; } }
.sp-steps li { position: relative; z-index: 1; display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 20px 26px !important; border-radius: 26px !important; background: #fff !important; border: 1px solid #e6efeb !important; box-shadow: 0 24px 48px -36px rgba(15, 23, 42, .45) !important; transition: transform .4s cubic-bezier(.22, 1, .36, 1), border-color .3s; }
.sp-steps li::before { display: none !important; }
.sp-steps li:hover { transform: translateY(-6px); border-color: #6ee7b7 !important; }
.sp-step-ic { width: 66px; height: 66px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, #34d399, #059669 60%, #047857); box-shadow: 0 16px 28px -10px rgba(4, 120, 87, .6), inset 0 2px 0 rgba(255, 255, 255, .35); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.sp-steps li:hover .sp-step-ic { transform: perspective(300px) rotateY(360deg); }
.sp-step-n { position: absolute; top: 14px; right: 18px; font: 800 1.6rem 'Space Grotesk', sans-serif; color: #d1fae5; }
.sp-steps strong { font: 800 1.08rem 'Space Grotesk', sans-serif; color: #0f172a; }
.sp-steps li > span:last-child { color: #64748b; font-size: .9rem; line-height: 1.6; }

/* --- Danh sách kiểm tra --- */
.sp-checks { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
.sp-checks li { display: flex !important; align-items: flex-start; gap: 14px; padding: 18px 20px !important; border-radius: 20px !important; background: #fff !important; border: 1px solid #e6efeb !important; box-shadow: 0 18px 36px -30px rgba(15, 23, 42, .45) !important; transition: transform .3s, border-color .3s; }
.sp-checks li:hover { transform: translateY(-4px); border-color: #6ee7b7 !important; }
.sp-ck { width: 40px; height: 40px; flex-shrink: 0; border-radius: 13px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, #34d399, #059669 60%, #047857); box-shadow: 0 10px 18px -8px rgba(4, 120, 87, .6); }
.sp-ck svg { color: #fff !important; margin: 0 !important; }
.sp-checks strong { display: block; font-size: 1rem; color: #0f172a; margin-bottom: 3px; }
.sp-checks li span:not(.sp-ck) { color: #64748b; font-size: .9rem; line-height: 1.6; }
.sp-note { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 760px; margin: 22px auto 0 !important; padding: 14px 20px; border-radius: 16px; background: #ecfdf5; color: #065f46 !important; }
.sp-note svg { color: #10b981; flex-shrink: 0; }

/* --- Câu hỏi --- */
.sp-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.sp-faq .sp-head { text-align: left; margin: 0 0 20px !important; }
.sp-faq-side { position: sticky; top: 100px; }
.sp-ask { display: grid; gap: 12px; }
.sp-ask a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid #e6efeb; text-decoration: none; color: inherit; box-shadow: 0 16px 32px -26px rgba(15, 23, 42, .45); transition: transform .3s, border-color .3s; }
.sp-ask a:hover { transform: translateX(6px); border-color: #6ee7b7; }
.sp-ask span { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #34d399, #047857); font-weight: 800; font-size: .8rem; }
.sp-ask span.z { background: linear-gradient(135deg, #3b82f6, #0068ff); }
.sp-ask small { display: block; color: #64748b; font-size: .8rem; }
.sp-ask b { font: 800 1.08rem 'Space Grotesk', sans-serif; color: #0f172a; }
.sp-faq-list { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
.sp-faq-list .faq-item { margin: 0; border-radius: 18px; background: #fff; border: 1px solid #e6efeb; box-shadow: 0 16px 32px -28px rgba(15, 23, 42, .45); }
.sp-faq-list .faq-item[open] { border-color: #6ee7b7; }

/* --- Dải kêu gọi --- */
.pc-cta { position: relative; overflow: hidden; border-radius: 30px !important; background: linear-gradient(135deg, #064e3b, #047857 55%, #0e7490) !important; color: #fff; box-shadow: 0 40px 80px -40px rgba(4, 120, 87, .7); }
.pc-cta::after { content: ''; position: absolute; right: -60px; top: -80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(110, 231, 183, .45), transparent 70%); animation: pd3-breathe 6s ease-in-out infinite; }
.pc-cta > * { position: relative; z-index: 1; }
.pc-cta h2, .pc-cta p { color: #fff !important; }
.pc-cta p { opacity: .85; }
.pc-cta .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .5); }
.pc-cta .btn-primary { background: #fff; color: #047857; }

/* --- Yếu tố giá (thu cũ) + bảng giá --- */
.pc-factor { border-radius: 22px !important; border: 1px solid #e6efeb !important; background: #fff !important; box-shadow: 0 20px 40px -32px rgba(15, 23, 42, .45); transition: transform .3s, border-color .3s; }
.pc-factor:hover { transform: translateY(-4px); border-color: #6ee7b7 !important; }
.pc-factor h3 { display: flex; align-items: center; gap: 10px; }
.pc-factor h3::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 5px rgba(16, 185, 129, .18); }
.tp-table-wrap { border-radius: 24px !important; border: 1px solid #e6efeb !important; box-shadow: 0 24px 48px -36px rgba(15, 23, 42, .45); overflow: hidden; }
.tp-table thead th { background: linear-gradient(90deg, #ecfdf5, #f0f9ff) !important; color: #065f46 !important; }
.tp-table tbody tr { transition: background .2s; }
.tp-table tbody tr:hover { background: #f0fdf4; }

@media (max-width: 1000px) {
  .sp-hero-in { grid-template-columns: minmax(0, 1fr); }
  .sp-hero-art { height: 380px; }
  .sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sp-steps::after { display: none; }
  .sp-faq { grid-template-columns: minmax(0, 1fr); }
  .sp-faq-side { position: static; }
}
@media (max-width: 640px) {
  .sp-hero { padding: 14px 16px 36px !important; }
  .sp-hero-art { height: 270px; }
  .sp-ring { display: none; }
  .sp-chip { padding: 7px 10px 7px 7px; gap: 7px; }
  .sp-chip > span { width: 30px; height: 30px; border-radius: 9px; }
  .sp-chip > span svg { width: 15px; height: 15px; }
  .sp-chip b { font-size: .74rem; }
  .sp-chip small { display: none; }
  .sp-chip.c2 { display: none; }
  .hb-btn { flex: 1 1 100%; justify-content: center; }
  .sp-steps { grid-template-columns: minmax(0, 1fr) !important; }
  .sp-steps li { flex-direction: row !important; flex-wrap: wrap; text-align: left; padding: 16px !important; }
  .sp-step-ic { width: 46px; height: 46px; border-radius: 14px; }
  .sp-step-n { font-size: 1.2rem; }
  .sp-steps li > span:last-child { flex-basis: 100%; }
  .sp-checks { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (prefers-reduced-motion: reduce) { .sp-hero *, .sp-steps::after { animation-duration: 30s !important; } }
.sp-checks .sp-ck { display: grid !important; margin: 0 !important; }
.sp-checks .sp-ck svg { width: 20px; height: 20px; }


/* Ảnh sản phẩm đã tách nền (public/images/cutout): máy đứng trên bệ kính, bóng đổ thật, nổi nhẹ lệch nhịp */
.sp-hero-art.is-product .sp-img { display: flex; align-items: flex-end; justify-content: center; }
.sp-hero-art.is-product .sp-img img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 26px 22px rgba(6, 60, 45, .28)) drop-shadow(0 4px 6px rgba(6, 60, 45, .15)); }
.sp-hero-art.is-product .i1 { left: 31%; top: 4%; width: 38%; height: 70%; z-index: 4; animation: ti-float 6s ease-in-out infinite; transform: none; }
.sp-hero-art.is-product .i2 { left: 8%; top: 18%; width: 30%; height: 56%; z-index: 3; animation: ti-float 7s ease-in-out infinite -2s; transform: rotate(-7deg); }
.sp-hero-art.is-product .i3 { right: 6%; top: 17%; width: 33%; height: 56%; z-index: 3; animation: ti-float 7.5s ease-in-out infinite -4s; transform: rotate(6deg); }
.sp-hero-art.is-product .i4 { right: 26%; top: 6%; width: 24%; height: 40%; z-index: 1; opacity: .9; animation: ti-float 9s ease-in-out infinite -1s; transform: rotate(4deg) scale(.95); }
.sp-hero-art.is-product .sp-podium { top: 78%; width: 440px; height: 440px; margin: -220px 0 0 -220px; z-index: 0; background: radial-gradient(closest-side, #fff 0%, rgba(209, 250, 229, .95) 45%, rgba(167, 243, 208, .45) 70%, transparent); box-shadow: 0 0 80px rgba(16, 185, 129, .35), inset 0 0 0 2px rgba(255, 255, 255, .9); }
.sp-hero-art.is-product .sp-ring { top: 78%; }
.sp-hero-art.is-product .sp-chip.c1 { left: -4%; top: 2%; }
.sp-hero-art.is-product .sp-chip.c2 { right: -4%; top: 60%; }
.sp-hero-art.is-product .sp-chip.c3 { left: 0; bottom: 2%; }
@media (max-width: 640px) { .sp-hero-art.is-product .sp-podium { width: 300px; height: 300px; margin: -150px 0 0 -150px; } }

/* Mã QR Zalo trong thẻ liên hệ */
.contact-card:has(.contact-qr) { align-items: center; }
.contact-qr { margin-left: auto; flex-shrink: 0; display: grid; justify-items: center; gap: 4px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid #dbeafe; box-shadow: 0 12px 26px -16px rgba(2, 132, 199, .5); text-decoration: none; transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s; }
.contact-qr img { display: block; width: 92px; height: 92px; border-radius: 8px; }
.contact-qr span { font-size: .7rem; font-weight: 800; color: #0068ff; }
.contact-qr:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 32px -14px rgba(2, 132, 199, .6); }
@media (max-width: 640px) { .contact-qr img { width: 74px; height: 74px; } }
.floating-speed-dial .dial-btn:hover, .floating-speed-dial .dial-btn:focus-visible { color: #fff; }
.floating-speed-dial .dial-btn .zqr-pop { color: #0f172a; }

/* =====================================================================
   THANG KÍCH THƯỚC CHUNG (gọn, đỡ tốn diện tích) — đặt cuối file để đè các khối thiết kế bên trên
   Tiêu đề trang ≤ 2.4rem · tiêu đề khu ≤ 2rem · nút lớn 48–50px · ô nhập 44–46px
   ===================================================================== */
.hb-hero h1, .sp-hero h1, .nw-hero h1 { font-size: clamp(1.75rem, 3.2vw, 2.4rem) !important; }
.hb-hero h1 span, .sp-hero h1 span { font-size: .6em !important; }
.cmp-head h2, .why-head h2, .ar-head h2, .rvx-head h2, .anat-copy h2, .sp-head h2, .ti-copy h2, #buy .ti-copy h2,
.hb-head h2, .hb-faq-side h2, .hb-areas-copy h2, .pc-head h2, .section-head h2 { font-size: clamp(1.45rem, 2.4vw, 2rem) !important; line-height: 1.2 !important; }
.process-detail-panel .proc-det-content h4 { font-size: clamp(1.35rem, 2.2vw, 1.8rem) !important; }
.cmp-head p, .why-head p, .ar-head p, .rvx-head p, .anat-copy > p, .sp-head p, .ti-copy > p, .hb-head p,
.hb-hero-copy > p, .sp-hero-copy > p, .nw-hero-copy > p { font-size: .97rem !important; }
.cmp-head, .why-head, .rvx-head, .hb-head, .sp-head { margin-bottom: 26px !important; }
.cmp-pill, .sp-pill, .hb-pill, .nw-pill { padding: 7px 14px !important; font-size: .74rem !important; }

/* nút lớn */
.hb-btn, .cmp-btn, #buy .ti-btn, .process-detail-panel .pd-book, .bcta-btn { min-height: 48px !important; font-size: .95rem !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.hb-btn { padding-left: 20px !important; padding-right: 20px !important; }
.cmp-btn { padding-left: 22px !important; padding-right: 8px !important; }
.cmp-btn-go { width: 36px !important; height: 36px !important; margin-left: 8px !important; }
#buy .ti-btn { padding-left: 10px !important; padding-right: 20px !important; }
.ti-btn-ic { width: 34px !important; height: 34px !important; }

/* khoảng cách giữa các khu */
.cmp-section { padding-top: 64px !important; padding-bottom: 56px !important; }
.rvx { padding-top: 64px !important; padding-bottom: 52px !important; }
#buy.ti-section { padding-top: 56px !important; padding-bottom: 56px !important; }
.sp-hero { padding-bottom: 44px !important; }
.cmp-cell { min-height: 62px !important; padding-top: 10px !important; padding-bottom: 10px !important; font-size: .93rem !important; }
.cmp-h { min-height: 70px !important; font-size: 1rem !important; }
.cmp-ic { width: 38px !important; height: 38px !important; }
.cmp-shield { width: 42px !important; height: 42px !important; }
.cmp-cta { margin-top: 30px !important; }

/* thẻ */
.why-card { padding: 22px 20px 0 !important; }
.why-ic { width: 80px !important; height: 80px !important; margin-bottom: 12px !important; }
.why-ic svg { width: 32px; height: 32px; }
.why-card h3 { font-size: 1.08rem !important; }
.why-art { height: 150px !important; }
.sp-step-ic { width: 54px !important; height: 54px !important; border-radius: 18px !important; }
.sp-steps li { padding: 20px 16px !important; }
.sp-checks li { padding: 14px 16px !important; }
.ar-card { padding: 18px !important; }
.ar-ic { width: 52px !important; height: 52px !important; border-radius: 16px !important; }
.ar-txt .ar-big { font-size: 1.4rem !important; }
.ar-acts i { width: 52px !important; height: 52px !important; }
.rvx .review-card { padding: 24px 24px 22px !important; }
.rvx .review-text { font-size: .97rem !important; }
.rvx-stat { padding: 8px 16px 8px 8px !important; }
.rvx-si { width: 40px !important; height: 40px !important; }
.ti-list li { font-size: .96rem !important; }
.anat-ic { width: 44px !important; height: 44px !important; }
.anat-item { padding: 10px 14px !important; }

/* khối hình minh hoạ (chỉ máy tính, điện thoại giữ kích thước riêng) */
@media (min-width: 1101px) {
  .sp-hero-art { height: 390px !important; }
  .ti-stage, #buy .ti-stage { height: 430px !important; }
  .ar-scene { height: 410px !important; }
  .anat-stage { height: 580px !important; }
  .pd3 { height: 480px !important; }
}
#hero-title { font-size: clamp(1.9rem, 3.6vw, 2.75rem) !important; margin-bottom: 16px !important; }

/* Khoảng cách các khu "wrap section" gọn hơn (HTML viết sẵn 80px trên/dưới) */
@media (min-width: 641px) {
  .wrap.section:not(#buy) { padding-top: 56px !important; padding-bottom: 56px !important; }
  .wrap.section .section-head, .wrap.section .pc-head { margin-bottom: 30px !important; }
  .wrap.section .section-head p { font-size: .98rem !important; }
  .pc-section { padding-top: 44px !important; padding-bottom: 44px !important; }
}
@media (min-width: 641px) { .accessories-bento-grid .bento-large .bento-img { max-height: 220px !important; width: auto !important; } .accessories-bento-grid .bento-img { max-height: 110px; width: auto; } .accessories-bento-grid { grid-auto-rows: minmax(0, auto) !important; } }

/* ===== Mã chống máy (captcha) + xác nhận email khi đăng ký ===== */
.cap-group label small { color: #64748b; font-weight: 500; }
.cap-row { display: flex; align-items: center; gap: 8px; }
.cap-img { width: 150px; height: 48px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; border-radius: 10px; border: 1px solid #d1fae5; background: #f0fdf7; }
.cap-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cap-img small { font-size: .72rem; color: #64748b; text-align: center; padding: 0 6px; }
.cap-load { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #a7f3d0; border-top-color: #10b981; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cap-refresh { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #047857; cursor: pointer; transition: transform .3s, background .2s; }
.cap-refresh:hover { background: #ecfdf5; transform: rotate(-90deg); }
.cap-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; }
.reg-verify { display: grid; gap: 4px; text-align: center; }
.reg-verify[hidden], #registerForm[hidden] { display: none !important; }
.reg-mail-ic { justify-self: center; width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #34d399, #047857); box-shadow: 0 14px 26px -12px rgba(4, 120, 87, .6); }
.reg-verify-msg { margin: 10px 0 4px; color: #334155; font-size: .93rem; line-height: 1.55; }
.reg-verify .form-group { text-align: left; }
.reg-code { text-align: center; font: 800 1.6rem 'JetBrains Mono', monospace !important; letter-spacing: 12px !important; }
.reg-verify-acts { margin: 10px 0 0; font-size: .9rem; color: #94a3b8; }
.reg-verify-hint { margin: 6px 0 0; font-size: .8rem; color: #64748b; }
@media (max-width: 400px) { .cap-img { width: 120px; height: 42px; } }

/* Thanh nút dưới cùng (điện thoại): chữ không xuống dòng */
@media (max-width: 768px) { .mcb-btn { white-space: nowrap; font-size: .86rem !important; gap: 5px !important; padding: 0 6px; } }

/* Chống spam mã: đếm ngược + cảnh báo */
#regResend:disabled { color: #94a3b8; cursor: not-allowed; text-decoration: none; }
.reg-spam { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: .84rem; line-height: 1.5; text-align: left; }
.reg-spam[hidden] { display: none !important; }
.reg-spam svg { flex-shrink: 0; margin-top: 1px; }
.reg-limit { margin: 4px 0 0; font-size: .76rem; color: #94a3b8; }

/* ===== Popup Đăng nhập / Đăng ký / Quên mật khẩu (thiết kế lại) ===== */
.auth-card { max-width: 440px !important; padding: 30px 28px 24px; border-radius: 26px; border: 1px solid #e3f4ec; background: radial-gradient(120% 55% at 50% -12%, #d1fae5 0, rgba(209, 250, 229, 0) 62%), #fff; box-shadow: 0 40px 80px -30px rgba(4, 60, 45, .45); }
.auth-card .modal-close { top: 14px; right: 14px; background: #fff; border-color: #e2e8f0; color: #475569; z-index: 2; }
.auth-card .modal-close:hover { background: #f1f5f9; border-color: #cbd5e1; color: #0f172a; }
.auth-head { text-align: center; margin-bottom: 18px; }
.auth-logo { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, #34d399, #047857); box-shadow: 0 14px 28px -12px rgba(4, 120, 87, .65); }
#loginModal h2, #registerModal h2 { margin: 0; font-size: 1.65rem; line-height: 1.2; color: #0f172a; }
.auth-sub { margin: 6px 0 0; color: #64748b; font-size: .92rem; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 14px; background: #f1f5f9; }
.auth-tabs button { height: 40px; border: 0; border-radius: 10px; background: none; color: #64748b; font: 700 .92rem var(--font-body); cursor: pointer; transition: background .2s, color .2s; }
.auth-tabs button:hover { color: #0f172a; }
.auth-tabs .is-on { background: #fff; color: #047857; box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .3); cursor: default; }
.auth-modal.is-sub .auth-tabs { display: none; }
.auth-card .form-group { margin-bottom: 14px; }
.auth-card .form-group label { font-weight: 600; font-size: .88rem; color: #334155; }
.auth-card .form-group label small { color: #94a3b8; font-weight: 500; }
.auth-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.auth-forgot { padding: 2px 0; border: 0; background: none; color: #047857; font: 700 .85rem var(--font-body); cursor: pointer; }
.auth-forgot:hover { text-decoration: underline; }
.auth-input { position: relative; }
.auth-input > .ai { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; transition: color .2s; }
.auth-input:focus-within > .ai { color: #059669; }
.auth-card .auth-input input { min-height: 48px; padding-left: 44px; background: #f8fafc; border-color: #e2e8f0; transition: background .2s, border-color .2s, box-shadow .2s; }
.auth-card .auth-input input:focus { background: #fff; }
.auth-input:has(.auth-eye) input { padding-right: 48px; }
.auth-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: #94a3b8; cursor: pointer; }
.auth-eye:hover { color: #047857; background: #ecfdf5; }
.auth-eye.is-on { color: #047857; }
.auth-card .cap-row input { min-height: 48px; background: #f8fafc; }
.auth-card .btn-full { min-height: 50px; margin-top: 4px; border-radius: 14px; font-size: 1rem; box-shadow: 0 14px 28px -14px rgba(4, 120, 87, .75); }
.auth-note { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: #ecfdf5; border: 1px solid #d1fae5; color: #065f46; font-size: .9rem; line-height: 1.55; }
.auth-back { display: block; margin: 12px auto 0; padding: 8px 10px; border: 0; background: none; color: #64748b; font: 600 .9rem var(--font-body); cursor: pointer; }
.auth-back:hover { color: #047857; }
.auth-fine { margin: 10px 0 0; text-align: center; font-size: .8rem; color: #94a3b8; }
.auth-fine a { color: #047857; font-weight: 600; }
#loginForm[hidden], #forgotForm[hidden], #resetForm[hidden], .login-otp[hidden] { display: none !important; }
#resetForm { display: grid; gap: 2px; text-align: center; }
#resetForm .form-group { text-align: left; }
#resetForm .reg-mail-ic { margin-bottom: 4px; }
.auth-input .reg-code { padding-left: 44px; }
.pw-meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: -6px 0 14px; text-align: left; }
.pw-meter span { height: 5px; border-radius: 4px; background: #e2e8f0; transition: background .25s; }
.pw-meter small { grid-column: 1 / -1; font-size: .78rem; color: #64748b; }
.pw-meter[data-score="0"] span:nth-child(1) { background: #ef4444; }
.pw-meter[data-score="0"] small { color: #dc2626; }
.pw-meter[data-score="1"] span:nth-child(1) { background: #f59e0b; }
.pw-meter[data-score="1"] small { color: #b45309; }
.pw-meter[data-score="2"] span:nth-child(-n+2) { background: #10b981; }
.pw-meter[data-score="2"] small, .pw-meter[data-score="3"] small { color: #047857; }
.pw-meter[data-score="3"] span { background: #047857; }
@media (max-width: 480px) {
  .auth-modal { padding: 12px; }
  .auth-card { padding: 24px 18px 20px; border-radius: 22px; max-height: calc(100dvh - 24px); }
  .auth-logo { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 10px; }
  #loginModal h2, #registerModal h2 { font-size: 1.4rem; }
  .auth-head { margin-bottom: 14px; }
}
.auth-card .reg-verify-msg.auth-note { margin: 0 0 14px; text-align: left; color: #065f46; font-size: .9rem; }

/* ===== Sửa lỗi giao diện sau kiểm tra bằng ảnh chụp ===== */
/* Menu điện thoại: phủ kín màn hình, ẩn nút nổi + thanh dưới khi đang mở */
@media (max-width: 1100px) {
  .nav-links.open { min-height: calc(100dvh - 72px); }
}
body.menu-open .floating-speed-dial, body.menu-open .mobile-cta-bar { display: none !important; }
/* Điện thoại: thanh dưới đã có Gọi / Zalo / Đặt thợ -> chỉ giữ nút lên đầu trang, nhỏ gọn, không che nội dung */
@media (max-width: 768px) {
  .floating-speed-dial .dial-fb { display: none !important; }
  .floating-speed-dial { right: 10px !important; }
  .floating-speed-dial .dial-btn { width: 42px !important; height: 42px !important; }
}
/* Dải giá chạy: nhãn luôn nằm trên chữ chạy */
.ticker-label { position: relative; z-index: 3; box-shadow: 0 0 0 10px #ecfdf5; }
/* Báo giá nhanh: ô "Loa, nút, Face ID" rộng 2 cột, không bị ngắt chữ */
.qq-fault[data-fault="parts"] { grid-column: span 2; }
/* Hàng nút vuốt ngang (dòng máy, model, lỗi): mờ dần ở mép phải để khách biết còn nút phía sau */
@media (max-width: 768px) {
  #calcSeriesRow, #calcModelsGrid, #calcFaultsGrid { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
}
/* Form liên hệ: hàng không bị kéo giãn bằng nhau (trước đây nhãn cao 45px, ô nhập 77px) */
.contact-form { grid-auto-rows: auto; align-content: start; }
.contact-form .form-row { align-content: start; grid-template-rows: auto auto; }
.contact-form .form-row > label { line-height: 1.4; }
.contact-form .form-input, .contact-form .form-select { height: auto; min-height: 48px; }

/* =====================================================================
   Trang chủ mẫu 2026-10: header nền tối + khung đầu trang
   (src/components/Header.js, src/components/Hero.js; ảnh nền public/images/hero-workshop*.webp, ảnh dịch vụ public/images/svc/)
   ===================================================================== */
/* ----- Header nền tối (trang chủ + Bán máy, Mua máy, Bảng giá, Liên hệ) ----- */
.header { background: #0b1220; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.header.scrolled { background: rgba(11, 18, 32, 0.94); box-shadow: 0 10px 28px rgba(2, 6, 23, 0.35); }
.header .logo-mark { width: 44px; height: 44px; border-radius: 12px; background: #fff !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 18px rgba(0, 0, 0, 0.35); }
.header .logo-text { color: #fff; font-weight: 800; font-size: 1.32rem; letter-spacing: 0.3px; line-height: 1.1; }
.header .logo-accent { color: #22c55e; }
.header .logo-subtitle { color: #cbd5e1; font-size: 0.74rem; font-weight: 500; }
.header .menu-toggle { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
.header .hotline { color: #fff; gap: 12px; text-decoration: none; }
.header .hotline-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; border: 1.5px solid rgba(34, 197, 94, 0.6); color: #22c55e; background: rgba(34, 197, 94, 0.08); }
.header .hotline-number { color: #fff; font-size: 1.02rem; font-weight: 800; letter-spacing: 0.2px; }
.header .hotline-label { color: #94a3b8; font-size: 0.72rem; font-weight: 500; }
.header .hotline-text { color: #fff; font-weight: 700; }
.header .btn-admin { background: transparent; color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.2); width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; border-radius: 50%; }
.header .btn-admin .btn-admin-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* chỉ còn biểu tượng; trình đọc màn hình vẫn đọc "Đăng nhập" */
.header .btn-admin:hover { color: #fff; border-color: #22c55e; background: rgba(34, 197, 94, 0.1); }
.header .user-btn { color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 100px; background: transparent; }
.hdr-book { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border: none; border-radius: 12px; background: linear-gradient(180deg, #22c55e, #16a34a); color: #fff; font-weight: 700; font-size: 0.95rem; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 22px rgba(34, 197, 94, 0.3); transition: transform 0.2s ease, filter 0.2s ease; }
.hdr-book:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); }
@media (min-width: 1101px) {
  .header .nav-menu { margin: 0 12px; }
  .header .nav-links { gap: 2px; }
  .header .nav-links > li > a { color: #e2e8f0; font-weight: 600; font-size: 0.92rem; padding: 8px 11px; }
  .header .nav-links > li > a > svg:not(.nav-caret) { display: none; }
  .header .nav-links > li > a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
  .header .nav-links > li > a.active { color: #fff; background: #15803d; box-shadow: 0 6px 18px rgba(21, 128, 61, 0.35); }
}
@media (max-width: 1380px) { .header .hotline-info { display: none; } }
@media (max-width: 1280px) { .hdr-book { padding: 0 14px; } .header .nav-cta { gap: 10px; } }
@media (max-width: 1100px) {
  .header .nav-links { background: #0b1220; border-bottom-color: rgba(255, 255, 255, 0.08); }
  .header .nav-links > li > a { color: #e2e8f0; }
  .header .nav-links > li > a.active, .header .nav-links > li > a:hover { color: #fff; background: rgba(34, 197, 94, 0.14); }
  .header .nav-sub { background: rgba(255, 255, 255, 0.04); }
  .header .nav-links .nav-sub a { background: rgba(255, 255, 255, 0.06); color: #e2e8f0; }
  .header .nav-links .nav-sub a:hover { background: rgba(34, 197, 94, 0.16); color: #fff; }
  .header .nav-links .nav-sub a.nav-sub-all { color: #4ade80; }
}
/* Điện thoại: thanh dưới đã có nút Đặt thợ */
@media (max-width: 768px) { .hdr-book { display: none; } }

/* ----- Khung đầu trang ----- */
.hero.hx { padding: 72px 0 0; min-height: 0; background: #f3f7f5; overflow: hidden; }
/* Ảnh nền 2858x820 (đã ghép biển hiệu lên trên 3 máy, xoá biển hiệu gốc, nới 2 bên) hiện ở 80%: tâm 3 máy (x=1196px trong ảnh)
   đặt giữa cột ảnh, tức giữa cột chữ và thẻ báo giá = 50% + 50px (lưới 500px | 1fr | 400px, cách 28px), màn hình nào cũng đúng chỗ */
.hx-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #f3f7f5; }
.hx-bg::before { content: ''; position: absolute; top: 40px; left: calc(50% - 1146px); width: 2286px; height: 656px; background: url('/public/images/hero-workshop.webp?v=2') 0 0 / 100% 100% no-repeat; }
.hx-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.35) 30%, rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, rgba(243, 247, 245, 0) 560px, #f3f7f5 690px); }
.hx-wrap { position: relative; z-index: 2; }
.hx-grid { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr) 400px; grid-template-areas: "content visual quote" "stats stats quote"; column-gap: 28px; row-gap: 26px; align-items: start; padding: 28px 0 30px; }
.hx-content { grid-area: content; padding-top: 18px; }
.hx-visual { grid-area: visual; }
.hx-quote { grid-area: quote; }
.hx-stats { grid-area: stats; align-self: end; }

.hx-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; border-radius: 100px; background: rgba(255, 255, 255, 0.94); border: 1px solid #e3ebe7; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); font-size: 0.95rem; font-weight: 600; color: #1e293b; }
.hx-badge-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff3e8; color: #f97316; }
.hx .hx-title { margin: 22px 0 18px; font-family: var(--font-body); font-size: clamp(2.5rem, 3.8vw, 3.45rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; color: #0b1220; }
.hx-hl { position: relative; display: inline-block; color: #16a34a; white-space: nowrap; }
.hx-swash { position: absolute; left: 0; bottom: -0.16em; width: 100%; height: 0.3em; color: #16a34a; overflow: visible; }
.hx-desc { max-width: 490px; margin: 0 0 26px; font-size: 1.1rem; line-height: 1.6; color: #475569; }
.hx-feats { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 14px 22px; }
.hx-feats li { display: flex; align-items: center; gap: 12px; font-size: 0.92rem; font-weight: 600; line-height: 1.3; color: #1e293b; }
.hx-fi { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: #e3f6ea; color: #16a34a; }
.hx-ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.hx-btn-main, .hx-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 60px; padding: 0 30px; border-radius: 16px; font-size: 1.1rem; font-weight: 700; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.hx-btn-main { min-width: 260px; border: none; color: #fff; background: linear-gradient(180deg, #1fb85a, #15803d); box-shadow: 0 14px 30px rgba(22, 163, 74, 0.32); cursor: pointer; }
.hx-btn-main:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 36px rgba(22, 163, 74, 0.4); }
.hx-btn-ghost { min-width: 220px; color: #0b1220; background: rgba(255, 255, 255, 0.9); border: 1.5px solid #cfd8d3; }
.hx-btn-ghost:hover { color: #15803d; border-color: #16a34a; transform: translateY(-2px); }

.hx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 20px 6px; background: rgba(255, 255, 255, 0.97); border: 1px solid #e5ece8; border-radius: 22px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); }
.hx-stat { display: flex; align-items: center; gap: 12px; padding: 2px 18px; }
.hx-stat + .hx-stat { border-left: 1px solid #e5e7eb; }
.hx-si { width: 46px; height: 46px; display: grid; place-items: center; flex-shrink: 0; color: #16a34a; }
.hx-stat > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.hx-stat strong { font-size: 1.3rem; font-weight: 800; line-height: 1.2; color: #15803d; white-space: nowrap; }
.hx-stat small { font-size: 0.84rem; color: #64748b; }

/* Thẻ Báo giá nhanh */
.hx-quote { gap: 0; padding: 22px 22px 16px; background: rgba(255, 255, 255, 0.98); border: 1px solid #e5ece8; border-radius: 24px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14); }
.hxq-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid #edf2ef; }
.hxq-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: #e3f6ea; color: #16a34a; }
.hxq-head h2 { flex: 1; margin: 0; font-family: var(--font-body); font-size: 1.32rem; font-weight: 800; color: #0b1220; }
.hxq-pill { padding: 6px 12px; border-radius: 100px; background: #e3f6ea; color: #15803d; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.hxq-step { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 8px; }
.hxq-step label, .hxq-step > span:first-child { display: flex; align-items: center; gap: 10px; font-size: 0.96rem; font-weight: 700; color: #0b1220; }
.hxq-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: #16a34a; color: #fff; font-size: 0.78rem; font-weight: 800; }
.hx-quote .qq-symptom-toggle { color: #16a34a; font-size: 0.85rem; padding: 4px 0; }
.hx-quote .qq-symptoms { margin-bottom: 8px; }
.hxq-select { position: relative; }
.hxq-select select { width: 100%; height: 50px; padding: 0 44px 0 16px; border: 1.5px solid #dde6e1; border-radius: 12px; background: #fff; font: inherit; font-size: 1rem; font-weight: 600; color: #0b1220; cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.hxq-select select:hover { border-color: #a7dcbc; }
.hxq-select select:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15); }
.hxq-select-ic select { padding-left: 44px; }
.hxq-select > svg { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; }
.hxq-select > svg:first-child:not(.hxq-chev) { left: 16px; color: #0b1220; }
.hxq-chev { right: 14px; color: #64748b; }
.hxq-info { position: relative; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #94a3b8; color: #64748b; font-size: 0.72rem; font-weight: 800; font-style: italic; cursor: help; flex-shrink: 0; margin-right: auto; margin-left: -2px; }
.hxq-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 5; width: 240px; padding: 10px 12px; border-radius: 10px; background: #0b1220; color: #fff; font-size: 0.78rem; font-style: normal; font-weight: 500; line-height: 1.45; text-align: left; transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity 0.15s ease; box-shadow: 0 10px 24px rgba(2, 6, 23, 0.25); }
.hxq-info:hover .hxq-tip, .hxq-info:focus .hxq-tip { opacity: 1; visibility: visible; }
.hxq-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hxq-options[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.hxq-options[data-count="2"], .hxq-options[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hxq-options .qq-option { flex-direction: column; justify-content: center; gap: 2px; min-height: 92px; padding: 10px 6px; border-radius: 14px; text-align: center; }
.hxq-options .qq-option-name { display: block; font-size: 0.84rem; font-weight: 700; line-height: 1.25; color: #0b1220; }
.hxq-options .qq-option small { font-size: 0.72rem; color: #64748b; }
.hxq-options .qq-option strong { margin-top: 4px; font-size: 1.02rem; font-weight: 800; color: #15803d; }
.hxq-options .qq-option.is-selected { border-color: #16a34a; background: #f0fdf4; box-shadow: inset 0 0 0 1px #16a34a, 0 6px 16px rgba(22, 163, 74, 0.14); }
.hxq-warranty { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border: 1px solid #e5ece8; border-radius: 14px; background: #f8faf9; color: #0b1220; text-decoration: none; transition: border-color 0.15s ease; }
.hxq-warranty:hover { border-color: #a7dcbc; }
.hxq-w-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: #fff; border: 1px solid #e2e8f0; color: #16a34a; }
.hxq-w-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.hxq-w-txt strong { font-size: 0.94rem; font-weight: 700; }
.hxq-w-txt small { font-size: 0.78rem; color: #64748b; }
.hxq-warranty > svg:last-child { color: #94a3b8; flex-shrink: 0; }
.hx-quote .hxq-cta { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; margin-top: 14px; border-radius: 14px; background: linear-gradient(180deg, #1fb85a, #15803d); font-size: 1.05rem; box-shadow: 0 12px 26px rgba(22, 163, 74, 0.3); }
.hx-quote .hxq-cta:hover { background: linear-gradient(180deg, #22c55e, #166534); }
.hxq-call { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: 0.82rem; color: #64748b; text-align: center; }
.hxq-call svg { color: #16a34a; flex-shrink: 0; }
.hxq-call a { color: #0b1220; font-weight: 800; white-space: nowrap; }

/* Hàng 5 dịch vụ nổi bật */
.hx-svc { padding: 8px 0 18px; background: linear-gradient(180deg, #f3f7f5 0%, #fff 100%); }
.hx-svc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.hx-svc-card { display: flex; align-items: stretch; gap: 4px; min-height: 112px; padding-right: 14px; overflow: hidden; border-radius: 18px; background: linear-gradient(135deg, #eaf6ef, #f5faf7); border: 1px solid #e0ece5; color: #0b1220; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.hx-svc-card:hover { transform: translateY(-3px); border-color: #a7dcbc; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08); }
.hx-svc-card img { width: 100px; height: auto; aspect-ratio: 1; align-self: flex-end; object-fit: cover; flex-shrink: 0; -webkit-mask-image: radial-gradient(120% 110% at 30% 60%, #000 62%, transparent 82%); mask-image: radial-gradient(120% 110% at 30% 60%, #000 62%, transparent 82%); }
.hx-svc-txt { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 12px 0; }
.hx-svc-txt strong { font-family: var(--font-body); font-size: 0.97rem; font-weight: 800; line-height: 1.25; }
.hx-svc-txt > span:not(.hx-svc-go) { font-size: 0.78rem; line-height: 1.35; color: #64748b; }
.hx-svc-go { width: 32px; height: 32px; margin-top: 6px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #16a34a; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08); transition: transform 0.2s ease; }
.hx-svc-go svg { width: 16px; height: 16px; }
.hx-svc-card:hover .hx-svc-go { transform: translateX(3px); }

/* Màn hình rộng: khung trang tới 1600px, cột chữ / thẻ báo giá rộng hơn */
@media (min-width: 1400px) {
  :root { --page-w: max(1240px, min(1600px, calc(100vw - 184px))); } /* chừa ~90px mỗi bên cho nút Gọi / Zalo / Facebook nổi bên phải */
  .hx-grid { grid-template-columns: minmax(0, 540px) minmax(0, 1fr) 420px; column-gap: 32px; }
  .hx-bg::before { left: calc(50% - 1136px); } /* tâm cột ảnh = 50% + 60px */
  .hx-desc { max-width: 520px; }
}
@media (max-width: 1280px) {
  .hx-grid { grid-template-columns: minmax(0, 470px) minmax(0, 1fr) 380px; column-gap: 22px; }
  .hx-stat { padding: 2px 12px; gap: 8px; }
  .hx-si { width: 36px; }
  .hx-btn-main, .hx-btn-ghost { min-width: 0; padding: 0 24px; }
  .hx-svc-card img { width: 86px; }
}
@media (max-width: 1100px) {
  .hx-bg { display: none; }
  .hero.hx { padding-top: 44px; background: linear-gradient(180deg, #f3faf6 0%, #f3f7f5 100%); }
  .hx-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "content" "visual" "quote" "stats"; max-width: 680px; margin: 0 auto; padding-top: 20px; }
  .hx-content { padding-top: 6px; }
  .hx-visual { aspect-ratio: 6 / 5; border-radius: 22px; background: #e9f0ec url('/public/images/hero-workshop-m.webp?v=2') 50% 40% / cover no-repeat; box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12); }
  .hx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .hx-stat:nth-child(3) { border-left: none; }
  .hx-svc-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
  .hx-svc-card { scroll-snap-align: start; }
}
@media (max-width: 600px) {
  .hx .hx-title { font-size: clamp(2.1rem, 10vw, 2.6rem); margin: 18px 0 14px; }
  .hx-badge { font-size: 0.82rem; padding: 7px 14px 7px 8px; }
  .hx-desc { font-size: 1rem; }
  .hx-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .hx-feats li { font-size: 0.82rem; gap: 8px; }
  .hx-fi { width: 40px; height: 40px; }
  .hx-ctas { flex-direction: column; }
  .hx-btn-main, .hx-btn-ghost { width: 100%; min-width: 0; min-height: 56px; }
  .hx-quote { padding: 18px 14px 14px; border-radius: 20px; }
  .hxq-head h2 { font-size: 1.18rem; }
  .hxq-options .qq-option { min-height: 86px; padding: 8px 4px; }
  .hxq-options .qq-option-name { font-size: 0.8rem; }
  .hxq-options .qq-option strong { font-size: 0.95rem; }
  .hxq-call { flex-wrap: wrap; }
  .hx-stats { padding: 14px 4px; }
  .hx-stat { padding: 2px 10px; }
  .hx-stat strong { font-size: 1.1rem; }
  .hx-stat small { font-size: 0.76rem; }
  .hxq-tip { left: auto; right: -80px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-btn-main, .hx-btn-ghost, .hx-svc-card, .hx-svc-go, .hdr-book { transition: none; }
}

/* ----- Cửa hàng: 2 hàng x 5 máy + hiệu ứng (scripts/products-render.mjs; nghiêng 3D / vệt sáng theo chuột: js/fx.js) -----
   Thẻ dùng ::before/::after của .product-img-box (quầng sáng, vệt sáng quét); ::before/::after của chính thẻ để cho js/fx.js */
#sell-buy .tech-products-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.tech-product-card { padding: 10px 10px 14px; border-radius: 22px; border: 1px solid #e6edf0; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -18px rgba(15, 23, 42, 0.18); }
.tech-product-card:hover { border-color: rgba(34, 197, 94, 0.45); box-shadow: 0 22px 44px -18px rgba(22, 163, 74, 0.32); }
.tech-product-card .product-img-box { position: relative; height: 210px; margin-bottom: 14px; border-radius: 16px; overflow: hidden; isolation: isolate; background: radial-gradient(120% 85% at 50% 100%, #dff5e8 0%, #f1f8f4 52%, #f8fafc 100%); }
/* quầng sáng sau máy: phồng lên khi rê chuột */
.tech-product-card .product-img-box::before { content: ''; position: absolute; left: 50%; top: 54%; z-index: -1; width: 72%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(0.9); background: radial-gradient(circle, rgba(34, 197, 94, 0.32), rgba(34, 197, 94, 0) 66%); opacity: 0.75; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease; }
.tech-product-card:hover .product-img-box::before { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
/* vệt sáng quét chéo qua ảnh */
.tech-product-card .product-img-box::after { content: ''; position: absolute; inset: -10% -40%; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.7) 50%, transparent 62%); transform: translateX(-75%); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.tech-product-card:hover .product-img-box::after { transform: translateX(75%); }
/* ảnh sản phẩm thường có nền trắng: multiply cho nền trắng hoà vào nền thẻ (không còn ô vuông trắng) */
.tech-product-card .product-img { max-height: 88%; mix-blend-mode: multiply; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.tech-product-card:hover .product-img { transform: translateY(-8px) rotate(-3deg); }
.product-off { position: absolute; top: 10px; right: 10px; z-index: 3; padding: 3px 9px; border-radius: 100px; background: #0b1220; color: #fff; font-size: 0.72rem; font-weight: 800; }
.tech-product-card .product-badge { top: 18px; left: 18px; padding: 4px 11px; background: linear-gradient(135deg, #f97316, #ef4444); box-shadow: 0 6px 14px rgba(239, 68, 68, 0.35); letter-spacing: 0.4px; animation: shopBadge 2.4s ease-in-out infinite; }
@keyframes shopBadge { 0%, 100% { box-shadow: 0 6px 14px rgba(239, 68, 68, 0.35), 0 0 0 0 rgba(239, 68, 68, 0.45); } 50% { box-shadow: 0 6px 14px rgba(239, 68, 68, 0.35), 0 0 0 6px rgba(239, 68, 68, 0); } }
.tech-product-card .product-info { padding: 0 4px; }
.product-brand { margin-bottom: 4px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #16a34a; }
.tech-product-card .product-info h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; margin-bottom: 8px; font-family: var(--font-body); font-size: 0.98rem; font-weight: 800; line-height: 1.3; color: #0b1220; }
.tech-product-card .product-tags { margin-bottom: 10px; gap: 5px; }
.tech-product-card .product-tags span { padding: 3px 9px; border-radius: 100px; background: #f1f5f9; color: #475569; font-size: 0.7rem; }
.tech-product-card .product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-bottom: 12px; font-size: 1.16rem; color: #15803d; }
.tech-product-card .product-price del { margin-left: 0; font-size: 0.8rem; }
.tech-product-card .product-buy-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 1.5px solid #d6e4dc; border-radius: 12px; background: #fff; color: #0b1220; font-weight: 700; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.tech-product-card .product-buy-btn svg { transition: transform 0.3s ease; }
.tech-product-card:hover .product-buy-btn { border-color: transparent; background: linear-gradient(180deg, #22c55e, #16a34a); color: #fff; box-shadow: 0 10px 20px -8px rgba(22, 163, 74, 0.55); }
.tech-product-card:hover .product-buy-btn svg { transform: translateX(4px); }
.shop-all-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 30px; border-radius: 100px; border: 1.5px solid #cfe3d7; background: #fff; color: #0b1220; font-weight: 700; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
.shop-all-btn:hover { background: #0b1220; border-color: #0b1220; color: #fff; transform: translateY(-2px); }
.shop-all-btn svg { transition: transform 0.25s ease; }
.shop-all-btn:hover svg { transform: translateX(4px); }
@media (max-width: 1280px) {
  #sell-buy .tech-products-grid { gap: 14px; }
  .tech-product-card .product-img-box { height: 180px; }
}
/* Máy tính bảng / điện thoại: một dải vuốt ngang đủ 10 máy (bỏ lưới 2 cột ẩn bớt máy) */
@media (max-width: 1100px) {
  #sell-buy .tech-products-grid { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(220px, 30%); gap: 14px !important; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; margin: 0 -4px; scrollbar-width: thin; }
  #sell-buy .tech-products-grid > .tech-product-card { scroll-snap-align: start; }
  #sell-buy .tech-products-grid > .tech-product-card:nth-child(n+5) { display: flex; }
}
@media (max-width: 768px) {
  #sell-buy .tech-products-grid { grid-auto-columns: 46%; gap: 10px !important; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  #sell-buy .tech-product-card { padding: 8px 8px 12px; }
  #sell-buy .product-img-box { height: 140px; margin-bottom: 10px; }
  #sell-buy .product-info h3 { font-size: 0.86rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-product-card .product-badge { animation: none; }
  .tech-product-card .product-img-box::after { display: none; }
}

/* ----- Tin tức trang chủ: một hàng 5 bài gọn (scripts/articles-render.mjs homeNews) ----- */
.nw-home-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.nw-home-grid .nw-home-card { border-radius: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -18px rgba(15, 23, 42, 0.2); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.3s ease; }
.nw-home-grid .nw-home-card:hover { border-color: rgba(34, 197, 94, 0.4); box-shadow: 0 20px 40px -18px rgba(22, 163, 74, 0.3); }
.nw-home-grid .news-img { aspect-ratio: 16 / 10; }
.nw-home-grid .news-content { gap: 8px; padding: 14px 14px 16px; }
.nw-home-grid .news-meta { gap: 6px; font-size: 0.72rem; }
.nw-home-grid .news-meta .ar-chip { padding: 3px 8px; font-size: 0.64rem; }
.nw-home-grid h3 { font-size: 0.95rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-home-grid p { font-size: 0.82rem; line-height: 1.5; -webkit-line-clamp: 2; }
.nw-home-grid .nw-home-more { font-size: 0.84rem; }
.nw-home-grid .nw-home-more span { display: inline-block; transition: transform 0.25s ease; }
.nw-home-grid .nw-home-card:hover .nw-home-more span { transform: translateX(4px); }
/* Máy tính bảng: dải vuốt ngang (5 thẻ không vừa một hàng) */
@media (max-width: 1100px) and (min-width: 769px) {
  .nw-home-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 31%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; }
  .nw-home-grid > * { scroll-snap-align: start; }
}
@media (max-width: 768px) {
  .nw-home-grid.m-swipe > * { flex-basis: 72%; }
}

/* ----- Popup chi tiết sản phẩm: giới thiệu + thông số kỹ thuật (src/main.js fillMore, data/product-specs.js) ----- */
.pd-dialog { max-width: 1000px; }
.pd-media img { mix-blend-mode: multiply; filter: none; } /* nền trắng của ảnh hoà vào nền xanh nhạt */
.pd-more { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 26px; padding: 24px 28px 28px; border-top: 1px solid #edf2ef; background: #fbfdfc; }
.pd-more-loading { grid-column: 1 / -1; margin: 0; color: #64748b; font-size: 0.9rem; }
.pd-more h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--font-body); font-size: 1.08rem; font-weight: 800; color: #0b1220; }
.pd-more h3::before { content: ''; width: 4px; height: 18px; border-radius: 4px; background: #16a34a; }
.pd-more h4 { margin: 16px 0 8px; font-size: 0.92rem; font-weight: 800; color: #0b1220; }
.pd-intro p { margin: 0; font-size: 0.92rem; line-height: 1.65; color: #334155; }
.pd-hl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pd-hl li { position: relative; padding-left: 28px; font-size: 0.9rem; line-height: 1.45; color: #1e293b; }
.pd-hl li::before { content: ''; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pd-state { margin-top: 16px; padding: 12px 14px; border: 1px dashed #bbe5cb; border-radius: 14px; background: #f3fbf6; }
.pd-state h4 { margin-top: 0; }
.pd-state dl { margin: 0; display: grid; gap: 6px; }
.pd-state dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; font-size: 0.86rem; }
.pd-state dt { color: #64748b; }
.pd-state dd { margin: 0; font-weight: 600; color: #0b1220; }
.pd-spec-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid #e5ece8; border-radius: 14px; background: #fff; font-size: 0.86rem; }
.pd-spec-table th, .pd-spec-table td { padding: 9px 12px; text-align: left; vertical-align: top; line-height: 1.45; border-bottom: 1px solid #eef2f0; }
.pd-spec-table tr:last-child th, .pd-spec-table tr:last-child td { border-bottom: none; }
.pd-spec-table tr:nth-child(even) { background: #f8faf9; }
.pd-spec-table th { width: 36%; font-weight: 600; color: #64748b; }
.pd-spec-table td { font-weight: 600; color: #0b1220; }
.pd-more.is-collapsed .pd-spec-table tr:nth-child(n+9) { display: none; }
.pd-spec-more { width: 100%; min-height: 40px; margin-top: 10px; border: 1.5px solid #d6e4dc; border-radius: 12px; background: #fff; color: #15803d; font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.pd-spec-more:hover { border-color: #16a34a; background: #f0fdf4; }
.pd-spec-note { margin: 8px 0 0; font-size: 0.74rem; color: #94a3b8; }
@media (max-width: 720px) {
  .pd-more { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 18px 16px 26px; }
  .pd-spec-table th { width: 40%; }
}

/* Nút xanh dạng link (a.btn-primary: "Gọi đặt mua", "Đặt thợ ngay"...): chữ luôn trắng khi rê chuột / bấm phím Tab */
a.btn-primary:hover, a.btn-primary:focus-visible { color: #fff; }

/* Popup "Xem tất cả sản phẩm": bỏ lề 20px của .modal (lớp chung với popup đăng nhập) để popup sát mép, không còn 2 dải tối 2 bên;
   thanh cuộn chừa chỗ đều 2 bên nên lưới không lệch */
.catalog-modal { padding: 0 !important; }
.catalog-body { scrollbar-gutter: stable both-edges; }
@media (max-width: 640px) {
  .catalog-body { padding: 12px 8px !important; }
  /* thẻ trong popup trên điện thoại: giữ bản rút gọn (ảnh thấp, bấm cả thẻ để xem chi tiết) — thắng CSS thẻ cửa hàng mới */
  .catalog-grid .tech-product-card { padding: 8px 8px 12px; border-radius: 18px; }
  .catalog-grid .tech-product-card .product-img-box { height: 120px; margin-bottom: 10px; border-radius: 14px; }
  .catalog-grid .tech-product-card .product-buy-btn { display: none; }
  .catalog-grid .tech-product-card .product-info { padding: 0 2px; }
  .catalog-grid .tech-product-card .product-info h3 { font-size: 0.86rem; min-height: 0; }
  .catalog-grid .tech-product-card .product-price { margin-bottom: 0; font-size: 0.98rem; }
}

/* Thứ tự lớp các popup: "Xem tất cả sản phẩm" / định giá (9999) < chi tiết sản phẩm (mở từ trong "Xem tất cả") < đặt lịch < thông báo.
   Trước đây popup chi tiết (3500) nằm dưới "Xem tất cả" nên bấm "Xem chi tiết" không thấy gì; thông báo (4000) bị che khi đang mở định giá */
.pd-modal { z-index: 10050; }
.toast { z-index: 10200; }

/* ----- Popup "Xem tất cả sản phẩm" (thiết kế lại 2026-10): khung giữa màn hình, bo đủ 4 góc, ô tìm máy, lưới 5 cột -----
   (scripts/products-render.mjs productsCatalog, src/main.js initCatalogFilters) */
.catalog-header { gap: 20px; padding: 18px 26px; border-radius: 0; }
.catalog-title { flex: 1; min-width: 0; }
.catalog-title h2 { font-size: 1.55rem !important; }
.catalog-title p { margin: 0; font-size: 0.85rem !important; }
.catalog-search { position: relative; flex: 0 1 360px; }
.catalog-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #64748b; pointer-events: none; }
.catalog-search input { width: 100%; height: 46px; padding: 0 16px 0 44px; border: 1.5px solid #dde6e1; border-radius: 100px; background: #f6f9f7; font: inherit; font-size: 0.95rem; color: #0b1220; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.catalog-search input:focus { outline: none; border-color: #16a34a; background: #fff; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12); }
.catalog-filters { gap: 8px; padding: 12px 26px; }
.catalog-filter { display: inline-flex; align-items: center; gap: 7px; padding: 7px 8px 7px 14px; font-size: 0.88rem; }
.catalog-filter .cf-n { min-width: 24px; padding: 2px 7px; border-radius: 100px; background: #f1f5f9; color: #64748b; font-size: 0.72rem; font-weight: 800; text-align: center; }
.catalog-filter.active { background: #15803d; border-color: #15803d; color: #fff; }
.catalog-filter.active .cf-n { background: rgba(255, 255, 255, 0.22); color: #fff; }
.catalog-body { background: #f4f8f6; }
.catalog-count { margin: 0 0 14px; font-size: 0.86rem; font-weight: 600; color: #64748b; }
.catalog-empty[hidden] { display: none; }
#modalAllProducts .catalog-grid { gap: 16px; }
/* khung nội dung luôn nằm trên lớp phủ mờ .modal::before (lớp chung với popup đăng nhập) */
.catalog-modal-content { position: relative; z-index: 1; }
@media (min-width: 641px) {
  .catalog-modal { align-items: center; padding: 24px !important; }
  .catalog-modal-content { max-width: 1320px; height: calc(100vh - 48px); height: calc(100dvh - 48px); border-radius: 24px; overflow: hidden; transform: translateY(24px) scale(0.985); box-shadow: 0 40px 100px rgba(2, 6, 23, 0.35); }
  .catalog-modal.show .catalog-modal-content { transform: none; }
  .catalog-body { padding: 18px 26px 28px; }
  #modalAllProducts .catalog-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #modalAllProducts .tech-product-card .product-img-box { height: 180px; }
}
@media (max-width: 1280px) and (min-width: 641px) { #modalAllProducts .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1024px) and (min-width: 641px) { #modalAllProducts .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) and (min-width: 641px) {
  .catalog-header { flex-wrap: wrap; }
  .catalog-search { order: 3; flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .catalog-header { flex-wrap: wrap; gap: 10px 12px; }
  .catalog-search { order: 3; flex: 1 1 100%; }
  .catalog-search input { height: 42px; }
  .catalog-count { margin-bottom: 10px; padding: 0 4px; font-size: 0.8rem; }
}