:root{
      --bg:#f6fbff;
      --ink:#0b1b3a;
      --muted:#4b5b79;
      --line:rgba(11,27,58,.12);
      --white:#fff;

      --brand:#0b4dbb;
      --brand2:#07a3ff;

      --shadow: 0 18px 45px rgba(11,27,58,.12);
      --shadow2: 0 28px 80px rgba(11,27,58,.20);
      --r:18px;
    }
    *{box-sizing:border-box} 
    body{
      margin:0;
       font-family: "Google Sans", sans-serif;
      color:var(--ink);  
    }
    button{
        font-family: "Google Sans", sans-serif;
    } 
    a{color:inherit; text-decoration:none}
    .container{width:min(1180px, 92vw); margin:0 auto}
 
    .header{
        
      background: rgba(246,251,255,.78);
      backdrop-filter: none;
      border-bottom:1px solid rgba(11,27,58,.10);
    }
    .header-inner{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px;
      padding:12px 0;
    }
    .brand{
      display:flex; align-items:center; gap:12px; 
    }
    a.brand img {
    height: 55px;
}
    .logo{
      width:44px; height:44px; border-radius:16px;
      background: radial-gradient(circle at 30% 30%, rgba(7,163,255,.95), rgba(11,77,187,.95));
      box-shadow: 0 12px 30px rgba(11,77,187,.25);
    }
    .brand b{display:block; font-size:14px; letter-spacing:.2px}
    .brand span{display:block; font-size:12px; color:var(--muted)}
    .nav{
      display:flex; align-items:center; gap:8px;
      flex-wrap:wrap;
    }
    .nav a{
      font-size:14px;
          font-weight: 600;
      color:var(--muted);
      padding:9px 10px;
      border-radius:12px;
      border:1px solid transparent;
      transition:.15s background, .15s border, .15s color;
      user-select:none;
    }
    .nav a:hover{
      background: rgba(7,163,255,.10);
      border-color: rgba(7,163,255,.22);
      color: var(--ink);
    }
    .nav a.active{ 
      color: red;
      font-weight:900;
    }

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:11px 14px;
      border-radius: 14px;
      border:1px solid rgba(11,27,58,.14);
      background: #fff;
      color: var(--ink);
      font-weight:900;
      cursor:pointer;
      box-shadow: 0 10px 26px rgba(11,27,58,.08);
      transition:.15s transform, .15s box-shadow, .15s filter;
      user-select:none;
      white-space:nowrap;
    }
    .btn:hover{transform: translateY(-1px); box-shadow: 0 14px 32px rgba(11,27,58,.12)}
    .btn.primary{
      border:0;
     color: #f6ee32;
    background: #1b8bdb;
      box-shadow: 0 16px 36px rgba(11,77,187,.20);
    }

    .menu-btn{display:none}
    @media (max-width: 980px){
      .nav{display:none}
      .menu-btn{display:inline-flex}
    }

    /* Mobile drawer */
    .drawer-backdrop{
      position:fixed; inset:0;
      background: rgba(0,0,0,.35);
      display:none;
      z-index:80;
    }
    .drawer{
      position:fixed; top:0; right:0;
      height:100%;
      width:min(360px, 92vw);
      background:#fff;
      box-shadow: var(--shadow2);
      border-left:1px solid rgba(11,27,58,.10);
      padding:14px;
      transform: translateX(102%);
      transition:.22s transform cubic-bezier(.2,.9,.2,1);
      z-index:81;
    }
    .drawer .toprow{
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .drawer a{
      display:flex;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid rgba(11,27,58,.10);
      margin-top:10px;
      font-weight:800;
      color: var(--ink);
      background: rgba(7,163,255,.06);
    }
    .drawer a:hover{background: rgba(7,163,255,.10)}
    .xbtn{
      width:42px; height:42px; border-radius:14px;
      border:1px solid rgba(11,27,58,.14);
      background:#fff;
      font-weight:900;
      cursor:pointer;
    }

    /* =========================
       HERO FULL SLIDER (FULL WIDTH)
    ========================= */
    .hero{
      position:relative;
      width:100%;
      height: 60vh;
      overflow:hidden;
      background:#061a3f;
    }

    .hero-track{
      position:absolute; inset:0;
      display:flex;
      will-change: transform;
      transform: translate3d(0,0,0);
      transition: transform 700ms cubic-bezier(.2,.9,.2,1);
    }
    body.is-scrolling .hero-slide .bg{
  animation: none !important;
}
    .hero-slide{
      position:relative;
      min-width:100%;
      height:100%;
      overflow:hidden;
      color:#fff;
    }

    /* background image layer (ken burns) */
    .hero-slide .bg{
      position:absolute; inset:-2%;
      background-size:cover;
      background-position:center;
      transform: scale(1.06); 
      will-change: transform;
    }
    /* Ken Burns only on active slide */
    .hero-slide.is-active .bg{
      animation: kenburns 9s ease-in-out forwards;
    }
    @keyframes kenburns{
      0%{transform: scale(1.06) translate3d(0,0,0)}
      100%{transform: scale(1.14) translate3d(-1.5%, -1%, 0)}
    }

    /* overlays */
    .hero-slide::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(1100px 560px at 15% 25%, rgba(7,163,255,.38), transparent 62%),
        radial-gradient(900px 520px at 85% 15%, rgba(11,77,187,.32), transparent 64%),
        linear-gradient(90deg, rgba(6,13,30,.80), rgba(6,13,30,.22));
      pointer-events:none;
    }
    .hero-slide::after{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(180deg, rgba(6,13,30,.25), rgba(6,13,30,.65));
      pointer-events:none;
    }

    /* content */
    .hero-inner{
      position:relative;
      z-index:2;
      height:100%;
      display:flex;
      align-items:center;
    }
    .hero-content{
      width:min(1180px, 92vw);
      margin:0 auto;
      display:grid;
      grid-template-columns: 1fr;
      gap:18px;
      align-items:center;
    }
    @media (max-width: 980px){
      .hero{height: 60vh}
      .hero-content{grid-template-columns:1fr}
    }

    .hero-copy{
      max-width: 1000px;
      transform: translateY(8px);
      opacity:0;
    }
    .hero-slide.is-active .hero-copy{
      animation: popin 650ms cubic-bezier(.2,.9,.2,1) 120ms forwards;
    }
    @keyframes popin{
      to{opacity:1; transform: translateY(0)}
    }

    .kicker{
      display:inline-flex;
      gap:8px;
      align-items:center;
      font-size:12px;
      padding:8px 10px;
      border-radius:999px;
      background: rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.22);
      backdrop-filter: blur(8px);
      user-select:none;
    }
    .hero h1{
      margin:10px 0 10px;
      font-size: clamp(28px, 2.4vw, 50px);
      line-height:1.10;
      letter-spacing:-.6px;
    }
    .hero p{
      margin:0 0 16px;
      font-size:14px;
      line-height:1.65;
      color: rgba(255,255,255,.92);
      max-width: 70ch;
    }
    .hero-actions{
      display:flex; gap:10px; flex-wrap:wrap;
      margin-top:10px;
    }
    .btn.ghost{
      background: rgba(255,255,255,.12);
      color:#fff;
      border:1px solid rgba(255,255,255,.22);
      box-shadow:none;
    }
    .btn.ghost:hover{filter: brightness(1.08); transform: translateY(-1px)}

    /* hero right card */
    .hero-card{
      background: rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(10px);
      border-radius: 22px;
      padding:14px;
      box-shadow: 0 18px 60px rgba(0,0,0,.25);
      opacity:0;
      transform: translateY(10px);
    }
    .hero-slide.is-active .hero-card{
      animation: popin 650ms cubic-bezier(.2,.9,.2,1) 200ms forwards;
    }
    .hero-card b{display:block; font-size:14px}
    .hero-card .small{color: rgba(255,255,255,.86); font-size:12px; line-height:1.6; margin-top:6px}
    .hero-form{
      margin-top:10px;
      display:grid;
      gap:10px;
    }
    .hero-form input,.hero-form select{
      width:100%;
      padding:11px 12px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.10);
      color:#fff;
      outline:none;
      font-size:14px;
    }
    .hero-form input::placeholder{color: rgba(255,255,255,.72)}
    .hero-form input:focus,.hero-form select:focus{
      border-color: rgba(255,255,255,.45);
      box-shadow: 0 0 0 4px rgba(7,163,255,.18);
    }
    .hero-form select option{color:#0b1b3a}

    /* hero controls */
    .hero-controls{
      position:absolute; left:0; right:0; bottom:22px;
      z-index:3;
    }
    .hero-controls-inner{
      width:min(1180px, 92vw);
      margin:0 auto;
      display:flex; align-items:center; justify-content:space-between;
      gap:12px;
    }
    .dots{
      display:flex; gap:10px; align-items:center;
    }
    .dot{
      width:9px; height:9px;
      border-radius:999px;
      background: rgba(255,255,255,.45);
      border:1px solid rgba(255,255,255,.45);
      cursor:pointer;
      transition:.18s transform, .18s background;
    }
    .dot.active{
      background:#fff;
      transform: scale(1.3);
    }
    .arrows{display:flex; gap:10px}
    .arrow{
      width:44px; height:44px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.14);
      backdrop-filter: blur(8px);
      color:#fff;
      cursor:pointer;
      font-weight:1000;
      transition:.15s filter, .15s transform;
      user-select:none;
    }
    .arrow:hover{filter: brightness(1.08); transform: translateY(-1px)}

    /* progress bar */
    .progress{
      position:absolute; left:0; right:0; bottom:0;
      height:3px;
      background: rgba(255,255,255,.14);
      z-index:4;
    }
    .progress > i{
      display:block; height:100%;
      width:0%;
      background: linear-gradient(90deg, rgba(7,163,255,.95), rgba(255,255,255,.95));
      border-radius: 0 999px 999px 0;
    }

    /* =========================
       SECTIONS
    ========================= */
    .section{padding: 22px 0}
    .section-head{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }
    .section-head h2{margin:0; font-size:18px}
    .section-head p{margin:0; color:var(--muted); font-size:13px; line-height:1.6; max-width:70ch}

    /* =========================
       GOI DICH VU (3 BOX)
    ========================= */
    .grid3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:14px;
    }
    @media (max-width: 980px){
      .grid3{grid-template-columns:1fr}
    }
    .pkg{
      border-radius: 22px;
      overflow:hidden;
      background:#fff;
      border:1px solid rgba(11,27,58,.10);
      box-shadow: var(--shadow);
      position:relative;
      display:flex;
      flex-direction:column;
      min-height: 460px;
    }
    .pkg-hero{
      min-height: 190px;
      position:relative;
      overflow:hidden;
    }
    .pkg-hero .bg{
      position:absolute; inset:-2%;
      background-size:cover;
      background-position:center;
      transform: scale(1.06);
      transition: transform 600ms cubic-bezier(.2,.9,.2,1);
    }
    .pkg:hover .pkg-hero .bg{transform: scale(1.12)}
    .pkg-hero::before{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(180deg, rgba(11,27,58,.08), rgba(11,27,58,.78)),
        radial-gradient(700px 300px at 20% 10%, rgba(7,163,255,.28), transparent 60%);
    }
    .pkg-title{
      position:absolute; left:16px; right:16px; bottom:14px;
      color:#fff; z-index:2;
    }
    .pkg-title b{
      display:block;
      font-size:16px;
      letter-spacing:.2px;
    }
    .pkg-title span{
      display:inline-flex;
      margin-top:8px;
      font-size:12px;
      padding:7px 10px;
      border-radius:999px;
      background: rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.22);
      backdrop-filter: blur(8px);
    }
    .pkg-body{
      padding:14px;
      display:flex;
      flex-direction:column;
      gap:10px;
      flex:1;
    }
    .levels{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
    }
    @media (max-width: 520px){
      .levels{grid-template-columns:1fr}
    }
    .lv{
      border-radius: 16px;
      border:1px solid rgba(11,27,58,.12);
      background: rgba(7,163,255,.06);
      padding:11px 12px;
      cursor:pointer;
      font-weight:1000;
      color: var(--ink);
      transition:.15s transform, .15s background, .15s border;
      display:flex; justify-content:space-between; gap:10px;
      user-select:none;
    }
    .lv:hover{
      transform: translateY(-1px);
      background: rgba(7,163,255,.10);
      border-color: rgba(7,163,255,.25);
    }
    .lv small{
      font-weight:1000;
      color: var(--muted);
    }
    .pkg-footer{
      padding:12px 14px 14px;
      border-top: 1px solid rgba(11,27,58,.08);
      display:flex; gap:10px; flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }
    .mini{
      font-size:12px;
      color: var(--muted);
      line-height:1.5;
    }

    /* =========================
       POPUP (MODAL) - 3 PARTS
    ========================= */
    .modal-backdrop{
      position:fixed; inset:0;
      background: rgba(0,0,0,.40);
      backdrop-filter: blur(6px);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index: 90;
    }
    .modal{
      width:min(1040px, 96vw);
      background:#fff;
      border-radius: 22px;
      border:1px solid rgba(11,27,58,.12);
      box-shadow: var(--shadow2);
      overflow:hidden;
      transform: translateY(8px);
      opacity:0;
      transition: opacity 160ms ease, transform 160ms ease;
    }
    .modal-backdrop.show .modal{
      transform: translateY(0);
      opacity:1;
    }
    .mhead{
      padding:14px 14px 10px;
      display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
      border-bottom:1px solid rgba(11,27,58,.10);
      background:
        radial-gradient(900px 400px at 10% 0%, rgba(7,163,255,.12), transparent 60%),
        #fff;
    }
    .mhead h3{margin:0; font-size:16px}
    .mhead p{margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.55}

    .mbody2{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:12px;
      padding:14px;
    }
    @media (max-width: 980px){ .mbody2{grid-template-columns:1fr} }

    .leftcol,.rightcol{display:flex; flex-direction:column; gap:12px}

    .introCard, .priceCard, .formCard{
      border:1px solid rgba(11,27,58,.10);
      border-radius:18px;
      background:#fff;
      padding:12px;
    }
    .introTop{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
    .pill{
      display:inline-flex; align-items:center;
      padding:7px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:1000;
      color:#fff;
      background: linear-gradient(135deg, var(--brand2), var(--brand));
    }
    .pill.soft{
      color: var(--ink);
      background: rgba(7,163,255,.10);
      border:1px solid rgba(7,163,255,.25);
    }
    .introText{
      color: var(--muted);
      font-size:13px;
      line-height:1.7;
      white-space: pre-line;
    }

    .priceRow{
      display:flex; gap:12px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap;
    }
    .label{font-size:12px; color:var(--muted); font-weight:1000}
    .price{
      margin-top:4px;
      font-size:18px;
      font-weight:1100;
      color: var(--brand);
    }
    .sub{margin-top:6px; font-size:12px; color:var(--muted); line-height:1.5}
    .miniSpecs{display:grid; grid-template-columns:1fr 1fr; gap:10px; min-width:280px}
    .spec{
      border:1px solid rgba(11,27,58,.10);
      border-radius:16px;
      padding:10px;
      background: rgba(7,163,255,.05);
    }
    .spec b{display:block; font-size:12px}
    .spec span{display:block; margin-top:4px; font-size:12px; color:var(--muted); line-height:1.45}

    .galleryWide{margin-top:10px; display:grid; gap:10px}
    .phWide{
      height:240px;
      border-radius:18px;
      overflow:hidden;
      border:1px solid rgba(11,27,58,.10);
      background:#eef6ff;
    }
    .phWide img{width:100%; height:100%; object-fit:cover; display:block}
    .thumbs{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:10px;
    }
    @media (max-width: 520px){ .thumbs{grid-template-columns:repeat(2,1fr)} }
    .thumb{
      height:74px;
      border-radius:16px;
      overflow:hidden;
      border:1px solid rgba(11,27,58,.10);
      background:#eef6ff;
      cursor:pointer;
      user-select:none;
      transition:.15s transform, .15s border;
    }
    .thumb:hover{transform: translateY(-1px); border-color: rgba(7,163,255,.25)}
    .thumb img{width:100%; height:100%; object-fit:cover; display:block}

    .formCard{
      background:
        radial-gradient(900px 420px at 20% 0%, rgba(7,163,255,.10), transparent 60%),
        #fff;
    }
    .formHead b{display:block; font-size:14px}
    .formHead span{display:block; margin-top:6px; color:var(--muted); font-size:12px; line-height:1.5}

    .fgrid{
      margin-top:10px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    @media (max-width: 520px){ .fgrid{grid-template-columns:1fr} }

    .field{display:flex; flex-direction:column; gap:6px}
    .field label{font-size:12px; color:var(--muted); font-weight:900}
    .field input,.field select,.field textarea{
      width:100%;
      padding:11px 12px;
      border-radius:14px;
      border:1px solid rgba(11,27,58,.12);
      background:#fff;
      color:var(--ink);
      outline:none;
      font-size:14px;
    }
    .field textarea{resize: vertical}
    .field input:focus,.field select:focus,.field textarea:focus{
      border-color: rgba(7,163,255,.35);
      box-shadow: 0 0 0 4px rgba(7,163,255,.14);
    }

    .actions2{
      margin-top:10px;
      display:flex; gap:10px; flex-wrap:wrap;
    }
    .actions2 .btn{flex:1}
    .fine{margin-top:10px; font-size:12px; color:var(--muted); line-height:1.5}

    /* =========================
       Placeholder sections
    ========================= */
    .placeholder{
      border:1px dashed rgba(11,27,58,.22);
      border-radius: 18px;
      padding:14px;
      background:#fff;
      color:var(--muted);
      line-height:1.7;
    }

    footer{
      padding:18px 0 10px;
      border-top:1px solid rgba(11,27,58,.08);
      color:var(--muted);
      font-size:13px;
      margin-top:18px;
    }

    /* Sticky CTA mobile */
    .sticky{
      position:fixed; left:12px; right:12px; bottom:12px;
      display:none; gap:10px; z-index: 60;
    }
    .sticky a{flex:1}
    @media (max-width: 980px){
      .sticky{display:flex}
    } 
:root{
    --dientandat_intro_text:#0b1220;
    --dientandat_intro_muted:#52637a;
    --dientandat_intro_primary:#0b6bd3;
    --dientandat_intro_primary2:#12a0ff;
    --dientandat_intro_good:#16a34a;

    --dientandat_intro_r:22px;
    --dientandat_intro_shadow: 0 22px 70px rgba(12, 36, 72, .14);
    --dientandat_intro_shadow2: 0 18px 45px rgba(11, 107, 211, .18);
  }

  .dientandat_intro{
    position:relative;
    padding: 64px 0;
    overflow:hidden;
    isolation:isolate;
  }
  .dientandat_intro::before{
    content:"";
    position:absolute; inset:-2px;
    background:
      radial-gradient(900px 520px at 12% 18%, rgba(18,160,255,.22), transparent 60%),
      radial-gradient(850px 520px at 86% 16%, rgba(11,107,211,.18), transparent 58%),
      radial-gradient(1000px 700px at 50% 90%, rgba(22,163,74,.10), transparent 55%);
    z-index:-2;
  }
  .dientandat_intro::after{
    content:"";
    position:absolute;
    top:-140px; right:-180px;
    width: 520px; height: 520px;
    background: conic-gradient(from 180deg,
      rgba(18,160,255,.0),
      rgba(18,160,255,.35),
      rgba(11,107,211,.0),
      rgba(22,163,74,.18),
      rgba(18,160,255,.0));
    filter: blur(18px);
    opacity:.75;
    border-radius: 50%;
    animation: dientandat_introSpin 9s linear infinite;
    z-index:-1;
  }
  @keyframes dientandat_introSpin{to{transform:rotate(360deg)}}

  .dientandat_introContainer{
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 18px;
  }

  .dientandat_introHeader{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 18px;
    margin-bottom: 18px;
  }

  .dientandat_introKicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(11,107,211,.10);
    border: 1px solid rgba(11,107,211,.16);
    color: rgba(11,107,211,1);
    font-weight: 900;
    font-size: 13px;
    letter-spacing:.2px;
    width: fit-content;
  }
  .dientandat_introKicker i{
    width:10px;height:10px;border-radius:50%;
    background: linear-gradient(135deg, var(--dientandat_intro_primary2), var(--dientandat_intro_primary));
    box-shadow: 0 10px 22px rgba(11,107,211,.28);
    display:inline-block;
  }

  .dientandat_introTitle{
    margin: 10px 0 6px;
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -0.8px;
    font-weight: 950;
    color: var(--dientandat_intro_primary);
  }
  .dientandat_introDesc{
    margin:0;
    color: var(--dientandat_intro_muted);
    line-height: 1.65;
    max-width: 72ch;
    font-weight: 650;
  }

  .dientandat_introBadgeRow{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .dientandat_introBadge{
    font-size: 12px;
    font-weight: 900;
    color: rgba(11,107,211,1);
    background: rgba(11,107,211,.09);
    border: 1px solid rgba(11,107,211,.14);
    padding: 7px 10px;
    border-radius: 999px;
    white-space:nowrap;
  }
  .dientandat_introBadge--good{
    color: rgba(22,163,74,1);
    background: rgba(22,163,74,.10);
    border-color: rgba(22,163,74,.18);
  }

  /* ===== Grid cards ===== */
  .dientandat_introGrid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 18px;
  }

  .dientandat_introCard{
    position:relative;
    border-radius: calc(var(--dientandat_intro_r) + 8px);
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.84));
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: var(--dientandat_intro_shadow);
    padding: 18px;
    overflow:hidden;
    transform: translateY(10px);
    opacity:0;
    transition: transform .65s ease, opacity .65s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .dientandat_introCard.dientandat_introShow{
    transform: translateY(0);
    opacity:1;
  }
  .dientandat_introCard::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:
      radial-gradient(520px 240px at 18% 20%, rgba(18,160,255,.22), transparent 60%),
      radial-gradient(520px 260px at 86% 12%, rgba(11,107,211,.18), transparent 58%),
      radial-gradient(520px 260px at 86% 86%, rgba(22,163,74,.12), transparent 58%);
    z-index:-1;
    opacity:.9;
  }

  .dientandat_introCardTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  .dientandat_introIcon{
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display:grid;
    place-items:center;
    background: rgba(11,107,211,.10);
    border: 1px solid rgba(11,107,211,.16);
    box-shadow: 0 16px 35px rgba(11,107,211,.14);
    flex: 0 0 auto;
    transition: transform .18s ease;
  }
  .dientandat_introCard:hover .dientandat_introIcon{transform: translateY(-2px)}
  .dientandat_introIcon svg{width:22px;height:22px;color: rgba(11,107,211,1)}

  .dientandat_introCardTag{
    font-size: 12px;
    font-weight: 950;
    color: rgba(11,107,211,1);
    background: rgba(11,107,211,.08);
    border: 1px solid rgba(11,107,211,.14);
    padding: 6px 10px;
    border-radius: 999px;
    white-space:nowrap;
  }

  .dientandat_introCardTitle{
    margin: 2px 0 6px;
    font-size: 17px;
    letter-spacing: -0.2px;
    font-weight: 950;
    color: var(--dientandat_intro_text);
  }
  .dientandat_introCardText{
    margin:0;
    color: var(--dientandat_intro_muted);
    line-height: 1.6;
    font-weight: 650;
    font-size: 14px;
  }

  .dientandat_introCard:hover{
    transform: translateY(-4px);
    border-color: rgba(11,107,211,.24);
    box-shadow: var(--dientandat_intro_shadow2);
  }

  .dientandat_introCardFoot{
    margin-top: 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
  }
  .dientandat_introMini{
    font-size: 12px;
    color: var(--dientandat_intro_muted);
    font-weight: 800;
  }
  .dientandat_introDot{
    width:10px;height:10px;border-radius:50%;
    background: linear-gradient(135deg, var(--dientandat_intro_primary2), var(--dientandat_intro_primary));
    box-shadow: 0 10px 22px rgba(11,107,211,.24);
  }

  /* Responsive */
  @media (max-width: 1060px){
    .dientandat_introGrid{grid-template-columns: repeat(2, 1fr);}
  }
  @media (max-width: 640px){
    .dientandat_introHeader{flex-direction:column;align-items:flex-start}
    .dientandat_introBadgeRow{justify-content:flex-start}
    .dientandat_introTitle{font-size: 32px}
    .dientandat_introGrid{grid-template-columns: 1fr;}
  }
  @media (prefers-reduced-motion: reduce){
    .dientandat_intro *{animation:none!important; transition:none!important}
    .dientandat_introCard{opacity:1; transform:none}
  }  
  :root{
    --dientandat_bg:#f4f9ff;
    --dientandat_text:#0b1220;
    --dientandat_muted:#52637a;
    --dientandat_primary:#0b6bd3;
    --dientandat_primary2:#12a0ff;
    --dientandat_good:#16a34a;

    --dientandat_r:22px;
    --dientandat_shadow: 0 22px 70px rgba(12, 36, 72, .14);
    --dientandat_shadow2: 0 18px 45px rgba(11, 107, 211, .18);
  }

  .dientandat_root{
    margin:0;
     font-family: "Google Sans", sans-serif;
    color:var(--dientandat_text);
    background:
      radial-gradient(900px 520px at 12% 18%, rgba(18,160,255,.22), transparent 60%),
      radial-gradient(850px 520px at 86% 16%, rgba(11,107,211,.18), transparent 58%),
      radial-gradient(1000px 700px at 50% 90%, rgba(22,163,74,.12), transparent 55%),
      var(--dientandat_bg);
    padding: 56px 0;
  }

  .dientandat_container{
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 18px;
    display:flex;
    flex-direction:column;
    gap: 26px;
  }

  /* ===== Card ===== */
  .dientandat_solar{
    position:relative;
    border-radius: calc(var(--dientandat_r) + 8px);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84));
    border: 1px solid rgba(255,255,255,.65);
    box-shadow: var(--dientandat_shadow);
    overflow:hidden;
    isolation:isolate;
  }
  .dientandat_solar::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:
      conic-gradient(from 180deg,
        rgba(18,160,255,.0),
        rgba(18,160,255,.45),
        rgba(11,107,211,.0),
        rgba(22,163,74,.22),
        rgba(18,160,255,.0));
    filter: blur(18px);
    opacity:.55;
    animation: dientandat_spin 7.5s linear infinite;
    z-index:-2;
  }
  .dientandat_solar::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(520px 300px at 18% 22%, rgba(18,160,255,.20), transparent 60%),
      radial-gradient(520px 320px at 86% 10%, rgba(11,107,211,.14), transparent 58%),
      radial-gradient(520px 320px at 86% 86%, rgba(22,163,74,.12), transparent 58%),
      rgba(255,255,255,.88);
    z-index:-1;
  }
  @keyframes dientandat_spin{to{transform:rotate(360deg)}}

  .dientandat_solarInner{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 34px;
    padding: 34px;
    align-items:start;
  }

  /* Ảnh trái */
  .dientandat_mediaLeft .dientandat_solarInner{grid-template-columns: .9fr 1.1fr;}
  .dientandat_mediaLeft .dientandat_solarInner > :first-child{order:1;}
  .dientandat_mediaLeft .dientandat_solarInner > :last-child{order:2;}

  /* ===== Text ===== */
  .dientandat_kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(11,107,211,.10);
    border: 1px solid rgba(11,107,211,.16);
    color: rgba(11,107,211,1);
    font-weight: 800;
    font-size: 13px;
    letter-spacing:.2px;
  }
  .dientandat_kicker i{
    width:10px;height:10px;border-radius:50%;
    background: linear-gradient(135deg, var(--dientandat_primary2), var(--dientandat_primary));
    box-shadow: 0 10px 22px rgba(11,107,211,.28);
    display:inline-block;
  }
  .dientandat_h2{
    margin: 14px 0 8px;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.7px;
    color: var(--dientandat_primary);
    font-weight: 950;
  }
  .dientandat_sub{margin:0 0 14px;font-weight:900;letter-spacing:.2px;}
  .dientandat_lead{margin:0 0 14px;color:var(--dientandat_muted);line-height:1.65;max-width:66ch;}
  .dientandat_note{
    margin: 14px 0 18px;
    padding: 16px;
    border-radius: var(--dientandat_r);
    background: rgba(11,107,211,.06);
    border: 1px solid rgba(11,107,211,.14);
    line-height: 1.65;
    color:#20324b;
  }
  .dientandat_label{margin: 8px 0 12px;font-weight:950;letter-spacing:.2px;}

  /* ===== Buttons ===== */
  .dientandat_grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 700px;
  }
  .dientandat_btn{
    position:relative;
    border-radius: 16px;
    padding: 14px 14px;
    border: 1px solid rgba(11,107,211,.18);
    background: rgba(255,255,255,.80);
    backdrop-filter: blur(8px);
    font-weight: 950;
    letter-spacing: .15px;
    cursor:pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    box-shadow: 0 10px 10px rgb(38 66 108 / 68%);
    user-select:none;
    outline:none;
  }
  .dientandat_btn::before{
    content:"";
    position:absolute;
    top:-40%;
    left:-60%;
    width: 60%;
    height: 180%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.65), transparent);
    transform: rotate(18deg);
    opacity:0;
    transition: opacity .18s ease;
    pointer-events:none;
  }
  .dientandat_btn:hover{
    transform: translateY(-3px);
    border-color: rgba(11,107,211,.32);
    box-shadow: var(--dientandat_shadow2);
    background: rgba(255,255,255,.92);
  }
  .dientandat_btn:hover::before{opacity:1; animation: dientandat_sweep .75s ease forwards;}
  @keyframes dientandat_sweep{to{left:130%}}
  .dientandat_btnCta{
    grid-column: 1 / -1;
    border: none;
    color: #fff;
    background: linear-gradient(135deg, rgba(22,163,74,1), rgba(34,197,94,1));
    box-shadow: 0 18px 34px rgba(22,163,74,.22);
  }

  /* ===== Media ===== */
  .dientandat_media{
    border-radius: calc(var(--dientandat_r) + 6px);
    overflow:hidden;
    border: 1px solid rgba(0,0,0,.06);
    background: rgba(255,255,255,.7);
    box-shadow: 0 18px 45px rgba(0,0,0,.10);
  }
  .dientandat_mediaFrame{width:100%;aspect-ratio:16/11;overflow:hidden;background:#eaf2ff;}
  .dientandat_mediaFrame img{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.02);transition:transform .7s ease;}
  .dientandat_media:hover .dientandat_mediaFrame img{transform:scale(1.08)}
  .dientandat_mediaBar{
    display:flex;gap:10px;align-items:center;justify-content:space-between;
    padding: 12px 14px;border-top:1px solid rgba(0,0,0,.06);background: rgba(255,255,255,.85);
  }
  .dientandat_chips{display:flex;gap:8px;flex-wrap:wrap}
  .dientandat_chip{
    font-size:12px;font-weight:850;color:rgba(11,107,211,1);
    background: rgba(11,107,211,.09);border:1px solid rgba(11,107,211,.14);
    padding:7px 10px;border-radius:999px;white-space:nowrap;
  }
  .dientandat_hint{font-size:12px;color:var(--dientandat_muted);font-weight:700}

  /* ===== Factory Section ===== */
  .dientandat_factory{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 18px;
    padding: 34px;
    align-items:stretch;
  }
  .dientandat_factoryBox{
    border-radius: calc(var(--dientandat_r) + 6px);
    border: 1px solid rgba(11,107,211,.14);
    background: rgba(11,107,211,.06);
    padding: 18px;
    line-height: 1.7;
    color:#20324b;
  }
  .dientandat_factoryActions{
    border-radius: calc(var(--dientandat_r) + 6px);
    border: 1px solid rgba(0,0,0,.06);
    background: rgba(255,255,255,.82);
    padding: 18px;
    display:flex;
    flex-direction:column;
    gap: 12px;
    justify-content:center;
  }
  .dientandat_hotline{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(11,107,211,.16);
    background: rgba(255,255,255,.9);
    font-weight: 950;
  }
  .dientandat_hotline svg{width:18px;height:18px}
  .dientandat_hotline span{color: var(--dientandat_muted); font-weight: 800; font-size: 13px}
  .dientandat_hotline strong{font-size: 18px}
  .dientandat_ctaRow{display:flex;gap:10px;flex-wrap:wrap}
  .dientandat_ctaBtn{
    border:none;border-radius:16px;
    padding: 12px 14px;
    font-weight:950;cursor:pointer;
    transition:.18s;
  }
  .dientandat_ctaCall{
    color:#fff;
    background: linear-gradient(135deg, var(--dientandat_primary), var(--dientandat_primary2));
    box-shadow: 0 16px 32px rgba(11,107,211,.24);
  }
  .dientandat_ctaCall:hover{transform: translateY(-2px)}
  .dientandat_ctaZalo{
    color:#fff;
    background: linear-gradient(135deg, rgba(22,163,74,1), rgba(34,197,94,1));
    box-shadow: 0 16px 32px rgba(22,163,74,.22);
  }
  .dientandat_ctaZalo:hover{transform: translateY(-2px)}
  .dientandat_small{color:var(--dientandat_muted);font-size:13px;line-height:1.5}

  /* ===== Overlays ===== */
  .dientandat_overlay{
    position:fixed; inset:0; display:none; place-items:center;
    padding: 18px; background: rgba(7, 16, 35, .58); z-index: 9999;
  }
  .dientandat_overlayShow{display:grid}
  .dientandat_modal{
    width: min(980px, 96vw);
    border-radius: 22px;
    overflow:hidden;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 30px 90px rgba(0,0,0,.38);
    transform: translateY(12px);
    animation: dientandat_pop .18s ease forwards;
  }
  @keyframes dientandat_pop{to{transform:translateY(0)}}
  .dientandat_modalTop{
    padding: 16px 18px;
    display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
    background:
      radial-gradient(520px 240px at 18% 20%, rgba(18,160,255,.22), transparent 60%),
      radial-gradient(520px 260px at 86% 12%, rgba(11,107,211,.18), transparent 58%),
      #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .dientandat_modalTitle{margin:0;font-weight:950;font-size:18px;letter-spacing:-.2px}
  .dientandat_modalSub{margin:6px 0 0;color:var(--dientandat_muted);line-height:1.5;font-size:14px}
  .dientandat_x{
    width: 140px; height: 40px; border-radius: 14px;
    border: 1px solid rgba(11,107,211,.16);
    background: rgba(11,107,211,.08);
    color: rgba(11,107,211,1);
    font-size: 20px; font-weight: 950;
    cursor:pointer; transition:.18s;
  }
  .dientandat_x:hover{transform: translateY(-1px); background: rgba(11,107,211,.12)}

  .dientandat_modalBody{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 16px 18px 18px;
    align-items:stretch;
  }
  .dientandat_mImg{
    border-radius: 18px;
    overflow:hidden;
    border: 1px solid rgba(0,0,0,.06);
        background: #002f61;
  }
  .dientandat_mImg img{width:100%;height:100%;object-fit:cover;display:block}
  .dientandat_mBox{
    border-radius: 18px;
    border: 1px solid rgba(11,107,211,.14);
    background: rgba(11,107,211,.06);
    padding: 14px;
    line-height: 1.65;
    color:#20324b;
    display:flex;
    flex-direction:column;
    gap: 12px;
    justify-content:space-between;
  }
  .dientandat_actions{display:flex;gap:10px;flex-wrap:wrap}
  .dientandat_a{
    border:none;border-radius: 14px;
    padding: 12px 14px;font-weight: 950;
    cursor:pointer;transition:.18s;
  }
  .dientandat_aPrimary{
    color:#fff;
    background: linear-gradient(135deg, var(--dientandat_primary), var(--dientandat_primary2));
    box-shadow: 0 16px 32px rgba(11,107,211,.24);
  }
  .dientandat_aPrimary:hover{transform: translateY(-2px)}
  .dientandat_aZalo{
    color:#fff;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    box-shadow: 0 16px 32px rgba(37,99,235,.22);
  }
  .dientandat_aZalo:hover{transform: translateY(-2px)}
  .dientandat_aGhost{
    color: rgba(11,107,211,1);
    background: rgba(11,107,211,.08);
    border: 1px solid rgba(11,107,211,.18);
  }
  .dientandat_aGhost:hover{transform: translateY(-1px); background: rgba(11,107,211,.10)}

  /* Form */
  .dientandat_formGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .dientandat_field{display:flex;flex-direction:column;gap:6px}
  .dientandat_field label{font-size:12px;color:var(--dientandat_muted);font-weight:800}
  .dientandat_field input,.dientandat_field textarea{
    font:inherit;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(11,107,211,.18);
    background: rgba(255,255,255,.9);
    outline:none;
  }
  .dientandat_field textarea{min-height:110px;resize:vertical}
  .dientandat_full{grid-column:1/-1}
  .dientandat_toast{
    display:none;margin-top:10px;padding:10px 12px;border-radius:14px;
    font-weight:900;background: rgba(22,163,74,.12);
    border:1px solid rgba(22,163,74,.25);color:#0f5132;
  }
  .dientandat_toastShow{display:block}

  /* Reveal */
  .dientandat_reveal{opacity:0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease}
  .dientandat_revealShow{opacity:1; transform: translateY(0)}

  @media (max-width: 980px){
    .dientandat_solarInner{grid-template-columns: 1fr; padding: 22px}
    .dientandat_mediaLeft .dientandat_solarInner{grid-template-columns: 1fr}
    .dientandat_modalBody{grid-template-columns:1fr}
    .dientandat_factory{grid-template-columns:1fr; padding:22px}
    .dientandat_formGrid{grid-template-columns:1fr}
    .dientandat_h2{font-size:34px}
    .dientandat_grid{max-width:100%}
  }
  @media (max-width: 540px){
    .dientandat_grid{grid-template-columns:1fr}
    .dientandat_btnCta{grid-column:auto}
    .dientandat_h2{font-size:30px}
  }
  @media (prefers-reduced-motion: reduce){
    .dientandat_root *{animation:none!important; transition:none!important}
  }  
  :root{
    --td-blue:#0b1f66;
    --td-blue2:#1232b3;
    --td-ink:#0b1220;
    --td-muted:#5b6475;
    --td-border: rgba(12, 26, 62, .10);
    --td-shadow: 0 18px 55px rgba(12, 26, 62, .10);
    --td-radius: 22px;
    --td-accent:#ff6a3d;
  }

  .about-td{
    background: #fff;
    padding: 70px 0 0;
    position:relative;
    overflow:hidden;
  }

  .about-td::before{
    content:"";
    position:absolute; inset:-120px -120px auto auto;
    width: 520px; height: 520px;
    background: radial-gradient(circle at 35% 35%, rgba(18,50,179,.16), transparent 60%);
    pointer-events:none;
  }
  .about-td::after{
    content:"";
    position:absolute; inset:auto auto -160px -160px;
    width: 540px; height: 540px;
    background: radial-gradient(circle at 55% 55%, rgba(255,106,61,.12), transparent 60%);
    pointer-events:none;
  }

  .about-td__container{
    width: min(1180px, 92vw);
    margin: 0 auto;
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 34px;
    align-items:center;
  }

  .about-td__kicker{
    display:inline-block;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(18,50,179,.08);
    border: 1px solid rgba(18,50,179,.16);
    color: var(--td-blue2);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .6px;
  }

  .about-td__title{
    margin: 14px 0 10px;
    font-size: clamp(24px, 3.2vw, 40px);
    line-height: 1.1;
    font-weight: 900;
    color: var(--td-ink);
    letter-spacing: .3px;
  }

  .about-td__text{
    margin-top: 12px;
    color: var(--td-muted);
    font-size: 14.5px;
    line-height: 1.85;
    max-width: 58ch;
  }
  .about-td__text p{ margin: 0 0 12px; }

  .about-td__highlight{
    color: var(--td-ink);
    font-weight: 800;
    padding-left: 14px;
    border-left: 3px solid rgba(255,106,61,.85);
  }

  .about-td__actions{
    margin-top: 18px;
    display:flex;
    flex-wrap:wrap;
    gap: 14px;
    align-items:center;
  }

  .about-td__btn{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,106,61,1), rgba(255,78,61,1));
    color:#fff;
    text-decoration:none;
    font-weight: 900;
    font-size: 13px;
    box-shadow: 0 16px 35px rgba(255,78,61,.22);
    border: 1px solid rgba(255,255,255,.35);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .about-td__btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 22px 48px rgba(255,78,61,.26);
  }
  .about-td__btnIcon{
    width: 26px; height: 26px;
    border-radius: 999px;
    display:grid; place-items:center;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.30);
    font-size: 14px;
  }

  .about-td__meta{
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
  }
  .about-td__chip{
    padding: 9px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--td-border);
    box-shadow: 0 10px 30px rgba(12,26,62,.06);
    color: var(--td-ink);
    font-weight: 700;
    font-size: 12px;
  }

  /* RIGHT ART */
  .about-td__right{ display:flex; justify-content:center; }

  .about-td__art{
    position:relative;
    width: min(520px, 92vw);
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    display:grid;
    place-items:center;
    filter: drop-shadow(0 24px 55px rgba(12,26,62,.18));
  }

  /* vòng “ring” sang hơn */
  .about-td__ring{
    position:absolute; inset: 14px;
    border-radius: 999px;
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.40), transparent 45%),
      radial-gradient(circle at 70% 80%, rgba(18,50,179,.18), transparent 45%),
      linear-gradient(180deg, rgba(18,50,179,.10), rgba(18,50,179,.04));
    border: 1px solid rgba(18,50,179,.14);
    box-shadow: var(--td-shadow);
  }

  .about-td__img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 999px;
    position:relative;
    z-index: 1;
    padding: 10px;
    transform: translateZ(0);
  }

  /* VALUES BOTTOM */
  .about-td__valuesWrap{
    margin-top: 34px;
    padding: 26px 0 44px;
    border-top: 1px solid rgba(12,26,62,.08);
    background:
      linear-gradient(180deg, rgba(18,50,179,.04), transparent 55%);
  }

  .about-td__values{
    width: min(1180px, 92vw);
    margin: 0 auto;
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 18px;
    align-items:center;
  }

  .val-item{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    padding: 14px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(12,26,62,.10);
    box-shadow: 0 14px 40px rgba(12,26,62,.06);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .val-item:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 50px rgba(12,26,62,.09);
  }

  .val-icon{
    width: 46px; height: 46px;
    border-radius: 14px;
    display:grid; place-items:center;
    color: var(--td-blue2);
    background: rgba(18,50,179,.08);
    border: 1px solid rgba(18,50,179,.14);
    flex: 0 0 auto;
  }

  .val-title{
    font-weight: 1000;
    color: var(--td-ink);
    letter-spacing:.3px;
  }
  .val-sub{
    margin-top: 4px;
    color: var(--td-muted);
    font-size: 13px;
    line-height: 1.4;
  }

  /* RESPONSIVE */
  @media (max-width: 980px){
    .about-td__container{
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .about-td__text{ max-width: none; }
    .about-td__right{ order: -1; } /* đẩy ảnh lên trước cho mobile nhìn đẹp */
    .about-td{ padding: 46px 0 0; }
    .about-td__values{
      grid-template-columns: repeat(2, minmax(0,1fr));
    }
  }
  @media (max-width: 520px){
    .about-td__values{ grid-template-columns: 1fr; }
    .val-item{ padding: 14px 12px; }
  } 

  :root{
    --solarproj_text:#0b1220;
    --solarproj_muted:#52637a;
    --solarproj_line:rgba(11,18,32,.12);
    --solarproj_bg:#f6fbff;
    --solarproj_primary:#0b6bd3;
    --solarproj_primary2:#12a0ff;
    --solarproj_r:22px;
    --solarproj_shadow: 0 22px 70px rgba(12, 36, 72, .14);
    --solarproj_shadow2: 0 18px 45px rgba(11, 107, 211, .18);
  }

  .solarproj_wrap{
    padding: 56px 0;
    background:
      radial-gradient(900px 520px at 12% 18%, rgba(18,160,255,.14), transparent 60%),
      radial-gradient(850px 520px at 86% 16%, rgba(11,107,211,.12), transparent 58%),
      var(--solarproj_bg);
  }
  .solarproj_container{
    width:min(1180px, 92vw);
    margin:0 auto;
  }

  .solarproj_head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
  }
  .solarproj_kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:999px;
    background: rgba(11,107,211,.10);
    border: 1px solid rgba(11,107,211,.16);
    color: rgba(11,107,211,1);
    font-weight: 900;
    font-size: 13px;
    letter-spacing:.2px;
    width: fit-content;
  }
  .solarproj_kicker i{
    width:10px;height:10px;border-radius:50%;
    background: linear-gradient(135deg, var(--solarproj_primary2), var(--solarproj_primary));
    box-shadow: 0 10px 22px rgba(11,107,211,.24);
    display:inline-block;
  }
  .solarproj_title{
    margin: 10px 0 6px;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.7px;
    font-weight: 950;
    color: var(--solarproj_text);
  }
  .solarproj_desc{
    margin:0;
    color: var(--solarproj_muted);
    line-height: 1.65;
    max-width: 76ch;
    font-weight: 650;
  }
  .solarproj_badges{
    display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
  }
  .solarproj_badge{
    font-size:12px;
    font-weight: 900;
    color: rgba(11,107,211,1);
    background: rgba(11,107,211,.09);
    border: 1px solid rgba(11,107,211,.14);
    padding: 7px 10px;
    border-radius: 999px;
    white-space:nowrap;
  }

  /* GRID */
  .solarproj_grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
    margin-top: 18px;
  }
  @media (max-width: 980px){
    .solarproj_head{flex-direction:column; align-items:flex-start}
    .solarproj_badges{justify-content:flex-start}
    .solarproj_grid{grid-template-columns: repeat(2, 1fr);}
  }
  @media (max-width: 640px){
    .solarproj_grid{grid-template-columns: 1fr;}
    .solarproj_title{font-size: 28px;}
  }

  .solarproj_card{
    border-radius: calc(var(--solarproj_r) + 8px);
    overflow:hidden;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.68);
    box-shadow: var(--solarproj_shadow);
    cursor:pointer;
    user-select:none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position:relative;
    isolation:isolate;
  }
  .solarproj_card:hover{
    transform: translateY(-4px);
    border-color: rgba(11,107,211,.22);
    box-shadow: var(--solarproj_shadow2);
  }

  .solarproj_media{
    height: 180px;
    background:#eaf2ff;
    overflow:hidden;
    position:relative;
  }
  .solarproj_media img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transform: scale(1.02);
    transition: transform .7s ease;
  }
  .solarproj_card:hover .solarproj_media img{transform: scale(1.08)}

  .solarproj_media::after{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
    pointer-events:none;
  }

  .solarproj_topTag{
    position:absolute;
    top:12px; left:12px;
    z-index:2;
    font-size:12px;
    font-weight:950;
    color:#fff;
    padding:7px 10px;
    border-radius:999px;
    background: rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(8px);
  }

  .solarproj_body{
    padding: 14px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .solarproj_name{
    margin:0;
    font-size: 16px;
    letter-spacing:-.2px;
    font-weight: 950;
    color: var(--solarproj_text);
    line-height: 1.25;
  }
  .solarproj_meta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    color: var(--solarproj_muted);
    font-size: 12px;
    font-weight: 800;
  }
  .solarproj_meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    background: rgba(11,107,211,.06);
    border: 1px solid rgba(11,107,211,.10);
  }

  .solarproj_short{
    margin:0;
    color: var(--solarproj_muted);
    font-size: 13px;
    line-height: 1.6;
    font-weight: 650;
  }

  .solarproj_foot{
    margin-top:2px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
  }
  .solarproj_cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight: 950;
    font-size: 13px;
    color: rgba(11,107,211,1);
  }
  .solarproj_arrow{
    width:34px; height:34px;
    border-radius:14px;
    border:1px solid rgba(11,107,211,.16);
    background: rgba(11,107,211,.08);
    display:grid; place-items:center;
    font-weight: 950;
    color: rgba(11,107,211,1);
  }

  /* POPUP (MODAL) */
  .solarproj_ovl{
    position:fixed; inset:0;
    display:none;
    place-items:center;
    padding:18px;
    background: rgba(7,16,35,.58);
    z-index: 9999;
  }
  .solarproj_ovlShow{display:grid}

  .solarproj_modal{
    width:min(1040px, 96vw);
    border-radius: 22px;
    overflow:hidden;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 30px 90px rgba(0,0,0,.38);
    transform: translateY(12px);
    animation: solarproj_pop .18s ease forwards;
  }
  @keyframes solarproj_pop{to{transform: translateY(0)}}

  .solarproj_mTop{
    padding: 16px 18px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    background:
      radial-gradient(520px 240px at 18% 20%, rgba(18,160,255,.18), transparent 60%),
      radial-gradient(520px 260px at 86% 12%, rgba(11,107,211,.14), transparent 58%),
      #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .solarproj_mTitle{
    margin:0;
    font-weight:950;
    font-size: 18px;
    letter-spacing:-.2px;
    color: var(--solarproj_text);
  }
  .solarproj_mSub{
    margin:6px 0 0;
    color: var(--solarproj_muted);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 650;
  }
  .solarproj_x{
    width: 40px; height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(11,107,211,.16);
    background: rgba(11,107,211,.08);
    color: rgba(11,107,211,1);
    font-size: 20px;
    font-weight: 950;
    cursor:pointer;
    transition: .18s;
  }
  .solarproj_x:hover{transform: translateY(-1px); background: rgba(11,107,211,.12)}

  .solarproj_mBody{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap:14px;
    padding: 16px 18px 18px;
  }
  @media (max-width: 980px){
    .solarproj_mBody{grid-template-columns:1fr}
  }

  .solarproj_bigImg{
    border-radius: 18px;
    overflow:hidden;
    border: 1px solid rgba(0,0,0,.06);
    background:#eaf2ff;
    aspect-ratio: 16/10;
  }
  .solarproj_bigImg img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }

  .solarproj_info{
    border-radius: 18px;
    border: 1px solid rgba(11,107,211,.14);
    background: rgba(11,107,211,.06);
    padding: 14px;
    color:#20324b;
    display:flex;
    flex-direction:column;
    gap: 12px;
  }
  .solarproj_infoRow{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }
  @media (max-width: 520px){
    .solarproj_infoRow{grid-template-columns:1fr}
  }
  .solarproj_box{
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.06);
    background: rgba(255,255,255,.78);
    padding: 10px 12px;
  }
  .solarproj_box b{
    display:block;
    font-size: 12px;
    color: var(--solarproj_muted);
    font-weight: 900;
  }
  .solarproj_box span{
    display:block;
    margin-top:4px;
    font-size: 13px;
    font-weight: 850;
    color: var(--solarproj_text);
    line-height: 1.45;
  }

  .solarproj_text{
    color:#20324b;
    line-height: 1.7;
    font-weight: 650;
    font-size: 14px;
    white-space: pre-line;
  }

  .solarproj_gallery{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:10px;
  }
  @media (max-width: 520px){
    .solarproj_gallery{grid-template-columns: repeat(2, 1fr)}
  }
  .solarproj_thumb{
    height: 76px;
    border-radius: 16px;
    overflow:hidden;
    border: 1px solid rgba(0,0,0,.06);
    background:#eaf2ff;
    cursor:pointer;
    transition: transform .15s ease, border-color .15s ease;
  }
  .solarproj_thumb:hover{transform: translateY(-1px); border-color: rgba(11,107,211,.22)}
  .solarproj_thumb img{width:100%; height:100%; object-fit:cover; display:block}

  .solarproj_actions{
    display:flex; gap:10px; flex-wrap:wrap;
    margin-top: 2px;
  }
  .solarproj_btn{
    border:none;
    border-radius: 14px;
    padding: 12px 14px;
    font-weight: 950;
    cursor:pointer;
    transition:.18s;
  }
  .solarproj_btnPrimary{
    color:#fff;
    background: linear-gradient(135deg, var(--solarproj_primary), var(--solarproj_primary2));
    box-shadow: 0 16px 32px rgba(11,107,211,.22);
  }
  .solarproj_btnPrimary:hover{transform: translateY(-2px)}
  .solarproj_btnGhost{
    color: rgba(11,107,211,1);
    background: rgba(11,107,211,.08);
    border: 1px solid rgba(11,107,211,.16);
  }
  .solarproj_btnGhost:hover{transform: translateY(-1px); background: rgba(11,107,211,.10)}

  @media (prefers-reduced-motion: reduce){
    .solarproj_card, .solarproj_thumb, .solarproj_modal{transition:none!important; animation:none!important}
  } 
  

  /* ====== STATS PARALLAX ====== */
  .stats-parallax{
    position:relative;
    min-height: 420px;
    padding: 80px 0;
    overflow:hidden;

    /* Parallax nền (đổi URL ảnh theo bạn) */
    background-image:
      radial-gradient(1200px 500px at 70% 20%, rgba(255,255,255,.12), transparent 60%),
      radial-gradient(900px 500px at 20% 80%, rgba(0,255,255,.08), transparent 55%),
      url("https://bcp.cdnchinhphu.vn/334894974524682240/2022/5/9/dien-viii-1652086807807319036543.png");
    background-size: cover;
    background-position: center;
    background-repeat:no-repeat;
    background-attachment: fixed; /* parallax kiểu fixed */
  }

  /* Overlay để chữ nổi rõ */
  .stats-overlay{
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(7,15,55,.78), rgba(7,15,55,.62));
    pointer-events:none;
  }

  .stats-container{
    position:relative;
    width:min(1100px, 92vw);
    margin:0 auto;
    color:#fff;
  }

  .stats-head{
    text-align:center;
    margin-bottom: 26px;
  }
  .stats-head h2{
    margin:0 0 8px;
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 700;
    letter-spacing:.2px;
  }
  .stats-head p{
    margin:0;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    line-height: 1.6;
  }

  .stats-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 26px;
  }

  .stat-card{
    border-radius: 18px;
    padding: 18px 16px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
  }
  .stat-card:hover{
    transform: translateY(-6px);
    background: rgba(255,255,255,.11);
    border-color: rgba(255,255,255,.22);
  }

  .stat-number{
    display:flex;
    align-items: baseline;
    justify-content:center;
    gap: 4px;
    margin-top: 2px;
    font-weight: 800;
    letter-spacing: .3px;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
  }
  .stat-number .suffix{
    font-size: .55em;
    opacity:.92;
  }

  .stat-label{
    text-align:center;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    opacity: .95;
  }
  .stat-note{
    text-align:center;
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255,255,255,.75);
    line-height: 1.45;
  }

  .stats-cta{
    margin-top: 28px;
    display:flex;
    justify-content:center;
  }
 /* ===============================
   AUTO ANIMATION BUTTON
=================================*/

