:root {
      --blue: #0066ff;
      --blue-dark: #00143d;
      --blue-soft: #eaf1ff;
      --red: #ff2d2d;
      --orange: #ffb020;
      --text: #0f172a;
      --muted: #64748b;
      --bg: #f4f8ff;
      --white: #ffffff;
      --line: #dbe7ff;
      --shadow: 0 24px 70px rgba(0, 58, 184, .18);
      --radius: 26px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      overflow-x: hidden;
      font-family: 'Be Vietnam Pro', Arial, Helvetica, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(0,102,255,.16) 0, transparent 30%),
        radial-gradient(circle at bottom right, rgba(0,214,255,.12) 0, transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
    }

    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }

    .container {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(16px);
      background: rgba(255,255,255,.82);
      border-bottom: 1px solid rgba(219,231,255,.8);
    }

    .nav {
      height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 900;
      letter-spacing: -.5px;
      font-size: 24px;
      color: var(--blue-dark);
    }

    .logo {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: linear-gradient(145deg, var(--blue), #42a5ff);
      display: grid;
      place-items: center;
      color: #fff;
      box-shadow: 0 14px 32px rgba(0,87,255,.35);
      font-size: 20px;
      font-weight: 900;
    }

    .nav-links {
      display: flex;
      gap: 22px;
      color: #334155;
      font-size: 15px;
      font-weight: 700;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .btn {
      will-change: transform;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 0;
      cursor: pointer;
      padding: 13px 18px;
      border-radius: 999px;
      font-weight: 800;
      transition: .25s ease;
      font-size: 15px;
      white-space: nowrap;
    }

    .btn-primary {
      position: relative;
      overflow: hidden;
      color: #fff;
      background: linear-gradient(135deg, #00143d 0%, #00235f 45%, #00308f 100%);
      box-shadow: 0 22px 48px rgba(0,10,35,.45);
    }

    .btn-primary::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.45), transparent 80%);
      transform: translateX(-100%);
      transition: .7s ease;
    }

    .btn-primary:hover::before {
      transform: translateX(100%);
    }

    .btn-primary:hover,
    .btn-light:hover,
    .btn-red:hover {
      transform: translateY(-4px) scale(1.03);
      filter: brightness(1.08);
      box-shadow: 0 30px 65px rgba(0,10,35,.55);
    }

    .btn-light {
      color: #fff;
      background: linear-gradient(135deg, #00143d 0%, #00235f 45%, #00308f 100%);
      border: 1px solid rgba(255,255,255,.08);
    }

    .btn-red {
      color: #fff;
      background: linear-gradient(135deg, #00143d 0%, #00235f 45%, #00308f 100%);
      box-shadow: 0 22px 48px rgba(0,10,35,.45);
    }

    .hero {
      padding: 34px 0 46px;
      overflow: hidden;
      position: relative;
      min-height: calc(100vh - 74px);
      display: flex;
      align-items: center;
    }

    .hero::before {
      content: "";
      position: absolute;
      width: 780px;
      height: 780px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,102,255,.22), transparent 65%);
      top: -260px;
      right: -120px;
      animation: rotateGlow 18s linear infinite;
      filter: blur(10px);
    }

    .hero::after {
      content: "";
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,214,255,.20), transparent 65%);
      bottom: -180px;
      left: -100px;
      filter: blur(16px);
      animation: pulseGlow 7s ease-in-out infinite alternate;
    }

    @keyframes pulseGlow {
      from { transform: scale(.9); opacity: .7; }
      to { transform: scale(1.1); opacity: 1; }
    }

    @keyframes rotateGlow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .hero-copy {
      position: relative;
      z-index: 3;
      max-width: 640px;
    }

    .hero-copy .badge {
      width: fit-content;
    }

    .hero-copy .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
    }

    .hero-copy .deal-timer {
      max-width: 420px;
    }

    .hero-copy .trust-row {
      margin-top: 22px;
      max-width: 520px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
      gap: 74px;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .ticker-wrap {
      width: 100%;
      overflow: hidden;
      border-radius: 999px;
      background: linear-gradient(135deg, #00143d 0%, #00235f 45%, #00308f 100%);
      color: #fff;
      padding: 12px 0;
      margin-bottom: 16px;
      box-shadow: 0 18px 40px rgba(0,31,107,.18);
    }

    .ticker-track {
      display: inline-block;
      white-space: nowrap;
      padding-left: 100%;
      font-weight: 900;
      letter-spacing: .4px;
      animation: tickerMove 24s linear infinite;
    }

    @keyframes tickerMove {
      from { transform: translateX(0); }
      to { transform: translateX(-100%); }
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      border: 1px solid var(--line);
      color: var(--blue-dark);
      padding: 9px 14px;
      border-radius: 999px;
      font-weight: 900;
      font-size: 14px;
      box-shadow: 0 10px 30px rgba(15,23,42,.06);
    }

    .hero h1 {
      font-weight: 900;
      background: linear-gradient(135deg, #00143d 0%, #0059ff 45%, #00b7ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 18px 0 14px;
      font-size: clamp(42px, 4.15vw, 68px);
      line-height: .98;
      letter-spacing: -2.4px;
      max-width: 980px;
    }

    .hero h1 span {
      background: linear-gradient(135deg, #0066ff 0%, #00d4ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
    }

    .hero p {
      font-weight: 500;
      color: #334155;
      font-size: 18px;
      line-height: 1.65;
      margin: 0 0 22px;
      max-width: 100%;
    }

    .countdown-box {
      margin: 0 0 24px;
      background: rgba(255,255,255,.82);
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 18px;
      max-width: 430px;
      box-shadow: 0 20px 45px rgba(15,23,42,.08);
    }

    .countdown-title {
      font-size: 13px;
      font-weight: 900;
      color: var(--blue-dark);
      margin-bottom: 12px;
      letter-spacing: .6px;
    }

    .countdown {
      display: flex;
      gap: 12px;
    }

    .time-box {
      flex: 1;
      background: linear-gradient(135deg, #00143d 0%, #00235f 45%, #00308f 100%);
      color: #fff;
      border-radius: 18px;
      padding: 12px;
      text-align: center;
      box-shadow: 0 16px 35px rgba(0,31,107,.24);
    }

    .time-box strong {
      display: block;
      font-size: 28px;
      line-height: 1;
      margin-bottom: 4px;
    }

    .time-box span {
      font-size: 12px;
      font-weight: 800;
      opacity: .86;
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 24px;
    }

    .trust-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      max-width: 640px;
    }

    .trust-card {
      background: rgba(255,255,255,.86);
      border: 1px solid var(--line);
      padding: 16px;
      border-radius: 20px;
      box-shadow: 0 12px 30px rgba(15,23,42,.06);
    }

    .trust-card strong {
      display: block;
      font-size: 22px;
      color: var(--blue-dark);
      margin-bottom: 3px;
    }

    .trust-card small {
      color: var(--muted);
      font-weight: 700;
    }

    .phone-stage {
      position: relative;
      min-height: 500px;
      display: grid;
      place-items: center;
      align-self: center;
    }

    .hero-banner {
      width: 100%;
      max-width: 580px;
      justify-self: center;
      align-self: center;
      position: relative;
      z-index: 3;
      border-radius: 32px;
      overflow: hidden;
      box-shadow: 0 28px 75px rgba(0, 20, 61, .18);
      background: rgba(255,255,255,.45);
      border: 1px solid rgba(255,255,255,.65);
    }

    .hero-banner img {
      width: 100%;
      min-height: 420px;
      height: 100%;
      object-fit: cover;
      display: block;
      object-fit: contain;
      border-radius: 32px;
    }

    .hero-banner:hover img {
      transform: scale(1.015);
    }

    .hero-banner img {
      transition: .35s ease;
    }

    @keyframes float {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }

    .section { padding: 54px 0; }

    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 24px;
    }

    .section-title {
      font-weight: 900;
      margin: 0;
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1;
      letter-spacing: -1.5px;
    }

    .section-desc {
      color: var(--muted);
      max-width: 500px;
      line-height: 1.6;
      font-weight: 600;
      margin: 0;
    }

    .product-tools {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 0 0 18px;
    }

    .filter-btn {
      border: 1px solid var(--line);
      background: #fff;
      color: var(--blue-dark);
      border-radius: 999px;
      padding: 10px 14px;
      font-weight: 900;
      cursor: pointer;
      transition: .2s ease;
    }

    .filter-btn.active,
    .filter-btn:hover {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue);
    }

    .deals {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .deal-card {
      background: rgba(255,255,255,.95);
      backdrop-filter: blur(16px);
      animation: fadeUp .7s ease both;
      background: rgba(255,255,255,.92);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 20px 55px rgba(0,20,61,.10);
      transition: .28s ease;
      position: relative;
    }

    .deal-card:hover {
      border-color: rgba(0,102,255,.35);
      transform: translateY(-10px) scale(1.02) rotateX(1deg);
      box-shadow: 0 40px 90px rgba(0,102,255,.22);
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(40px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .deal-img{
      height: 280px;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      padding: 0;
      border-radius: 26px 26px 0 0;
    }

    .product-img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      background: #ffffff;
      transition: .35s ease;
    }

    .deal-card:hover .product-img{
      transform: scale(1.03);
    }

    .deal-body{
      padding: 20px;
      background: linear-gradient(
        180deg,
        #eef4ff 0%,
        #ffffff 100%
      );
    }
    .deal-body{
      background:
        linear-gradient(
          180deg,
          #eef4ff 0%,
          #ffffff 100%
        );
    }

    .deal-img::after {
      content: "";
      position: absolute;
      width: 150px;
      height: 28px;
      border-radius: 50%;
      background: rgba(15,23,42,.12);
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      filter: blur(10px);
    }

    .deal-card:hover .product-img{
      transform:translateY(-8px) scale(1.05);
    }
    .product-real {
      display: block;
    }
    .label-sale{
      background:
        linear-gradient(135deg,#0066ff,#00a6ff);
    }
    .accessory-mock {
      width: 120px;
      height: 120px;
      border-radius: 32px;
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg, #00143d, #00308f);
      color: #fff;
      font-size: 48px;
      position: relative;
      z-index: 2;
      box-shadow: 24px 18px 45px rgba(15,23,42,.24);
      animation: levitate 4s ease-in-out infinite;
    }

    @keyframes levitate {
      0%,100% { transform: translateY(0px) rotate(-2deg); }
      50% { transform: translateY(-12px) rotate(2deg); }
    }

    .deal-card:hover .product-img {
      transform: translateY(-8px) scale(1.06);
      filter: drop-shadow(0 30px 35px rgba(15,23,42,.30));
    }

    .no-img {
      width: 150px;
      height: 150px;
      border-radius: 28px;
      display: none;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 16px;
      background: #fff;
      color: var(--blue-dark);
      font-weight: 900;
      position: relative;
      z-index: 2;
      box-shadow: 0 18px 40px rgba(15,23,42,.12);
    }

    .label-sale {
      position: absolute;
      top: 14px;
      left: 14px;
      background: var(--red);
      color: #fff;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      z-index: 4;
    }
    .deal-body h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.4px; line-height: 1.25; min-height: 46px; }
    .deal-body p { margin: 0 0 14px; color: var(--muted); line-height: 1.5; font-weight: 600; }

    .price {
      font-size: 22px;
      font-weight: 900;
      color: var(--blue);
      margin-bottom: 6px;
    }

    .old-price {
      color: #94a3b8;
      text-decoration: line-through;
      font-weight: 700;
      margin-bottom: 16px;
      min-height: 18px;
    }

    .deal-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin: 0 0 12px;
    }

    .chip {
      padding: 6px 9px;
      border-radius: 999px;
      background: var(--blue-soft);
      color: var(--blue-dark);
      font-size: 12px;
      font-weight: 900;
    }

    .trade-table-wrap {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 28px;
      overflow: hidden;
      box-shadow: 0 20px 55px rgba(0,20,61,.10);
    }

    .trade-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 720px;
    }

    .trade-table th,
    .trade-table td {
      padding: 16px 18px;
      text-align: left;
      border-bottom: 1px solid #eef4ff;
      font-weight: 800;
    }

    .trade-table th {
      background: linear-gradient(135deg, #00143d 0%, #00235f 45%, #00308f 100%);
      color: #fff;
      font-size: 14px;
    }

    .trade-table td {
      color: #334155;
    }

    .trade-price {
      color: var(--blue) !important;
      font-weight: 900 !important;
      white-space: nowrap;
    }

    .trade-note {
      margin-top: 12px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.6;
    }

    .finance-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .finance-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 26px;
      padding: 24px;
      box-shadow: 0 20px 55px rgba(0,20,61,.10);
      transition: .3s ease;
      position: relative;
      overflow: hidden;
    }

    .finance-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 35px 80px rgba(0,102,255,.18);
    }

    .finance-card strong {
      display: block;
      font-size: 28px;
      color: var(--blue-dark);
      margin-bottom: 8px;
    }

    .finance-card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
      font-weight: 700;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .feature {
      transition: .35s ease;
      position: relative;
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: 0 14px 36px rgba(15,23,42,.07);
    }

    .icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: var(--blue-soft);
      color: var(--blue);
      font-size: 24px;
      margin-bottom: 14px;
    }

    .feature:hover {
      transform: translateY(-8px);
      box-shadow: 0 28px 60px rgba(0,31,107,.16);
    }

    .feature::before {
      content: "";
      position: absolute;
      inset: auto -40px -40px auto;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: rgba(0,71,214,.08);
    }

    .feature h3 { margin: 0 0 8px; font-size: 20px; }
    .feature p { margin: 0; color: var(--muted); line-height: 1.55; font-weight: 600; }

    .lead-zone {
      background: linear-gradient(135deg, var(--blue-dark), var(--blue));
      border-radius: 36px;
      padding: 34px;
      color: #fff;
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 30px;
      align-items: center;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }

    .lead-zone::before {
      content: "";
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: rgba(255,255,255,.13);
      right: -140px;
      top: -140px;
    }

    .lead-copy { position: relative; z-index: 1; }
    .lead-copy h2 { margin: 0 0 12px; font-size: clamp(32px, 4vw, 52px); line-height: 1; letter-spacing: -1.7px; }
    .lead-copy p { margin: 0 0 18px; color: rgba(255,255,255,.82); line-height: 1.6; font-size: 17px; }

    .mini-list {
      display: grid;
      gap: 10px;
      font-weight: 800;
    }

    .lead-form {
      position: relative;
      z-index: 1;
      background: #fff;
      padding: 24px;
      border-radius: 28px;
      color: var(--text);
      box-shadow: 0 24px 60px rgba(0,0,0,.16);
    }

    .form-grid { display: grid; gap: 12px; }

    .smart-choices {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .smart-btn {
      border: 1px solid var(--line);
      background: #f3f7ff;
      color: var(--blue-dark);
      border-radius: 999px;
      padding: 10px 14px;
      font-weight: 900;
      cursor: pointer;
      transition: .25s ease;
    }

    .smart-btn:hover,
    .smart-btn.active {
      background: linear-gradient(135deg, #00143d 0%, #00235f 45%, #00308f 100%);
      color: #fff;
      border-color: transparent;
      transform: translateY(-2px);
    }

    .input, .select, .textarea {
      width: 100%;
      border: 1px solid #dbe7ff;
      background: #f8fbff;
      border-radius: 16px;
      padding: 15px 16px;
      font-size: 15px;
      outline: none;
      transition: .2s ease;
      font-family: inherit;
    }

    .input:focus, .select:focus, .textarea:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(0,87,255,.1);
      background: #fff;
    }

    .textarea { min-height: 90px; resize: vertical; }

    .form-note {
      color: var(--muted);
      font-size: 13px;
      margin: 12px 0 0;
      line-height: 1.5;
      font-weight: 600;
    }

    .testimonials {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .quote {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 22px;
      box-shadow: 0 16px 40px rgba(15,23,42,.07);
    }

    .stars { color: var(--orange); font-size: 20px; margin-bottom: 12px; }
    .quote p { margin: 0 0 14px; color: #334155; line-height: 1.6; font-weight: 600; }
    .quote strong { color: var(--blue-dark); }

    .faq {
      display: grid;
      gap: 12px;
    }

    details {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 18px 20px;
      box-shadow: 0 10px 28px rgba(15,23,42,.05);
    }

    summary {
      cursor: pointer;
      font-size: 17px;
      font-weight: 900;
      color: var(--blue-dark);
    }

    details p {
      margin: 12px 0 0;
      color: var(--muted);
      line-height: 1.6;
      font-weight: 600;
    }

    .footer {
      padding: 36px 0 110px;
      color: #475569;
      text-align: center;
      font-weight: 700;
    }

    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 4px;
      width: 0%;
      z-index: 999;
      background: linear-gradient(90deg, #00143d, #0059ff, #00d4ff);
      box-shadow: 0 0 18px rgba(0,102,255,.7);
      transition: width .08s linear;
    }

    .cursor-glow {
      position: fixed;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      background: radial-gradient(circle, rgba(0,102,255,.13), transparent 65%);
      transform: translate(-50%, -50%);
      mix-blend-mode: multiply;
      opacity: 0;
      transition: opacity .25s ease;
    }

    .reveal {
      opacity: 0;
      transform: translateY(36px) scale(.98);
      transition: .75s cubic-bezier(.2,.8,.2,1);
    }

    .reveal.show,
    .section.show {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .section.show {
      opacity: 1 !important;
      transform: none !important;
    }

    .tilt-card {
      transform-style: preserve-3d;
      will-change: transform;
    }

    .particles {
      position: fixed;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: -1;
    }

    .particle {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(0,102,255,.18);
      animation: floatParticle linear infinite;
    }

    @keyframes floatParticle {
      from {
        transform: translateY(100vh) scale(0.6);
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      to {
        transform: translateY(-120px) scale(1.3);
        opacity: 0;
      }
    }

    .floating-blur {
      position: fixed;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,71,214,.12), transparent 70%);
      filter: blur(10px);
      z-index: -1;
      animation: moveBlur 18s infinite alternate ease-in-out;
    }

    .blur-1 {
      top: 10%;
      left: -100px;
    }

    .blur-2 {
      bottom: 10%;
      right: -100px;
      animation-delay: 3s;
    }

    @keyframes moveBlur {
      from { transform: translateY(0px) translateX(0px); }
      to { transform: translateY(80px) translateX(40px); }
    }

    .sticky-cta {
      position: fixed;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%);
      z-index: 80;
      width: min(720px, calc(100% - 24px));
      background: rgba(255,255,255,.9);
      backdrop-filter: blur(18px);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 10px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      box-shadow: 0 20px 55px rgba(15,23,42,.18);
    }

    .popup {
      position: fixed;
      inset: 0;
      background: rgba(2,6,23,.58);
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
    }

    .popup.active { display: flex; }

    .popup-box {
      width: min(500px, 100%);
      background: #fff;
      border-radius: 32px;
      padding: 26px;
      box-shadow: 0 30px 90px rgba(0,0,0,.3);
      position: relative;
      animation: pop .25s ease;
    }

    @keyframes pop {
      from { opacity: 0; transform: translateY(16px) scale(.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .close {
      position: absolute;
      right: 16px;
      top: 16px;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: #f8fbff;
      cursor: pointer;
      font-size: 22px;
    }

    .popup-box h2 { margin: 8px 0 10px; font-size: 32px; letter-spacing: -1px; }
    .popup-box p { color: var(--muted); line-height: 1.55; font-weight: 600; margin: 0 0 18px; }

    .success-toast {
      position: fixed;
      top: 92px;
      right: 16px;
      z-index: 120;
      background: #0f172a;
      color: #fff;
      border-radius: 18px;
      padding: 14px 16px;
      box-shadow: 0 20px 50px rgba(15,23,42,.25);
      display: none;
      font-weight: 800;
      max-width: 330px;
      line-height: 1.45;
    }

    .hero-banner-wrap {
      position: relative;
      width: 100%;
      max-width: 920px;
      min-height: 560px;
      display: flex;
      align-items: center;
      justify-content: center;
      justify-self: center;
      isolation: isolate;
    }

    .hero-banner-wrap::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 36px;
      background: radial-gradient(circle, rgba(0,102,255,.16), transparent 72%);
      filter: blur(20px);
      z-index: 0;
    }

    .hero-banner {
      position: relative;
      border-radius: 30px;
      overflow: hidden;
      background: rgba(255,255,255,.55);
      border: 1px solid rgba(255,255,255,.72);
      box-shadow: 0 30px 80px rgba(0,20,61,.18);
      transition: transform .45s ease, box-shadow .45s ease;
      will-change: transform;
    }

    .hero-banner img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      border-radius: 30px;
    }

    .main-banner {
      position: relative;
      width: 112%;
      z-index: 2;
      transform: none;
    }

    

    .main-banner:hover {
      transform: translateY(-4px) scale(1.01);
      box-shadow: 0 38px 95px rgba(0,20,61,.22);
    }

    

    .success-toast.active { display: block; }

    @media (max-width: 980px) {
      .nav-links { display: none; }
      .hero {
        min-height: auto;
        padding: 30px 0 42px;
      }
      .hero-grid,
      .lead-zone {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .hero-copy {
        max-width: 100%;
      }
      .hero-banner-wrap {
        min-height: 410px;
        max-width: 640px;
        width: 100%;
        justify-self: center;
        margin: 0 auto;
      }
      .main-banner {
        width: 94%;
        top: 24px;
        left: 3%;
        right: auto;
      }
      .sub-banner {
        width: 74%;
        top: 210px;
        right: 3%;
      }
      .phone-stage { min-height: 430px; }
      .screen { min-height: 390px; }
      .iphone-title { margin-top: 130px; }
      .deals { grid-template-columns: repeat(2, 1fr); }
      .features, .testimonials, .finance-grid { grid-template-columns: repeat(2, 1fr); }
      .section-head { align-items: flex-start; flex-direction: column; }
    }

    @media (max-width: 640px) {
      .container { width: min(100% - 22px, 1180px); }
      .nav { height: 64px; }
      .brand { font-size: 18px; }
      .logo { width: 36px; height: 36px; border-radius: 12px; }
      .nav-actions { gap: 6px; }
      .nav-actions .btn-light { display: none; }
      .nav-actions .btn-primary { padding: 10px 13px; font-size: 13px; }

      .hero {
        padding: 24px 0 28px;
        align-items: flex-start;
      }
      .hero-grid {
        gap: 18px;
      }
      .ticker-wrap {
        padding: 9px 0;
        margin-bottom: 12px;
        border-radius: 18px;
      }
      .ticker-track {
        font-size: 12px;
        animation-duration: 18s;
      }
      .badge {
        font-size: 12px;
        padding: 8px 11px;
      }
      .hero h1 {
        letter-spacing: -1.2px;
        font-size: clamp(36px, 12vw, 48px);
        line-height: 1.02;
        margin: 14px 0 12px;
      }
      .hero p {
        font-size: 15px;
        line-height: 1.55;
        margin-bottom: 18px;
      }
      .countdown-box {
        max-width: 100%;
        padding: 14px;
        border-radius: 20px;
        margin-bottom: 18px;
      }
      .countdown {
        gap: 8px;
      }
      .time-box {
        padding: 10px 8px;
        border-radius: 15px;
      }
      .time-box strong {
        font-size: 24px;
      }
      .hero-actions {
        gap: 9px;
        margin-bottom: 16px;
      }
      .hero-actions .btn {
        width: 100%;
        padding: 13px 14px;
      }
      .trust-row {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
      }
      .trust-card {
        padding: 11px 9px;
        border-radius: 16px;
      }
      .trust-card strong {
        font-size: 17px;
      }
      .trust-card small {
        font-size: 11px;
        line-height: 1.25;
      }

      .hero-banner-wrap {
        min-height: auto;
        max-width: 100%;
        display: grid;
        gap: 12px;
        margin-top: 6px;
      }
      .hero-banner-wrap::before {
        display: none;
      }
      .hero-banner {
        position: relative;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        border-radius: 20px;
      }
      .hero-banner img {
        border-radius: 20px;
      }
      .sub-banner {
        display: block;
      }

      .section { padding: 38px 0; }
      .section-title { font-size: clamp(28px, 9vw, 38px); }
      .section-desc { font-size: 14px; }
      .product-tools {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
      }
      .product-tools::-webkit-scrollbar { display: none; }
      .filter-btn {
        flex: 0 0 auto;
        padding: 9px 13px;
        font-size: 13px;
      }
      .deals,
      .features,
      .testimonials,
      .finance-grid {
        grid-template-columns: 1fr;
      }
      .product-img {
        max-width: 210px;
        max-height: 180px;
      }
      .trade-table-wrap { overflow-x: auto; }
      .lead-zone {
        padding: 20px;
        border-radius: 24px;
      }
      .lead-form {
        padding: 16px;
        border-radius: 20px;
      }
      .sticky-cta {
        width: calc(100% - 18px);
        grid-template-columns: 1fr 1fr 1fr;
        gap: 5px;
        padding: 7px;
        border-radius: 20px;
        bottom: 10px;
      }
      .sticky-cta .btn {
        padding: 10px 8px;
        font-size: 12px;
      }
      .footer { padding-bottom: 120px; }
    }
  
    /* ===== FIX MOBILE FINAL ===== */
    @media (max-width: 640px) {
      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      .container {
        width: calc(100% - 28px);
        max-width: 100%;
      }

      .topbar {
        overflow: hidden;
      }

      .nav {
        height: 62px;
        gap: 8px;
      }

      .brand {
        min-width: 0;
        gap: 8px;
        font-size: 18px;
      }

      .brand span:last-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .logo {
        flex: 0 0 38px;
      }

      .nav-actions .btn-primary {
        flex: 0 0 auto;
        padding: 11px 15px;
        font-size: 14px;
      }

      .hero {
        padding: 18px 0 28px;
        overflow: hidden;
      }

      .hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px;
      }

      .hero-copy {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
      }

      .ticker-wrap {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
      }

      .ticker-track {
        font-size: 12px;
        line-height: 1;
        padding-left: 40%;
      }

      .badge {
        max-width: 100%;
        font-size: 12px;
        line-height: 1.25;
        white-space: normal;
      }

      .hero h1 {
        max-width: 100%;
        font-size: clamp(34px, 10.5vw, 43px) !important;
        line-height: 1.04;
        letter-spacing: -1.4px;
        overflow-wrap: anywhere;
      }

      .hero p {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.58;
      }

      .countdown-box {
        width: 100%;
        max-width: 100%;
      }

      .time-box strong {
        font-size: 25px;
      }

      .btn {
        white-space: normal;
        text-align: center;
      }

      .hero-actions {
        width: 100%;
      }

      .hero-actions .btn {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        font-size: 14px;
        padding: 13px 12px;
      }

      .trust-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .hero-banner-wrap {
        width: 100%;
        max-width: 100%;
        min-height: auto;
        display: grid;
        gap: 12px;
        overflow: hidden;
      }

      .hero-banner {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
      }

      .sub-banner {
        width: 100% !important;
      }

      .sticky-cta {
        width: calc(100% - 20px) !important;
        left: 10px;
        right: 10px;
        transform: none;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        border-radius: 18px;
        padding: 6px;
        gap: 5px;
      }

      .sticky-cta .btn {
        min-width: 0;
        padding: 10px 5px;
        font-size: 12px;
        border-radius: 14px;
      }
    }


    /* ===== PATCH HERO BỐ CỤC GỌN HƠN - GIỮ NGUYÊN PHẦN DƯỚI ===== */
    .hero.hero-fixed-layout {
      padding: 22px 0 46px;
      min-height: auto;
      display: block;
    }

    .hero.hero-fixed-layout .hero-grid {
      grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
      gap: 46px;
      align-items: center;
    }

    .hero.hero-fixed-layout .ticker-wrap {
      margin-bottom: 22px;
      position: relative;
      z-index: 4;
    }

    .hero.hero-fixed-layout .hero-copy {
      max-width: 620px;
    }

    .hero.hero-fixed-layout .hero h1,
    .hero.hero-fixed-layout h1 {
      font-size: clamp(42px, 4.8vw, 70px);
      line-height: .98;
      letter-spacing: -2.5px;
      max-width: 720px;
    }

    .hero.hero-fixed-layout .hero-banner-wrap {
      min-height: 510px;
      max-width: 760px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      justify-self: center;
      position: relative;
      isolation: isolate;
    }

    .hero.hero-fixed-layout .hero-banner-wrap::before {
      content: "";
      position: absolute;
      width: 560px;
      height: 560px;
      inset: auto;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,102,255,.18), transparent 65%);
      filter: blur(16px);
      z-index: 0;
    }

    .hero.hero-fixed-layout .hero-banner {
      width: 100%;
      max-width: 680px;
      position: relative;
      z-index: 2;
      border-radius: 32px;
      overflow: hidden;
      background: rgba(255,255,255,.65);
      border: 1px solid rgba(255,255,255,.8);
      box-shadow: 0 32px 90px rgba(0,20,61,.18);
      transform: translateX(10px);
    }

    .hero.hero-fixed-layout .hero-banner img {
      width: 100%;
      height: auto;
      min-height: unset;
      display: block;
      object-fit: contain;
      border-radius: 32px;
    }

    .hero.hero-fixed-layout .trust-row {
      margin-top: 0;
      max-width: 560px;
    }

    @media (max-width: 980px) {
      .hero.hero-fixed-layout .hero-grid {
        grid-template-columns: 1fr;
        gap: 26px;
      }

      .hero.hero-fixed-layout .hero-copy {
        max-width: 100%;
      }

      .hero.hero-fixed-layout .hero-banner-wrap {
        min-height: auto;
        max-width: 720px;
      }

      .hero.hero-fixed-layout .hero-banner {
        transform: none;
      }
    }

    @media (max-width: 640px) {
      .hero.hero-fixed-layout {
        padding: 18px 0 30px;
      }

      .hero.hero-fixed-layout h1 {
        font-size: clamp(36px, 11vw, 46px) !important;
        letter-spacing: -1.4px;
      }

      .hero.hero-fixed-layout p {
        font-size: 15px;
      }

      .hero.hero-fixed-layout .hero-banner {
        border-radius: 22px;
      }

      .hero.hero-fixed-layout .hero-banner img {
        border-radius: 22px;
      }

      .hero.hero-fixed-layout .hero-actions .btn {
        width: 100%;
      }

      .hero.hero-fixed-layout .trust-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
    }
    /* ===== PRODUCT CARD FINAL POPO ===== */

#san-pham{
  position: relative;
}

