<style>
    :root{
      --blue:#0b4a86;
      --text:#445063;
      --muted:#6b778c;
      --bg:#ffffff;
      --shadow: 0 18px 40px rgba(15, 23, 42, .14);
      --radius: 26px;
      --container: 1200px;

      /* Giảm font 30% */
      --fontScale: .7;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:#0f172a;
      background: var(--bg);
    }
    
    /* ===================== STANDARD SPACING SYSTEM ===================== */
    /* ONLY container has horizontal padding */
    .container{
      max-width: var(--container);
      margin: 0 auto;
      padding-left: 60px;
      padding-right: 60px;
    }
    @media (max-width: 640px){
      .container{ padding-left: 16px; padding-right: 16px; }
    }

    /* Remove horizontal padding from sections (avoid double padding) */
    .hero, .why, .stats, .featured, .request, .breadcrumb{
      padding-left: 0 !important;
      padding-right: 0 !important;
      background:#fff;
    }

    /* Keep only vertical padding per section (consistent rhythm) */
    .breadcrumb{ padding-top: 14px; padding-bottom: 10px; }
    .hero{ padding-top: 54px; padding-bottom: 54px; }
    .why{ padding-top: 36px; padding-bottom: 64px; }
    .stats{ padding-top: 46px; padding-bottom: 76px; }
    .featured{ padding-top: 46px; padding-bottom: 76px; }
    .request{ padding-top: 46px; padding-bottom: 86px; }

    /* wrap should not re-add max-width/margin (container handles it) */
    .wrap{
      max-width: none;
      margin: 0;
      padding: 0;
      display:flex;
      align-items:center;
      gap: 56px;
    }

    /* ===================== BREADCRUMB ===================== */
    .breadcrumb-row{
      display:flex;
      flex-wrap: wrap;
      align-items:center;
      gap: 10px;
      font-size: 14px;
      color: rgba(15, 23, 42, .70);
      line-height: 1.55;
    }
    .crumb{
      color: rgba(15, 23, 42, .70);
      text-decoration:none;
      font-weight: 700;
    }
    .crumb:hover{ color: #0a3f77; }
    .crumb.current{
      color: rgba(15, 23, 42, .92);
      font-weight: 800;
    }
    .sep{ color: rgba(15, 23, 42, .45); font-weight: 800; }
    .breadcrumb-rule{
      margin-top: 12px;
      height: 4px;
      background: #0a3f77;
      border-radius: 999px;
      position: relative;
      overflow:hidden;
    }
    .breadcrumb-rule span{
      position:absolute; left:0; top:0; height:100%; width: 22%;
      background: #083766;
    }

    /* ===================== HERO ===================== */
    .left{ flex: 1 1 52%; min-width: 320px; }
    .right{ flex: 1 1 48%; min-width: 320px; display:flex; justify-content:flex-end; }

    .title{
      margin: 0 0 18px 0;
      font-size: 30px;
      line-height: 1.10;
      letter-spacing: -0.02em;
      font-weight: 900;
      color: #0a3f77;
    }
    .desc{
      margin: 0 0 24px 0;
      font-size: 18px;
      line-height: 1.75;
      color: #0f172a;
     
      text-align: justify;
    }
    .cta-row{
      display:flex;
      align-items:center;
      gap: 14px;
      flex-wrap: wrap;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 16px 26px;
      background: #0a3f77;
      color:#fff;
      font-weight: 800;
      border-radius: 999px;
      border: 0;
      cursor:pointer;
      text-decoration:none;
      box-shadow: 0 10px 22px rgba(10, 63, 119, .22);
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
      white-space: nowrap;
      font-size: calc(16px * var(--fontScale));
    }
    .btn:hover{
      transform: translateY(-1px);
      background:#083766;
      box-shadow: 0 14px 28px rgba(10, 63, 119, .26);
    }
    .note{
      /*font-size: calc(15px * var(--fontScale));*/
      color: #0a3f77;
      white-space: nowrap;
    }

    .photo-card{
      width: 100%;
      max-width: 560px;
      aspect-ratio: 16 / 10;
      border-radius: var(--radius);
      overflow:hidden;
      position:relative;
      /*background: #e8eef7;*/
      box-shadow: var(--shadow);
      transform: translateZ(0);
    }
    .photo-card::after{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height: 30%;
      
      opacity:.35;
      pointer-events:none;
    }
    

    /* ===================== WHY ===================== */
    .why-head{ margin: 0 0 24px; }
    .why-title{
      margin: 0 0 14px 0;
      font-size: 26px;
      line-height: 1.12;
      font-weight: 900;
      color: #0a3f77;
      letter-spacing: -0.02em;
    }
    .why-rule{
      height: 4px; background: #0a3f77; border-radius: 999px;
      position: relative; overflow: hidden;
    }
    .why-rule span{ position:absolute; left:0; top:0; height:100%; width: 34%; background: #083766; }

    .why-grid{
      text-align: justify;
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }
    .why-card{
      background: #ffffff;
      border-radius: 18px;
      padding: 18px 18px 16px;
      box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
      border: 1px solid rgba(15, 23, 42, .04);
      min-height: 240px;
    }
    .why-top{ display:flex; align-items:flex-start; gap: 12px; margin-bottom: 10px; }
    .why-badge{
      width: 44px; height: 44px; border-radius: 999px;
      display:flex; align-items:center; justify-content:center;
      font-weight: 900;
      color: #0a3f77;
      background: #eaf1ff;
      flex: 0 0 auto;
      font-size: calc(18px * var(--fontScale));
    }
    .why-card-title{
    
      margin: 0;
      font-size: calc(22px * var(--fontScale));
      line-height: 1.5;
      font-weight: 900;
      color: #111827;
      letter-spacing: -0.01em;
      text-transform: uppercase;
    }
    .why-text{
      margin: 0;
      font-size: calc(18px * var(--fontScale));
      line-height: 1.75;
      color: var(--text);
    }
    .accent-red{ color:#b42318; font-weight: 900; }

    /* ===================== STATS + SLIDER ===================== */
    .stats-wrap{
      display:grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 32px;
      align-items:center;
    }

    .stats-slider{
      position:relative;
      width: 100%;
      aspect-ratio: 16 / 10;
      border-radius: 28px;
      overflow:hidden;
      background:#e8eef7;
      box-shadow: 0 18px 44px rgba(15, 23, 42, .14);
    }
    .stats-slide{
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover;
      opacity:0;
      transform: scale(1.02);
      transition: opacity .45s ease;
      cursor: zoom-in;
      user-select:none;
    }
    .stats-slide.is-active{ opacity:1; }

    .stats-nav{
      position:absolute; top:50%; transform: translateY(-50%);
      width: 44px; height: 44px; border-radius: 999px;
      border: 1px solid rgba(255,255,255,.55);
      background: rgba(15, 23, 42, .30);
      color:#fff;
      font-size: 28px;
      line-height: 1;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
      backdrop-filter: blur(6px);
    }
    .stats-nav:hover{ background: rgba(15, 23, 42, .40); }
    .stats-nav.prev{ left: 14px; }
    .stats-nav.next{ right: 14px; }

    .stats-dots{
      position:absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
      display:flex; gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.55);
      backdrop-filter: blur(6px);
    }
    .stats-dot{
      width: 10px; height: 10px; border-radius: 999px;
      border: 0; background: rgba(15, 23, 42, .25);
      cursor:pointer;
    }
    .stats-dot.is-active{ background: rgba(10, 63, 119, .95); }

    .stats-pill{
      background: #ffffff;
      border-radius: 999px;
      padding: 26px 28px;
      box-shadow: 0 20px 44px rgba(37, 99, 235, .12);
      border: 1px solid rgba(37, 99, 235, .10);
      display:flex; align-items:center; gap: 14px;
    }
    .stats-icon{
      width: 58px; height: 58px; border-radius: 999px;
      background: #0a3f77;
      display:flex; align-items:center; justify-content:center;
      font-size: 30px;
      color:#fff;
      flex: 0 0 auto;
      box-shadow: 0 18px 34px rgba(29, 78, 216, .20);
    }
    .stats-text{ color:#0f172a; letter-spacing: -0.01em; }
    .stats-line{
      font-size: 16px;
      line-height: 1.25;
    }
    .stats-big{
      font-size: 32px;
      font-weight: bold;
      margin-right: 6px;
    }

    /* Lightbox */
    .lightbox{ position:fixed; inset:0; display:none; z-index: 9999; }
    .lightbox.is-open{ display:block; }
    .lightbox-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.62); }
    .lightbox-panel{
      position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);
      width: min(1100px, 94vw);
      height: min(780px, 82vh);
      border-radius: 16px;
      overflow:hidden;
      background:#0b1220;
      box-shadow: 0 26px 70px rgba(0,0,0,.45);
      display:flex; align-items:center; justify-content:center;
      padding: 10px;
    }
    .lightbox-img{ width:100%; height:100%; object-fit: contain; border-radius: 12px; }
    .lightbox-close{
      position:absolute; top: 10px; right: 10px;
      width: 40px; height: 40px; border-radius: 999px;
      border: 1px solid rgba(255,255,255,.35);
      background: rgba(255,255,255,.14);
      color:#fff; cursor:pointer;
      font-size: calc(18px * var(--fontScale));
      backdrop-filter: blur(6px);
    }
    .lightbox-nav{
      position:absolute; top:50%; transform: translateY(-50%);
      width: 48px; height: 48px; border-radius: 999px;
      border: 1px solid rgba(255,255,255,.45);
      background: rgba(255,255,255,.14);
      color:#fff;
      font-size: 30px;
      line-height: 1;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
      backdrop-filter: blur(6px);
    }
    .lightbox-nav:hover{ background: rgba(255,255,255,.22); }
    .lightbox-nav.prev{ left: 12px; }
    .lightbox-nav.next{ right: 12px; }

    /* ===================== FEATURED COURSES ===================== */
    .featured-head{ margin-bottom: 22px; }
    .featured-title{
      margin: 0 0 14px 0;
      font-size: 30px;
      line-height: 1.12;
      font-weight: 900;
      color: #0a3f77;
      letter-spacing: -0.02em;
    }
    .featured-rule{
      height: 4px; background: #0a3f77; border-radius: 999px;
      position: relative; overflow:hidden;
    }
    .featured-rule span{
      position:absolute; left:0; top:0; height:100%; width: 28%;
      background: #083766;
    }
    .featured-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px;
      align-items: start;
      margin-top: 26px;
    }
    .featured-box{
      border-radius: 18px;
      padding: 22px 22px;
      background: #fff;
      box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
    }
    .featured-box--left{ border: 2px solid rgba(148, 163, 184, .35); }
    .featured-box--right{
      border: 2px solid rgba(59, 130, 246, .35);
      box-shadow: 0 18px 38px rgba(59, 130, 246, .12);
    }
    .course-list{
      margin:0; padding:0; list-style:none;
      display:flex; flex-direction:column; gap: 16px;
    }
    .course-link{
      display:flex; align-items:flex-start; gap: 14px;
      text-decoration:none;
      border-radius: 16px;
      padding: 6px 8px;
      margin: -6px -8px;
      transition: background .15s ease, transform .15s ease;
    }
    .course-link:hover{
      background: rgba(10, 63, 119, .06);
      transform: translateY(-1px);
    }
    .course-badge{
      display:inline-flex; align-items:center; justify-content:center;
      padding: 4px 8px; border-radius: 8px;
      font-weight: 900;
      font-size: 10px;
      letter-spacing: .02em;
      color:#fff;
      background: #0a3f77;
      box-shadow: 0 12px 26px rgba(29, 78, 216, .20);
      flex: 0 0 auto;
      transform: translateY(2px);
    }
    .course-text{
      font-size: 18px;
      line-height: 1.45;
      color: #0f172a;
      letter-spacing: -0.01em;
    }
    .course-link:focus-visible{
      outline: 3px solid rgba(29, 78, 216, .35);
      outline-offset: 3px;
    }

    /* ===================== REQUEST FORM ===================== */
    .request-head{ margin-bottom: 22px; }
    .request-title{
      margin: 0 0 14px 0;
      font-size: 30px;
      line-height: 1.12;
      font-weight: 900;
      color: #0a3f77;
      letter-spacing: -0.02em;
    }
    .request-rule{
      height: 4px; background: #0a3f77; border-radius: 999px;
      position: relative; overflow:hidden;
    }
    .request-rule span{
      position:absolute; left:0; top:0; height:100%; width: 34%;
      background: #083766;
    }
    .request-form{ margin-top: 22px; }
    .form-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 24px;
      align-items:start;
    }
    .field label{
      display:block;
      margin: 0 0 8px 0;
      font-size: 18px;
      font-weight: 7800;
      color:#0f172a;
      letter-spacing: -0.01em;
    }
    .field input, .field textarea{
      width:100%;
      border: 2px solid rgba(148, 163, 184, .45);
      border-radius: 12px;
      padding: 14px 14px;
      font-size: calc(22px * var(--fontScale));
      line-height: 1.35;
      outline: none;
      background: #fff;
      color:#0f172a;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .field textarea{ border-radius: 14px; resize: vertical; min-height: 200px; }
    .field input::placeholder, .field textarea::placeholder{ color: rgba(15, 23, 42, .55); }
    .field input:focus, .field textarea:focus{
      border-color: rgba(10, 63, 119, .65);
      box-shadow: 0 0 0 5px rgba(10, 63, 119, .12);
    }
    .field--full{ grid-column: 1 / -1; }
    .request-btn{
      width:100%;
      border: 0;
      border-radius: 999px;
      padding: 16px 18px;
      font-size: calc(26px * var(--fontScale));
      font-weight: 900;
      color:#fff;
      background: #0a3f77;
      box-shadow: 0 18px 34px rgba(10, 63, 119, .22);
      cursor:pointer;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .request-btn:hover{
      background:#083766;
      transform: translateY(-1px);
      box-shadow: 0 22px 40px rgba(10, 63, 119, .26);
    }

    /* ===================== RESPONSIVE ===================== */
    @media (max-width: 1100px){
      .why-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .featured-grid{ grid-template-columns: 1fr; }
    }
    @media (max-width: 980px){
      .wrap{ flex-direction: column; align-items: flex-start; gap: 18px; }
      .right{ order: -1; width:100%; justify-content:flex-start; }
      .photo-card{ max-width: none; border-radius: 20px; }
      .stats-wrap{ grid-template-columns: 1fr; gap: 16px; }
      .stats-pill{ border-radius: 20px; }
      .note{ white-space: normal; }
    }
    @media (max-width: 900px){
      .form-grid{ grid-template-columns: 1fr; gap: 14px; }
    }
    @media (max-width: 640px){
      .desc{
      margin: 0 0 24px 0;
      font-size: 22px;
      line-height: 1.75;
      color: #0f172a;
      
      text-align: justify;
    }
      .title{
      margin: 0 0 18px 0;
      font-size: 26px;
      line-height: 1.10;
      letter-spacing: -0.02em;
      font-weight: 900;
      color: #0a3f77;
    }
      .breadcrumb-row{
      display:flex;
      flex-wrap: wrap;
      align-items:center;
      gap: 4px;
      font-size: 10px;
      color: rgba(15, 23, 42, .70);
      line-height: 1.55;
    }
      /* WHY: horizontal scroll cards for nicer mobile */
      .why-grid{
        grid-template-columns: repeat(1, 100%);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        gap: 14px;
      }
      
      .btn{ width: 100%; }
    }
  </style>