.btn-stats{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 50px;
  background: linear-gradient(270deg,#0b4dbb,#07a3ff,#0b4dbb);
  background-size: 300% 300%;
  color: #fff;
  font-weight: 600;
  font-size:18px;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(7,163,255,.35);
  animation: gradientMove 6s ease infinite, glowPulse 2.5s ease-in-out infinite;
}

/* Gradient chuyển động */
@keyframes gradientMove{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Glow nhịp nhẹ */
@keyframes glowPulse{
  0%{ box-shadow: 0 10px 25px rgba(7,163,255,.35); }
  50%{ box-shadow: 0 18px 45px rgba(7,163,255,.55); }
  100%{ box-shadow: 0 10px 25px rgba(7,163,255,.35); }
}

/* DOT nhịp tim */
.btn-stats .btn-dot{
  width:10px;
  height:10px;
  background:#fff;
  border-radius:50%;
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot{
  0%{ transform:scale(1); opacity:1;}
  50%{ transform:scale(1.6); opacity:.6;}
  100%{ transform:scale(1); opacity:1;}
}

/* Ánh sáng quét liên tục */
.btn-stats::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.35),
      transparent
  );
  animation: shine 3.5s infinite;
}

@keyframes shine{
  0%{ left:-100%; }
  60%{ left:100%; }
  100%{ left:100%; }
}