#san-pham::before{
  content:"";
  position:absolute;
  inset:30px 0 auto 0;
  height:420px;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,102,255,.13), transparent 32%),
    radial-gradient(circle at 80% 10%, rgba(0,214,255,.12), transparent 28%);
  pointer-events:none;
  z-index:-1;
}

.deal-card{
  background: linear-gradient(180deg,#ffffff 0%,#f3f8ff 100%) !important;
  border: 1px solid rgba(219,231,255,.95) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  box-shadow: 0 22px 60px rgba(0,20,61,.12) !important;
}

.deal-img{
  height: 280px !important;
  background:
    radial-gradient(circle at 50% 45%, #ffffff 0%, #ffffff 45%, #eef5ff 100%) !important;
  padding: 0 !important;
  border-radius: 30px 30px 0 0 !important;
}

.deal-img::after{
  display:none !important;
}

.product-img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#ffffff !important;
  filter:none !important;
}

.deal-body{
  padding: 22px !important;
  background:
    linear-gradient(180deg,#eef5ff 0%,#ffffff 78%) !important;
}

.label-sale{
  background: linear-gradient(135deg,#0066ff,#00a6ff) !important;
  box-shadow: 0 12px 24px rgba(0,102,255,.24) !important;
}

.chip{
  background:#eaf1ff !important;
  color:#00143d !important;
}

.price{
  color:#0066ff !important;
  font-size:24px !important;
}

.deal-card:hover .product-img{
  transform:scale(1.035) !important;
}

@media(max-width:640px){
  .deal-img{
    height: 260px !important;
  }
}
@media (max-width: 768px) {

  .nav {
    height: auto;
    padding: 12px 0;
    flex-wrap: wrap;
    gap: 12px;
  }

  .brand {
    width: 100%;
    justify-content: center;
    font-size: 22px;
  }

  .nav-links {
    width: 100%;

    display: flex;
    gap: 14px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 2px 0 6px;

    scrollbar-width: none;

    order: 3;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .nav-links a {
    flex: 0 0 auto;

    padding: 10px 14px;

    border-radius: 999px;

    background: #f1f5ff;

    font-size: 14px;
    font-weight: 800;

    white-space: nowrap;
  }

  .nav-actions {
    width: 100%;
    justify-content: center;
    gap: 10px;
  }

  .nav-actions .btn {
    padding: 11px 14px;
    font-size: 13px;
  }

}
  
/* ===== POPO MOBILE NAV + TICKER FINAL FIX ===== */
@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .container {
    width: calc(100% - 18px) !important;
    max-width: 100% !important;
  }

  .topbar {
    overflow: visible !important;
  }

  .nav {
    height: auto !important;
    min-height: unset !important;
    padding: 12px 0 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .brand {
    width: 100% !important;
    justify-content: center !important;
    font-size: 22px !important;
    order: 1 !important;
  }

  .nav-actions {
    width: 100% !important;
    justify-content: center !important;
    order: 2 !important;
  }

  .nav-actions .btn-light {
    display: none !important;
  }

  .nav-actions .btn-primary {
    padding: 11px 18px !important;
    font-size: 14px !important;
  }

  .nav-links {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 3 !important;
    gap: 10px !important;
    padding: 4px 2px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .nav-links::-webkit-scrollbar {
    display: none !important;
  }

  .nav-links a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    background: #f1f5ff !important;
    color: #334155 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .hero {
    overflow: hidden !important;
  }

  .hero-copy {
    overflow: visible !important;
  }

  .ticker-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .ticker-track {
    white-space: nowrap !important;
    padding-left: 100% !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    animation-duration: 18s !important;
  }
}

@media (max-width: 640px) {
  .hero h1,
  .hero.hero-fixed-layout h1 {
    font-size: clamp(34px, 11vw, 46px) !important;
    line-height: 1.04 !important;
  }

  .sticky-cta {
    width: calc(100% - 18px) !important;
    left: 9px !important;
    right: 9px !important;
    transform: none !important;
  }
}

  @media(max-width:640px){#productGrid .price{font-size:18px !important;line-height:1.45;overflow-wrap:anywhere;}}

.catalog-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:end;margin:18px 0}.catalog-controls label,.variant-label{display:block;font-size:13px;font-weight:700;color:#42516c}.catalog-controls .select{margin-top:6px;width:100%;min-width:0}.product-variant{width:100%;margin:6px 0 14px;min-width:0}.grade-help{margin:12px 0 22px;color:#42516c;line-height:1.6}.grade-help summary{cursor:pointer;font-weight:700}.grade-help p{margin:10px 0}.deal-card[hidden]{display:none!important}#catalog-empty{padding:24px;background:#eef5ff;border-radius:14px}.deal-body{min-width:0}#productGrid .price{font-size:20px!important;line-height:1.5;overflow-wrap:anywhere}@media(max-width:640px){.catalog-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-controls .btn{width:100%}#productGrid .price{font-size:18px!important}.product-variant{font-size:14px;padding:10px 7px}}

/* Hero V5: a single editorial block, with consistent catalog styling. */
body{background:radial-gradient(ellipse at 12% 5%,rgba(68,151,255,.19),transparent 42%),radial-gradient(ellipse at 95% 25%,rgba(107,188,255,.16),transparent 46%),linear-gradient(180deg,#e6f0ff 0%,#eff6ff 55%,#e4efff 100%);background-attachment:fixed}
.particles,.floating-blur,.cursor-glow{display:none!important}
.hero.hero-fixed-layout.hero-showcase{padding:28px 0 0;min-height:0;background:transparent;border:0;isolation:isolate}
.hero-showcase::before,.hero-showcase::after,.hero-showcase .hero-banner-wrap::before{display:none!important}
.hero-showcase .container{position:relative;z-index:2}
.hero.hero-showcase .hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:0;align-items:stretch;background:#071f45;border-radius:24px;overflow:hidden;border:1px solid #e1e6ef}
.hero.hero-showcase .hero-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:38px;max-width:none;text-align:left;animation:none;transform:none;background:linear-gradient(135deg,#071b3b,#0a2d62);width:100%;min-width:0}
.hero-eyebrow{display:flex;align-items:center;gap:9px;font-size:10px;line-height:1.6;font-weight:600;letter-spacing:1.25px;color:#b8cbee;margin:0 0 23px}
.hero-eyebrow>span{width:6px;height:6px;flex-shrink:0;border-radius:50%;background:#70b0ff}
.hero.hero-fixed-layout.hero-showcase h1{font-size:clamp(32px,3.5vw,45px)!important;line-height:1.2!important;letter-spacing:-1.6px;max-width:none;margin:0 0 18px;font-weight:800;background:none;-webkit-text-fill-color:#fff;color:#fff;text-shadow:none;overflow-wrap:normal}
.hero.hero-showcase h1 span{background:none;-webkit-text-fill-color:#85baff;color:#85baff}
.hero.hero-showcase .hero-description{font-size:14px;line-height:1.85;font-weight:400;color:#c0cee2;max-width:390px;margin:0 0 26px}
.hero.hero-showcase .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;width:100%}
.hero.hero-showcase .hero-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 17px;min-height:48px;width:auto;border-radius:10px;font-size:13px;font-weight:700;line-height:1.4;box-shadow:none;letter-spacing:0;white-space:normal;transition:background .2s;transform:none!important}
.hero-showcase .hero-primary{background:#fff!important;color:#0a2d62!important;border:1px solid #fff}
.hero-showcase .hero-primary:hover{background:#e7f0ff!important}
.hero-showcase .hero-secondary{background:transparent!important;color:#fff!important;border:1px solid #6d87ac}
.hero-showcase .hero-secondary:hover{background:#153c70!important}
.hero-showcase svg{width:18px;height:18px;flex-shrink:0}
.hero-reassurance{display:flex;align-items:center;gap:8px;margin-top:21px;color:#a9bdd9;font-size:11px;line-height:1.6}
.hero-check{display:flex;align-items:center;justify-content:center;color:#94c2ff;background:#1c3b65;width:17px;height:17px;border-radius:50%;font-weight:700;font-size:10px}
.hero.hero-fixed-layout.hero-showcase .hero-banner-wrap{min-height:0;width:100%;max-width:none;margin:0;display:flex;align-items:center;background:#deedff;isolation:auto;transform:none;overflow:hidden}
.hero-promo-card{width:100%;padding:0;border:0;background:transparent;border-radius:0;box-shadow:none}
.hero.hero-fixed-layout.hero-showcase .hero-banner{position:relative;inset:auto;margin:0;width:100%;max-width:none;background:transparent;border:0;border-radius:0;box-shadow:none;transform:none!important;animation:none;overflow:hidden}
.hero.hero-fixed-layout.hero-showcase .hero-banner img{display:block;width:100%;height:auto;min-height:0;max-height:none;object-fit:contain;border-radius:0;transform:none!important;filter:none}
.hero-service-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px;padding:0;gap:12px}
.hero-service{display:flex;align-items:center;gap:13px;min-width:0;padding:18px 20px;border:1px solid #e3e8f0;background:#fff;border-radius:12px}
.hero-service>svg{width:25px;height:25px;color:#1264d8}
.hero-service strong{display:block;font-size:13px;color:#162d4e;font-weight:700;line-height:1.5}
.hero-service span{display:block;font-size:11px;color:#748297;margin-top:3px;line-height:1.5}
.hero-showcase a:focus-visible{outline:3px solid #83b8ff;outline-offset:4px}
#san-pham{background:transparent;padding-top:36px}
#san-pham .section-title{font-size:30px;line-height:1.3;letter-spacing:-.9px;color:#102744}
#san-pham #price-note{font-size:13px;line-height:1.75!important;color:#66758a!important;max-width:830px}
#san-pham .product-tools{gap:8px;flex-wrap:wrap;background:none;padding:0}
#san-pham .filter-btn{border-radius:9px;padding:10px 15px;font-size:12px;font-weight:600;background:#fff;border:1px solid #dfe5ef;color:#4e607a;box-shadow:none}
#san-pham .filter-btn.active{background:#0a2d62;color:#fff;border-color:#0a2d62}
#san-pham .filter-btn:hover{background:#e8f0fd;color:#0a2d62}
#san-pham .filter-btn.active:hover{background:#0a2d62;color:#fff}
#san-pham .catalog-controls{padding:16px;background:#fff;border:1px solid #e3e8f0;border-radius:12px;margin:16px 0}
#san-pham .catalog-controls .select{border-radius:8px;background:#f9fafc;font-size:13px;border:1px solid #dce3ed;box-shadow:none}
#san-pham .catalog-controls label{font-size:11px;color:#64748b;letter-spacing:.2px}
#san-pham .catalog-controls .btn{background:#f0f4fa!important;color:#20446f!important;box-shadow:none!important;border-radius:8px;font-size:12px}
#catalog-count{font-size:12px;color:#576a84}
#san-pham .grade-help{font-size:12px;margin-bottom:22px}
#san-pham .deal-card{border:1px solid #e3e8f0;box-shadow:none!important;border-radius:16px;background:#fff}
#san-pham .deal-card .btn-primary{background:#0b3572;border-radius:9px;box-shadow:none!important}
#san-pham .deal-card:hover{box-shadow:0 8px 24px rgba(25,48,84,.07)!important}
@media(min-width:701px){.sticky-cta{display:none!important}}
@media(max-width:980px){.hero.hero-showcase .hero-copy{padding:28px}.hero.hero-fixed-layout.hero-showcase h1{font-size:34px!important;letter-spacing:-1.2px}.hero.hero-showcase .hero-description{font-size:13px;line-height:1.75;margin-bottom:22px}.hero.hero-showcase .hero-actions .btn{font-size:12px;padding:12px 14px}.hero-eyebrow{font-size:9px;letter-spacing:.9px;margin-bottom:18px}.hero-service{padding:16px;gap:10px}.hero-service strong{font-size:12px}.hero-service span{font-size:10px}}
@media(max-width:700px){.hero.hero-fixed-layout.hero-showcase{padding-top:16px}.hero.hero-showcase .hero-grid{grid-template-columns:1fr!important;border-radius:18px}.hero.hero-showcase .hero-copy{padding:27px 24px 28px}.hero.hero-fixed-layout.hero-showcase h1{font-size:clamp(29px,8vw,40px)!important;line-height:1.2!important;letter-spacing:-1.2px;margin-bottom:16px}.hero.hero-showcase .hero-description{font-size:13px;max-width:100%;margin-bottom:20px}.hero.hero-showcase .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hero.hero-showcase .hero-actions .btn{width:100%;font-size:12px;padding:12px 8px;min-height:46px}.hero-reassurance{margin-top:16px;font-size:10px}.hero-service-strip{grid-template-columns:1fr;gap:0;border:1px solid #e3e8f0;border-radius:12px;overflow:hidden;background:#fff;margin-top:12px}.hero-service{padding:13px 16px;border:0;border-radius:0;gap:12px}.hero-service+.hero-service{border-top:1px solid #edf0f5}.hero-service>svg{width:22px;height:22px}.hero-service span{font-size:11px}#san-pham{padding-top:28px}#san-pham .section-title{font-size:26px}#san-pham .product-tools{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}#san-pham .filter-btn{flex-shrink:0;padding:9px 13px}#san-pham .catalog-controls{padding:12px;gap:12px}body{padding-bottom:78px}.sticky-cta{width:100%!important;left:0!important;right:0!important;bottom:0!important;transform:none!important;border-radius:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -2px 14px rgba(20,45,80,.06);border:0;border-top:1px solid #e3e8f0;gap:8px}.sticky-cta .btn{border-radius:8px;background:#0a2d62;box-shadow:none!important;font-size:11px;padding:12px 5px}}
@media(prefers-reduced-motion:reduce){.hero-showcase *{animation:none!important;transition:none!important}}


/* Seasonal decoration: light blue POPO backdrop, restrained motion. */
.festive-heading{height:66px;position:relative;display:flex;align-items:center;margin-bottom:12px;padding:0 4px}
.festive-badge{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.3px;color:#32588a;background:rgba(255,255,255,.65);padding:9px 15px;border:1px solid rgba(255,255,255,.95);border-radius:999px;box-shadow:0 3px 12px rgba(34,96,167,.04)}
.festive-badge>span{color:#076cff;font-size:20px;line-height:1}
.christmas-santa{position:absolute;right:16px;bottom:-7px;width:112px;height:auto;object-fit:contain;pointer-events:none;filter:drop-shadow(0 7px 9px rgba(24,71,130,.14));animation:santa-greet 5s ease-in-out infinite;transform-origin:50% 85%}
@keyframes santa-greet{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
.hero.hero-showcase .hero-grid{border:1px solid rgba(255,255,255,.95);outline:5px solid rgba(255,255,255,.28);border-radius:26px;box-shadow:0 22px 55px -22px rgba(12,73,157,.4),0 3px 14px rgba(26,80,143,.08);position:relative}
.hero.hero-showcase .hero-copy{background:radial-gradient(ellipse at 5% 0%,rgba(59,136,255,.18),transparent 70%),linear-gradient(135deg,#071b3b,#12396e)}
.hero.hero-showcase .hero-banner-wrap{border-left:1px solid rgba(210,230,255,.55)}
.hero.hero-showcase .hero-banner{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.hero.hero-showcase .hero-banner::after{content:'';position:absolute;inset:0;border:1px solid rgba(255,255,255,.24);pointer-events:none;box-shadow:inset 0 0 24px rgba(219,239,255,.12)}
.hero-service{background:rgba(255,255,255,.83);border-color:rgba(255,255,255,.96);box-shadow:0 5px 20px rgba(34,87,157,.04)}
#san-pham .catalog-controls{border-color:rgba(255,255,255,.95);background:rgba(255,255,255,.87);box-shadow:0 6px 22px rgba(34,87,157,.04)}
.christmas-snow{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:30;contain:strict}
.snowflake{position:absolute;left:var(--x);top:-12px;width:var(--size);height:var(--size);border-radius:50%;background:#fff;box-shadow:0 0 3px rgba(171,204,244,.5);opacity:var(--alpha);animation:popo-snowfall var(--duration) var(--delay) linear infinite;pointer-events:none}
@keyframes popo-snowfall{from{transform:translate3d(0,-12px,0)}to{transform:translate3d(var(--drift),calc(100vh + 24px),0)}}
.christmas-toggle{position:fixed;right:16px;bottom:18px;z-index:81;border:1px solid #d1e2fa;border-radius:999px;background:rgba(255,255,255,.96);color:#315b91;box-shadow:0 4px 16px rgba(30,75,135,.09);padding:9px 13px;display:flex;align-items:center;gap:6px;font:600 11px 'Be Vietnam Pro',Arial,sans-serif;cursor:pointer;min-height:36px}
.christmas-toggle:focus-visible{outline:3px solid #0066ff;outline-offset:3px}
html.christmas-off .christmas-snow,html.christmas-off .christmas-santa,html.christmas-off .festive-badge{display:none}
html.christmas-off .festive-heading{visibility:visible}
html.christmas-paused .snowflake,html.christmas-paused .christmas-santa{animation-play-state:paused}
@media(max-width:700px){.festive-heading{height:53px;margin-bottom:10px}.festive-badge{font-size:10px;padding:8px 11px}.christmas-santa{width:86px;right:8px;bottom:-5px}.hero.hero-showcase .hero-grid{border-radius:20px;outline-width:3px}.hero.hero-showcase .hero-banner-wrap{border-left:0;border-top:1px solid rgba(255,255,255,.3)}.snowflake:nth-child(n+17){display:none}.christmas-toggle{right:10px;bottom:calc(80px + env(safe-area-inset-bottom));font-size:10px;padding:8px 11px;min-height:34px}}
@media(prefers-reduced-motion:reduce){.christmas-snow{display:none}.christmas-santa{animation:none}.christmas-toggle{display:none}}


/* Santa and reindeer follow a viewport loop, independently of page scrolling. */
.santa-flight{--flight-width:clamp(260px,25vw,370px);--flight-height:calc(var(--flight-width) * 0.333333);--flight-bottom:30px;position:fixed;inset:0;z-index:31;pointer-events:none;overflow:hidden;contain:strict}
.santa-route{position:absolute;top:0;left:0;width:var(--flight-width);pointer-events:none;animation:santa-orbit 48s linear infinite;will-change:transform}
.santa-facing{width:100%;animation:santa-direction 48s steps(1,end) infinite}
.santa-art{display:block;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 5px 5px rgba(22,60,106,.16));animation:santa-float 2.8s ease-in-out infinite}
@keyframes santa-orbit{
0%{transform:translate3d(calc(0px - var(--flight-width)),24vh,0) rotate(-5deg)}
20%{transform:translate3d(34vw,9vh,0) rotate(-3deg)}
40%{transform:translate3d(calc(100vw - var(--flight-width)),28vh,0) rotate(5deg)}
49%,50%{transform:translate3d(calc(100vw - var(--flight-width)),calc(100vh - var(--flight-bottom) - var(--flight-height)),0) rotate(0deg)}
70%{transform:translate3d(35vw,calc(100vh - var(--flight-bottom) - var(--flight-height)),0) rotate(4deg)}
88%{transform:translate3d(0,49vh,0) rotate(7deg)}
100%{transform:translate3d(calc(0px - var(--flight-width)),24vh,0) rotate(-5deg)}
}
@keyframes santa-direction{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
@keyframes santa-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
html.christmas-off .santa-flight{display:none}
html.christmas-paused .santa-route,html.christmas-paused .santa-facing,html.christmas-paused .santa-art{animation-play-state:paused}
@media(max-width:700px){.santa-flight{--flight-width:210px;--flight-bottom:calc(125px + env(safe-area-inset-bottom))}.santa-route,.santa-facing{animation-duration:40s}.festive-heading{height:35px}}
@media(prefers-reduced-motion:reduce){.santa-flight{display:none}}