/* ================================================================
   DỊCH THUẬT SỐ HÓA — SHARED STYLESHEET
   Dùng cho toàn bộ website (trang chính + vệ tinh)
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800;900&family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  --blue-dark: #003580;
  --blue-main: #0050B3;
  --blue-light: #1677FF;
  --blue-pale: #E6F0FF;
  --red: #D72323;
  --red-light: #FF4D4D;
  --white: #FFFFFF;
  --black: #0D0D0D;
  --gray-dark: #1A1A2E;
  --gray-mid: #4A4A6A;
  --gray-light: #F0F4FF;
  --gold: #FFB800;
  --green: #00A854;
  --border: #D1DCF0;
  --shadow: 0 4px 24px rgba(0,53,128,.12);
  --shadow-lg: 0 12px 40px rgba(0,53,128,.18);
  --radius: 10px;
  --radius-lg: 18px;
  --font-head: 'Lexend', sans-serif;
  --font-body: 'Be Vietnam Pro', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); color: var(--black); background: #fff; line-height: 1.65; overflow-x: hidden; }
h1,h2,h3,h4,h5 { font-family: var(--font-head); line-height: 1.25; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
button { cursor: pointer; font-family: var(--font-body); }

/* ===== LAYOUT ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section-sm { padding: 40px 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.flex { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.text-center { text-align: center; }

/* ===== TYPOGRAPHY ===== */
.section-title { font-size: clamp(22px,3vw,32px); color: var(--blue-dark); margin-bottom: 8px; font-weight: 800; }
.section-sub { color: var(--gray-mid); font-size: 15px; margin-bottom: 36px; }
.divider { width: 56px; height: 4px; background: linear-gradient(90deg,var(--red),var(--blue-light)); border-radius: 4px; margin: 12px 0 24px; }
.divider.center { margin-left: auto; margin-right: auto; }
.tag { display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; background: var(--blue-pale); color: var(--blue-main); border: 1px solid #C0D4FF; }
.highlight { color: var(--red); font-weight: 700; }

/* ===== BUTTONS ===== */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 8px; font-weight: 700; font-size: 15px; cursor: pointer; transition: all .2s; border: none; font-family: var(--font-body); }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 4px 16px rgba(215,35,35,.3); }
.btn-primary:hover { background: #b81c1c; transform: translateY(-2px); }
.btn-blue { background: var(--blue-main); color: #fff; }
.btn-blue:hover { background: var(--blue-dark); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--blue-main); border: 2px solid var(--blue-main); }
.btn-outline:hover { background: var(--blue-main); color: #fff; }
.btn-white { background: #fff; color: var(--blue-dark); font-weight: 800; }
.btn-white:hover { background: var(--blue-pale); }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* ===== CARDS ===== */
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; transition: all .25s; }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--blue-light); }
.card-icon { width: 52px; height: 52px; background: var(--blue-pale); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 16px; }