/* Mobile tap */
.btn-stats{
  touch-action: manipulation;
}
  /* Responsive */
  @media (max-width: 920px){
    .stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-parallax{ padding: 70px 0; background-attachment: scroll; } /* iOS/Android ổn định hơn */
  }
  @media (max-width: 520px){
    .stats-grid{ grid-template-columns: 1fr; }
  } 
  




    .faq-section {
        padding: 60px 0;
        background: #f7f9fc
    }
    
    .faq-container {
        width: 1000px;
        max-width: 92%;
        margin: auto
    }
    
    .faq-title {
        text-align: center;
        margin-bottom: 30px
    }
    
    .faq-title span {
        color: #1232b3;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 1px
    }
    
    .faq-title h2 {
        font-size: 32px;
        margin: 6px 0;
        color: #0b1f66
    }
    
    .faq-title p {
        color: #666;
        font-size: 14px
    }
    
    .faq-wrapper {
        max-width: 800px;
        margin: auto
    }
    
    .faq-item {
        background: #fff;
        margin-bottom: 10px;
        border-radius: 10px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
        overflow: hidden;
        transition: .25s
    }
    
    .faq-item:hover {
        transform: translateY(-2px)
    }
    
    .faq-question {
        padding: 14px 20px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center
    }
    
    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: .35s;
        padding: 0 20px;
        color: #555;
        line-height: 1.6;
        font-size: 14px
    }
    
    .faq-item.active .faq-answer {
        max-height: 220px;
        padding: 12px 20px
    }
    
    .faq-plus {
        font-size: 22px;
        color: #1232b3;
        transition: .3s
    }
    
    .faq-item.active .faq-plus {
        transform: rotate(45deg)
    }
    
    .faq-list {
        margin: 5px 0 0;
        padding-left: 18px
    }
    
    .faq-list li {
        margin: 2px 0
    }
    
    @media(max-width:768px) {
        .faq-title h2 {
            font-size: 26px
        }
    }


    .contact-sec {
        padding: 70px 0;
        background: linear-gradient(180deg, rgba(18, 50, 179, .05), rgba(255, 255, 255, 1) 55%)
    }
    
    .contact-wrap {
        width: 1100px;
        max-width: 92%;
        margin: auto
    }
    
    .contact-head {
        text-align: center;
        margin-bottom: 28px
    }
    
    .contact-head span {
        color: #1232b3;
        font-weight: 800;
        font-size: 12px;
        letter-spacing: 1px
    }
    
    .contact-head h2 {
        margin: 6px 0;
        font-size: 34px;
        color: #0b1f66
    }
    
    .contact-head p {
        margin: 0 auto;
        max-width: 70ch;
        color: #667085;
        font-size: 14px;
        line-height: 1.6
    }
    
    .contact-grid {
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        gap: 18px;
        align-items: start
    }
    
    .contact-card {
        background: #fff;
        border: 1px solid rgba(12, 26, 62, .10);
        border-radius: 16px;
        box-shadow: 0 16px 45px rgba(12, 26, 62, .08);
        padding: 16px
    }
    
    .contact-card-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px
    }
    
    .contact-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(46, 230, 166, .12);
        border: 1px solid rgba(46, 230, 166, .28);
        color: #0b1f66;
        font-weight: 800;
        font-size: 12px
    }
    
    .contact-note {
        color: #8a94a6;
        font-size: 12px
    }
    
    .contact-form label {
        display: block;
        font-weight: 800;
        font-size: 12px;
        color: #1b2b52;
        margin: 10px 0 6px
    }
    
    .f-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }
    
    .f-field input,
    .f-field select,
    .f-field textarea {
        width: 100%;
        border: 1px solid rgba(12, 26, 62, .14);
        border-radius: 12px;
        padding: 11px 12px;
        font-size: 14px;
        outline: none;
        background: #fff;
        transition: .2s
    }
    
    .f-field textarea {
        resize: vertical;
        min-height: 98px
    }
    
    .f-field input:focus,
    .f-field select:focus,
    .f-field textarea:focus {
        border-color: rgba(18, 50, 179, .55);
        box-shadow: 0 0 0 4px rgba(18, 50, 179, .10)
    }
    
    .f-actions {
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        gap: 10px
    }
    
    .btn-submit {
        border: 0;
        cursor: pointer;
        border-radius: 999px;
        padding: 12px 16px;
        font-weight: 900;
        font-size: 14px;
        color: #fff;
        background: linear-gradient(180deg, #1232b3, #0b1f66);
        box-shadow: 0 16px 40px rgba(18, 50, 179, .22);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: .2s
    }
    
    .btn-submit:hover {
        transform: translateY(-1px);
        box-shadow: 0 22px 55px rgba(18, 50, 179, .28)
    }
    
    .btn-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #2ee6a6;
        box-shadow: 0 0 0 6px rgba(46, 230, 166, .20);
        display: inline-block;
        animation: pulse 1.6s ease-in-out infinite
    }
    
    @keyframes pulse {
        0%, 100% {
            transform: scale(1)
        }
        50% {
            transform: scale(1.12)
        }
    }
    
    .f-mini {
        display: flex;
        flex-wrap: wrap;
        gap: 8px
    }
    
    .mini-item {
        font-size: 12px;
        color: #667085;
        background: rgba(12, 26, 62, .04);
        border: 1px solid rgba(12, 26, 62, .08);
        padding: 6px 10px;
        border-radius: 999px
    }
    
    .form-toast {
        display: none;
        margin-top: 8px;
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(46, 230, 166, .14);
        border: 1px solid rgba(46, 230, 166, .30);
        color: #0b1f66;
        font-weight: 800;
        font-size: 13px
    }
    
    .policy-col {
        display: flex;
        flex-direction: column;
        gap: 14px
    }
    
    .policy-card {
        background: #fff;
        border: 1px solid rgba(12, 26, 62, .10);
        border-radius: 16px;
        box-shadow: 0 16px 45px rgba(12, 26, 62, .08);
        padding: 16px;
        position: relative;
        overflow: hidden
    }
    
    .policy-card h3 {
        margin: 0 0 6px;
        font-size: 18px;
        color: #0b1f66
    }
    
    .policy-card p {
        margin: 0 0 12px;
        color: #667085;
        font-size: 13.5px;
        line-height: 1.6
    }
    
    .policy-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px
    }
    
    .policy-item {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        padding: 10px 10px;
        border-radius: 14px;
        background: rgba(18, 50, 179, .04);
        border: 1px solid rgba(18, 50, 179, .10)
    }
    
    .p-ico {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        color: #1232b3;
        background: #fff;
        border: 1px solid rgba(12, 26, 62, .10);
        flex: 0 0 auto
    }
    
    .p-title {
        font-weight: 900;
        color: #0b1f66;
        font-size: 13.5px
    }
    
    .p-sub {
        color: #667085;
        font-size: 12.5px;
        margin-top: 2px;
        line-height: 1.4
    }
    
    .policy-cta {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 12px
    }
    
    .btn-ghost {
        padding: 10px 12px;
        border-radius: 999px;
        border: 1px solid rgba(18, 50, 179, .22);
        color: #0b1f66;
        text-decoration: none;
        font-weight: 900;
        background: #fff
    }
    
    .btn-solid {
        padding: 10px 12px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .35);
        color: #fff;
        text-decoration: none;
        font-weight: 900;
        background: linear-gradient(180deg, #ff6a3d, #ff4e3d);
        box-shadow: 0 16px 40px rgba(255, 78, 61, .20)
    }
    
    .policy-card.small {
        padding: 14px
    }
    
    .ribbon {
        position: absolute;
        top: 12px;
        right: -40px;
        background: linear-gradient(180deg, #ff6a3d, #ff4e3d);
        color: #fff;
        font-weight: 900;
        font-size: 12px;
        padding: 6px 54px;
        transform: rotate(20deg);
        box-shadow: 0 14px 35px rgba(255, 78, 61, .22)
    }
    
    .quick-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 8px
    }
    
    .quick-box {
        border-radius: 14px;
        border: 1px solid rgba(12, 26, 62, .10);
        background: rgba(12, 26, 62, .03);
        padding: 12px
    }
    
    .q-top {
        font-size: 12px;
        color: #667085;
        font-weight: 800
    }
    
    .q-big {
        font-size: 20px;
        color: #0b1f66;
        font-weight: 1000;
        margin: 6px 0 2px
    }
    
    .q-sub {
        font-size: 12px;
        color: #667085
    }
    
    @media(max-width:980px) {
        .contact-grid {
            grid-template-columns: 1fr
        }
        .f-row {
            grid-template-columns: 1fr
        }
        .quick-row {
            grid-template-columns: 1fr
        }
        .contact-head h2 {
            font-size: 28px
        }
    }


    .td-footer {
        background: linear-gradient(180deg, #063a69, #052f56 55%, #042a4d);
        color: #eaf2ff
    }
    
    .td-foot-top {
        padding: 18px 0 22px;
        position: relative;
        overflow: hidden
    }
    
    .td-foot-wrap {
        width: 1180px;
        max-width: 92%;
        margin: auto
    }
    
    .td-sky {
        height: 88px;
        position: relative;
        margin-bottom: 10px
    }
    
    .td-sky-line {
        position: absolute;
        left: 0;
        right: 0;
        top: 44px;
        height: 2px;
        background: linear-gradient(90deg, transparent, #d7ff4a 10%, #d7ff4a 90%, transparent)
    }
    
    .td-sky-city {
        position: absolute;
        left: 50%;
        top: 6px;
        transform: translateX(-50%);
        width: min(560px, 92vw);
        height: 76px;
        opacity: .95;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='180' viewBox='0 0 900 180'%3E%3Cg fill='none' stroke='%23d7ff4a' stroke-width='4' stroke-linejoin='round'%3E%3Cpath d='M40 150V95h25V70h30v40h30V55h35v30h40V35h45v55h30V60h35v90h55V90h30V65h30v35h45V50h35v100h65V85h40V55h35v95h60V120h35V95h35v55'/%3E%3Cpath d='M165 70h25M300 35h30M510 65h25M675 55h25'/%3E%3Cpath d='M120 95h10M130 95h10M140 95h10M585 95h10M595 95h10M605 95h10'/%3E%3C/g%3E%3Cg opacity='.25'%3E%3Cpath d='M250 150V20h120v130z' fill='%23ffffff'/%3E%3Cpath d='M430 150V40h150v110z' fill='%23ffffff'/%3E%3Cpath d='M615 150V30h120v120z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E")
    }
    
    .td-sky-plug {
        position: absolute;
        left: -6px;
        top: 36px;
        width: 34px;
        height: 34px;
        border-radius: 12px;
        border: 2px solid #d7ff4a;
        box-shadow: 0 0 0 6px rgba(215, 255, 74, .12);
        display: grid;
        place-items: center;
        color: #d7ff4a;
        font-weight: 900
    }
    
    .td-sky-plug::before {
        content: "⎓";
        font-size: 18px;
        transform: translateY(-1px)
    }
    
    .td-sky-bulb {
        position: absolute;
        right: -6px;
        top: 32px;
        width: 38px;
        height: 38px;
        border-radius: 14px;
        border: 2px solid #d7ff4a;
        box-shadow: 0 0 0 6px rgba(215, 255, 74, .12);
        display: grid;
        place-items: center;
        color: #d7ff4a
    }
    
    .td-sky-bulb::before {
        content: "💡";
        filter: grayscale(1) brightness(1.4);
        font-size: 18px
    }
    
    .td-foot-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 26px;
        margin-top: 6px
    }
    
    .td-foot-col h4 {
        margin: 0 0 12px;
        font-size: 16px;
        letter-spacing: .3px;
        color: #ffffff;
        font-weight: 900
    }
    
    .td-foot-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px
    }
    
    .td-foot-list li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        color: rgba(234, 242, 255, .92);
        font-size: 13.5px;
        line-height: 1.5
    }
    
    .td-foot-list .ico {
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .12);
        flex: 0 0 auto;
        background:white;
    }
    
    .td-foot-divider {
        height: 1px;
        background: rgba(255, 255, 255, .14);
        margin: 18px 0
    }
    
    .td-foot-bottomGrid {
        display: grid;
        grid-template-columns: 1.05fr .9fr 1.05fr;
        gap: 22px;
        align-items: start
    }
    
    .td-foot-box h5 {
        margin: 0 0 12px;
        font-size: 14px;
        color: #ffffff;
        font-weight: 1000;
        letter-spacing: .3px
    }
    
    .td-hotline {
        display: flex;
        gap: 14px;
        flex-wrap: wrap
    }
    
    .td-hot-item {
        min-width: 160px;
        padding-left: 14px;
        border-left: 1px solid rgba(255, 255, 255, .18)
    }
    
    .td-hot-item:first-child {
        border-left: 0;
        padding-left: 0
    }
    
    .td-hot-l {
        color: rgba(234, 242, 255, .70);
        font-size: 12.5px;
        font-weight: 800
    }
    
    .td-hot-v {
        display: inline-block;
        margin-top: 4px;
        color: #ffffff;
        font-weight: 1000;
        text-decoration: none
    }
    
    .td-hot-v:hover {
        text-decoration: underline
    }
    
    .td-social {
        display: flex;
        gap: 10px;
        flex-wrap: wrap
    }
    
    .td-sbtn {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        text-decoration: none;
        color: #ffffff;
        font-weight: 1000;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .14);
        box-shadow: 0 14px 35px rgba(0, 0, 0, .18);
        transition: .2s
    }
    
    .td-sbtn:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, .12)
    }
    
    .td-news {
        display: flex;
        gap: 10px;
        align-items: center
    }
    
    .td-news-in {
        flex: 1;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, .22);
        background: rgba(0, 0, 0, .10);
        color: #fff;
        padding: 12px 12px;
        outline: none
    }
    
    .td-news-in::placeholder {
        color: rgba(234, 242, 255, .65)
    }
    
    .td-news-in:focus {
        border-color: rgba(215, 255, 74, .55);
        box-shadow: 0 0 0 4px rgba(215, 255, 74, .12)
    }
    
    .td-news-btn {
        border: 1px solid rgba(255, 255, 255, .26);
        background: rgba(255, 255, 255, .10);
        color: #fff;
        border-radius: 10px;
        padding: 11px 16px;
        font-weight: 1000;
        cursor: pointer;
        transition: .2s
    }
    
    .td-news-btn:hover {
        background: rgba(255, 255, 255, .16);
        transform: translateY(-1px)
    }
    
    .td-news-note {
        display: none;
        margin-top: 10px;
        font-size: 12.5px;
        color: #d7ff4a;
        font-weight: 900
    }
    
    @media(max-width:980px) {
        .hero-slide{
            height: 60vh;
        }
        .hotnline{
            display:none;
        }
        
        .td-foot-grid {
            grid-template-columns: 1fr;
            gap: 18px
        }
        .td-foot-bottomGrid {
            grid-template-columns: 1fr;
            gap: 16px
        }
        .td-sky {
            height: 78px
        }
    }


.float-contact{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Button */
.float-contact a{
  width:58px;
  height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;  
  position:relative;
  transition:0.3s;
}

/* Hover */
.float-contact a:hover{
  transform:scale(1.1);
}

/* Icon */
.float-contact img{
  width:50px;
  height:50px;
}

/* Animation wave */
.float-contact a::before{
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  border-radius:50%;
  background:rgba(0,150,255,0.3);
  animation:wave 2s infinite;
  z-index:-1;
}

/* Different colors */
.fc-phone::before{
  background:rgba(0,200,0,0.35);
}

.fc-zalo::before{
  background:rgba(0,120,255,0.35);
}

.fc-mess::before{
  background:rgba(0,80,255,0.35);
}

/* Wave animation */
@keyframes wave{
  0%{
    transform:scale(1);
    opacity:0.7;
  }
  70%{
    transform:scale(1.6);
    opacity:0;
  }
  100%{
    opacity:0;
  }
}

/* Floating animation */
.float-contact a{
  animation:float 3s ease-in-out infinite;
}

.float-contact a:nth-child(2){
  animation-delay:.4s;
}

.float-contact a:nth-child(3){
  animation-delay:.8s;
}

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

/* Mobile */
@media(max-width:768px){

.float-contact{
  bottom:70px;
  right:12px;
}

.float-contact a{
  width:52px;
  height:52px;
}

.float-contact img{
  width:50px;
  height:50px;
}

}
/* ====== POPUP DETAIL: extra texts / badges ====== */
.dientandat_levelBox{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(11,77,187,.06);
  border:1px solid rgba(11,77,187,.14);
  min-width: 260px;
  align-items:flex-start;
}

.dientandat_levelBig{
  font-weight:950;
  font-size:14px;
  color:#0b4dbb;
  line-height:1.1;
}
.dientandat_levelSmall{
  font-weight:850;
  font-size:13px;
  color:#0b1b3a;
}
.dientandat_levelNote{
  font-size:12px;
  color:rgba(11,27,58,.70);
}

.dientandat_closeWrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.dientandat_backHint{
  font-size:12px;
  color:rgba(11,27,58,.70);
  max-width:180px;
  text-align:right;
}

.dientandat_actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
}