/* ===== STATUS BADGES ===== */
.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.sb-new { background: rgba(6,182,212,.12); color: #0891B2; } .sb-new::before { background: #06B6D4; }
.sb-quoted { background: rgba(245,158,11,.12); color: #B45309; } .sb-quoted::before { background: #F59E0B; }
.sb-confirmed { background: rgba(37,99,235,.12); color: #1D4ED8; } .sb-confirmed::before { background: #2563EB; }
.sb-processing { background: rgba(139,92,246,.12); color: #6D28D9; } .sb-processing::before { background: #8B5CF6; animation: pulse 1s infinite; }
.sb-done { background: rgba(16,185,129,.12); color: #047857; } .sb-done::before { background: #10B981; }
.sb-invoiced { background: rgba(251,191,36,.12); color: #92400E; } .sb-invoiced::before { background: #FBBF24; }
.sb-paid { background: rgba(16,185,129,.2); color: #065F46; } .sb-paid::before { background: #059669; }
.sb-cancelled { background: rgba(239,68,68,.12); color: #B91C1C; } .sb-cancelled::before { background: #EF4444; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ===== TOPBAR ===== */
.topbar { background: var(--blue-dark); color: #fff; font-size: 13px; padding: 8px 0; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.topbar a { color: rgba(255,255,255,.85); transition: color .2s; }
.topbar a:hover { color: #fff; }
.topbar-item { display: flex; align-items: center; gap: 5px; }

/* ===== HEADER ===== */
header { position: sticky; top: 0; z-index: 900; background: #fff; box-shadow: 0 2px 12px rgba(0,53,128,.12); }
.header-inner { padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-box { width: 46px; height: 46px; background: linear-gradient(135deg,var(--blue-dark),var(--blue-light)); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-head); font-size: 18px; font-weight: 900; flex-shrink: 0; }
.logo-name { font-family: var(--font-head); font-size: 18px; font-weight: 900; color: var(--blue-dark); line-height: 1.2; }
.logo-sub { font-size: 11px; color: var(--gray-mid); }
.header-phone { font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--red); }

/* ===== NAV ===== */
nav.main-nav { background: var(--blue-dark); border-top: 3px solid var(--red); }
nav.main-nav ul { list-style: none; display: flex; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
nav.main-nav ul li a { display: block; padding: 12px 14px; color: #fff; font-size: 13.5px; font-weight: 600; transition: background .2s; white-space: nowrap; }
nav.main-nav ul li a:hover, nav.main-nav ul li a.active { background: var(--red); }
nav.main-nav .nav-hot { font-size: 10px; background: var(--gold); color: #000; padding: 1px 5px; border-radius: 8px; margin-left: 4px; font-weight: 700; }

/* ===== BREADCRUMB ===== */
.breadcrumb { padding: 10px 0; font-size: 13px; color: var(--gray-mid); }
.breadcrumb a { color: var(--blue-main); }
.breadcrumb span { margin: 0 6px; }

/* ===== FOOTER ===== */
footer { background: var(--gray-dark); color: #fff; padding: 48px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer-col h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--red); }
.footer-col ul { list-style: none; }
.footer-col ul li { padding: 4px 0; }
.footer-col ul li a { font-size: 13px; color: rgba(255,255,255,.65); transition: color .2s; display: flex; align-items: center; gap: 5px; }
.footer-col ul li a::before { content: '›'; color: var(--red); font-weight: 700; }
.footer-col ul li a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 14px 0; font-size: 12px; color: rgba(255,255,255,.4); text-align: center; }
.footer-phone { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--gold); margin-top: 12px; }

/* ===== USP STRIP ===== */
.usp-strip { background: var(--red); overflow-x: auto; }
.usp-strip-inner { display: flex; min-width: max-content; }
.usp-item { display: flex; align-items: center; gap: 7px; padding: 13px 18px; color: #fff; font-size: 13px; font-weight: 700; border-right: 1px solid rgba(255,255,255,.2); white-space: nowrap; }

/* ===== GUARANTEE STRIP ===== */
.guarantee-strip { background: var(--green); padding: 14px 0; }
.guarantee-strip .container { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; }
.g-item { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 700; }

/* ===== FORMS ===== */
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-mid); margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 14px; font-family: var(--font-body); outline: none; transition: border .2s; background: #fff; color: var(--black); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(22,119,255,.1); }
.form-field textarea { resize: vertical; min-height: 90px; }

/* ===== LANGUAGE CARDS ===== */
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 12px; }
.lang-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 10px; text-align: center; transition: all .2s; }
.lang-card:hover { border-color: var(--blue-light); transform: translateY(-3px); box-shadow: var(--shadow); }
.lang-card a { display: block; }
.lang-card .flag { font-size: 28px; margin-bottom: 6px; display: block; }
.lang-card .lname { font-size: 13px; font-weight: 700; color: var(--blue-dark); }
.lang-card .lsub { font-size: 11px; color: var(--gray-mid); margin-top: 2px; }

/* ===== PRICE TABLE ===== */
.price-table { width: 100%; border-collapse: collapse; }
.price-table thead th { background: var(--blue-dark); color: #fff; padding: 12px 14px; font-size: 13px; font-weight: 700; text-align: left; }
.price-table tbody tr:nth-child(even) { background: var(--blue-pale); }
.price-table tbody td { padding: 11px 14px; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.price-table .price-val { color: var(--red); font-weight: 700; font-family: var(--font-head); }

/* ===== PROCESS STEPS ===== */
.steps { display: flex; gap: 0; position: relative; }
.steps::before { content: ''; position: absolute; top: 34px; left: 5%; right: 5%; height: 2px; background: linear-gradient(90deg,var(--red),var(--blue-light)); }
.step { flex: 1; text-align: center; position: relative; z-index: 1; padding: 0 8px; }
.step-circle { width: 68px; height: 68px; background: linear-gradient(135deg,var(--blue-dark),var(--blue-light)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; border: 4px solid #fff; box-shadow: var(--shadow); font-size: 24px; }
.step h4 { font-size: 14px; font-weight: 700; color: var(--blue-dark); margin-bottom: 4px; }
.step p { font-size: 12px; color: var(--gray-mid); }

/* ===== TESTIMONIALS ===== */
.testimonial { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
.t-stars { color: var(--gold); font-size: 16px; margin-bottom: 8px; }
.t-text { font-size: 14px; color: var(--gray-mid); font-style: italic; margin-bottom: 14px; line-height: 1.7; }
.t-author { display: flex; align-items: center; gap: 10px; }
.t-avatar { width: 38px; height: 38px; background: linear-gradient(135deg,var(--blue-dark),var(--blue-light)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; font-family: var(--font-head); }
.t-name { font-weight: 700; font-size: 14px; color: var(--blue-dark); }
.t-role { font-size: 12px; color: var(--gray-mid); }

/* ===== NOTIFICATION TOAST ===== */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; font-size: 14px; box-shadow: var(--shadow-lg); pointer-events: all; display: flex; align-items: center; gap: 10px; min-width: 260px; animation: toastIn .3s ease; }
@keyframes toastIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast.success { border-left: 4px solid var(--green); }
.toast.error { border-left: 4px solid var(--red); }
.toast.info { border-left: 4px solid var(--blue-light); }

/* ===== MODAL ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(3px); }
.modal-box { background: #fff; border-radius: var(--radius-lg); width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.modal-head { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { font-size: 17px; font-weight: 700; color: var(--blue-dark); }
.modal-close { width: 30px; height: 30px; background: var(--gray-light); border: none; border-radius: 6px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: #FFECEC; color: var(--red); }
.modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .steps { flex-direction: column; gap: 16px; }
  .steps::before { display: none; }
  .lang-grid { grid-template-columns: repeat(3,1fr); }
  .header-phone { display: none; }
}
@media (max-width: 480px) {
  .lang-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr; }
}