.dientandat_actionCol{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex: 1 1 260px;
  min-width:260px;
}

.dientandat_actionHint{
  font-size:12px;
  font-weight:800;
  color:rgba(11,27,58,.75);
}

/* mobile */
@media (max-width: 720px){
  .dientandat_levelBox{ display:none; } /* nhỏ quá thì ẩn badge góc phải */
  .dientandat_backHint{ display:none; }
  .dientandat_actionCol{ min-width: 100%; }
}
/* ===== Form modal header brand ===== */
.dientandat_fHead{
  display:flex;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
  width:100%;
}

.dientandat_fBrand{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(11,77,187,.06);
  border:1px solid rgba(11,77,187,.14);
  max-width:420px;
}

.dientandat_fLogo{
  width:44px;height:44px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(11,27,58,.12);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  flex:0 0 44px;
}
.dientandat_fLogo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.dientandat_fBrandName{
  font-weight:950;
  font-size:12px;
  letter-spacing:.2px;
  color:#0b1b3a;
  line-height:1.2;
  text-transform:uppercase;
}
.dientandat_fBrandSub{
  font-size:12px;
  color:rgba(11,27,58,.72);
  margin-top:2px;
  line-height:1.35;
}

@media (max-width: 720px){
  .dientandat_fHead{ flex-direction:column; }
  .dientandat_fBrand{ max-width:100%; width:100%; }
}
/* ===== Custom Select ===== */
.dientandat_selectWrap{
  position:relative;
  width:100%;
}

.dientandat_selectWrap select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  padding:14px 48px 14px 16px;
  border-radius:14px;

  font-size:14px;
  font-weight:600;
  color:#0b1b3a;

  background:linear-gradient(180deg,#ffffff,#f4f7fb);
  border:1.5px solid rgba(11,77,187,.25);

  transition:all .25s ease;
  cursor:pointer;
}

/* Hover */
.dientandat_selectWrap select:hover{
  border-color:#0b4dbb;
  box-shadow:0 4px 14px rgba(11,77,187,.15);
}

/* Focus */
.dientandat_selectWrap select:focus{
  outline:none;
  border-color:#0b4dbb;
  box-shadow:0 0 0 3px rgba(11,77,187,.15);
}

/* Custom Arrow */
.dientandat_selectWrap::after{
  content:"▾";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  font-weight:900;
  color:#0b4dbb;
  pointer-events:none;
  transition:.2s;
}

/* Khi focus xoay mũi tên */
.dientandat_selectWrap select:focus + .dummy,
.dientandat_selectWrap:focus-within::after{
  transform:translateY(-50%) rotate(180deg);
}
/* Overlay */
.tdpromo_overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

/* Modal */
.tdpromo_modal{
  width:900px;
  max-width:95%;
  background:#fff;
  border-radius:18px;
  display:flex;
  overflow:hidden;
  position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.3);
}

/* Close button */
.tdpromo_close{
  position:absolute;
  top:15px;
  right:15px;
  background:none;
  border:none;
  font-size:26px;
  cursor:pointer;
}

/* LEFT COLUMN */
.tdpromo_left{
  flex:1;
  background:linear-gradient(135deg,#0b4dbb,#07a3ff);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}

.tdpromo_left img{
  max-width:200px;
  height:auto;
}

/* RIGHT COLUMN */
.tdpromo_content{
  flex:1.3;
  padding:50px 40px;
}

.tdpromo_badge{
  display:inline-block;
  background:#eef4ff;
  color:#0b4dbb;
  padding:6px 14px;
  border-radius:50px;
  font-weight:600;
  font-size:13px;
  margin-bottom:15px;
}

.tdpromo_title{
  font-size:30px;
  line-height:1.3;
  margin-bottom:15px;
}

.tdpromo_title span{
  color:#ff3c00;
}

.tdpromo_desc{
  color:#666;
  margin-bottom:25px;
}

/* Buttons */
.tdpromo_buttons{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

.tdpromo_btn{
  padding:12px 22px;
  border-radius:50px;
  text-decoration:none;
  font-weight:600;
  transition:.3s;
}

.tdpromo_primary{
  background:#ff3c00;
  color:#fff;
}

.tdpromo_primary:hover{
  background:#e23200;
}

.tdpromo_outline{
  border:2px solid #0b4dbb;
  color:#0b4dbb;
}

.tdpromo_outline:hover{
  background:#0b4dbb;
  color:#fff;
}

/* Responsive */
@media(max-width:768px){
  .tdpromo_modal{
    flex-direction:column;
  }

  .tdpromo_left{
    padding:25px;
  }

  .tdpromo_content{
    padding:30px 20px;
  }
}
.hero-actions a{ touch-action: manipulation; }
/* ===== Fullscreen Loading / Success Overlay ===== */
.ddLoading, .ddSuccess{
  position: fixed;
  inset: 0;
  z-index: 999999; /* luôn nằm trên tất cả modal */
  display: none;
  place-items: center;
  background: rgba(2, 12, 27, .55);
  backdrop-filter: blur(6px);
}

.ddLoading.is-show, .ddSuccess.is-show{
  display: grid;
}

.ddLoading__card, .ddSuccess__card{
  width: min(460px, 92vw);
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  padding: 18px 18px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  transform: translateY(8px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

.ddLoading.is-show .ddLoading__card,
.ddSuccess.is-show .ddSuccess__card{
  transform: translateY(0);
  opacity: 1;
}

.ddLoading__spin{
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(15,23,42,.16);
  border-top-color: var(--dientandat_primary, #0ea5e9);
  animation: ddSpin .75s linear infinite;
}
@keyframes ddSpin { to { transform: rotate(360deg);} }

.ddLoading__text b,
.ddSuccess__text b{
  display:block;
  font-weight: 950;
  letter-spacing: -.2px;
  color:#0b1220;
  line-height: 1.15;
}
.ddLoading__text span,
.ddSuccess__text span{
  display:block;
  margin-top: 3px;
  font-size: 12.8px;
  color: rgba(2,12,27,.72);
  line-height: 1.35;
}

/* Success */
.ddSuccess__card{
  grid-template-columns: 52px 1fr;
  padding: 18px 18px 14px;
}

.ddSuccess__icon{
  width: 40px; height: 40px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 950;
  color: #16a34a;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.28);
}

.ddSuccess__btn{
  grid-column: 1 / -1;
  margin-top: 10px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: #0b1220;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.ddSuccess__btn:hover{ filter: brightness(1.05); }
.ddLoading, .ddSuccess{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important; /* cao nhất để không bị modal khác đè */
  display: none !important;
  place-items: center !important;
  background: rgba(2,12,27,.55) !important;
  backdrop-filter: blur(6px) !important;
}

.ddLoading.is-show, .ddSuccess.is-show{
  display: grid !important;
}
@media (max-width: 767px) {

  html,
  body {
    -webkit-text-size-adjust: 100%;
  }

  /* Overlay */
  .dientandat_overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 10px !important;
    background: rgba(8, 15, 30, 0.72) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  .dientandat_overlay.dientandat_overlayShow {
    display: flex !important;
  }

  /* Modal */
  .dientandat_modal {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    overflow: visible !important;
    display: block !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  /* Top */
  .dientandat_modalTop {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: #ffffff !important;
    padding: 14px 14px 12px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .dientandat_modalTitle {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .dientandat_closeWrap {
    flex: 0 0 auto !important;
  }

  .dientandat_x {
    white-space: nowrap !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  /* Body */
  .dientandat_modalBody {
    display: block !important;
    padding: 14px !important;
    overflow: visible !important;
    min-height: auto !important;
    box-sizing: border-box !important;
  }

  /* Image block */
  .dientandat_mImg {
    width: 100% !important;
    display: block !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    flex: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .dientandat_mImg img,
  #dientandat_dImg {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Content box */
  .dientandat_mBox {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  #dientandat_dKicker {
    font-size: 13px !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
  }

  #dientandat_dHeading {
    font-size: 16px !important;
    line-height: 1.35 !important;
    margin: 6px 0 8px !important;
    word-break: break-word !important;
  }

  #dientandat_dInfo,
  #dientandat_dInfo div {
    font-size: 14px !important;
    line-height: 1.65 !important;
    word-break: break-word !important;
  }

  /* Actions */
  .dientandat_actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 16px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
  }

  .dientandat_actionCol {
    width: 100% !important;
    flex: none !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .dientandat_a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    position: relative !important;
    z-index: 4 !important;
  }

  .dientandat_aGhost {
    margin-top: 2px !important;
  }

  /* Ngăn phần tử fixed khác đè lên modal */
  .dientandat_overlay *,
  .dientandat_modal *,
  .dientandat_modalTop *,
  .dientandat_modalBody * {
    pointer-events: auto !important;
  }

  body.dientandat_modal_open .hotline-phone-ring-wrap,
  body.dientandat_modal_open .phone-ring,
  body.dientandat_modal_open .zalo-chat-widget,
  body.dientandat_modal_open .zalo-float,
  body.dientandat_modal_open .messenger-float,
  body.dientandat_modal_open .cta-fixed,
  body.dientandat_modal_open .floating-contact,
  body.dientandat_modal_open .float-contact,
  body.dientandat_modal_open .mobile-toolbar,
  body.dientandat_modal_open .call-now-button,
  body.dientandat_modal_open .button-contact-vr,
  body.dientandat_modal_open .social-fixed,
  body.dientandat_modal_open .contact-fixed {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Nếu ảnh hoặc text quá dài vẫn không vỡ layout */
  .dientandat_modal,
  .dientandat_modalTop,
  .dientandat_modalBody,
  .dientandat_mImg,
  .dientandat_mBox,
  .dientandat_actions,
  .dientandat_actionCol {
    overflow-wrap: break-word !important;
  }
}