:root {
    --azure: #22A0FE;
    --cobalt: #1452AB;
    --dark: #282828;
    --orange: #FF6B2B;
    --green: #06C755;
    --white: #FFFFFF;
    --light-bg: #F0F7FF;
    --warm-bg: #FFF8F5;
    --gray: #888888;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: 'Nunito', sans-serif; color: var(--dark); overflow-x: hidden; }

  .sticky-header {
    position: fixed; top: 0; width: 100%; z-index: 999;
    background: rgba(255,255,255,0.97); backdrop-filter: blur(8px);
    padding: 10px 20px; display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
    border-bottom: 3px solid var(--azure);
  }
  .sticky-header .logo-wrap { display: flex; align-items: center; gap: 10px; }
  .sticky-header .logo-img { height: 50px; width: 96px; display: block; }
  .sticky-cta {
    background: var(--green); color: white; border: none; padding: 10px 20px;
    border-radius: 50px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 14px;
    cursor: pointer; text-decoration: none;
    animation: pulse-green 2s infinite;
  }
  @keyframes pulse-green { 0%,100%{box-shadow:0 0 0 0 rgba(6,199,85,0.5)} 50%{box-shadow:0 0 0 10px rgba(6,199,85,0)} }

  /* HERO - Clean bright aesthetic */
  .hero {
    margin-top: 60px;
    background: linear-gradient(160deg, #E8F4FF 0%, #F0F7FF 40%, white 100%);
    padding: 80px 20px 60px; position: relative; overflow: hidden;
  }
  .hero-bg-pattern {
    position: absolute; top: 0; right: 0; width: 50%; height: 100%;
    background: linear-gradient(135deg, rgba(34,160,254,0.08) 0%, rgba(20,82,171,0.05) 100%);
    clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  .hero-bubbles {
    position: absolute; top: 20px; right: 10%;
  }
  .bubble {
    position: absolute; border-radius: 50%; opacity: 0.15;
    background: var(--azure);
    animation: floatBubble 6s ease-in-out infinite;
  }
  .bubble:nth-child(1) { width: 120px; height: 120px; top: 0; right: 0; animation-delay: 0s; }
  .bubble:nth-child(2) { width: 80px; height: 80px; top: 80px; right: 100px; animation-delay: 1s; }
  .bubble:nth-child(3) { width: 50px; height: 50px; top: -20px; right: 150px; animation-delay: 2s; }
  @keyframes floatBubble { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-15px) scale(1.05)} }

  .hero-inner { max-width: 800px; margin: 0 auto; position: relative; z-index: 2; }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(6,199,85,0.12); border: 1.5px solid var(--green);
    color: #058a3a; padding: 6px 16px; border-radius: 50px;
    font-size: 13px; font-weight: 800; letter-spacing: 0.5px; margin-bottom: 24px;
    animation: fadeIn 0.6s ease;
  }
  @keyframes fadeIn { from{opacity:0;transform:translateY(-15px)} to{opacity:1;transform:translateY(0)} }
  @keyframes slideUp { from{opacity:0;transform:translateY(25px)} to{opacity:1;transform:translateY(0)} }

  .hero h1 {
    font-family: 'Barlow Condensed', sans-serif; font-size: clamp(30px,5.5vw,60px);
    font-weight: 900; color: var(--dark); line-height: 1.1; margin-bottom: 20px;
    animation: slideUp 0.7s ease 0.2s both;
  }
  .hero h1 .highlight { color: var(--azure); }
  .hero h1 .underline-em {
    color: var(--dark);
  }
  .hero-tagline {
    font-size: 18px; font-weight: 600; color: #555; margin-bottom: 12px;
    animation: slideUp 0.7s ease 0.3s both;
  }
  .hero-price {
    display: inline-block; background: var(--warm-bg); border: 2px dashed var(--orange);
    padding: 10px 20px; border-radius: 12px; margin-bottom: 32px;
    font-weight: 800; font-size: 16px; color: var(--orange);
    animation: slideUp 0.7s ease 0.35s both;
  }
  .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; animation: slideUp 0.7s ease 0.4s both; }
  .btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--green); color: white; padding: 16px 32px; border-radius: 50px;
    font-size: 17px; font-weight: 800; text-decoration: none;
    box-shadow: 0 8px 24px rgba(6,199,85,0.4); transition: all 0.2s;
  }
  .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(6,199,85,0.5); }
  .btn-secondary {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--cobalt); color: white; padding: 16px 32px; border-radius: 50px;
    font-size: 15px; font-weight: 700; text-decoration: none; transition: all 0.2s;
  }
  .btn-secondary:hover { background: var(--azure); transform: translateY(-3px); }

  /* PACKAGES */
  .packages { background: white; padding: 70px 20px; }
  .section-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(26px,4vw,42px); font-weight: 900; text-align: center; margin-bottom: 12px; }
  .section-title .blue { color: var(--azure); }
  .section-sub { text-align: center; color: var(--gray); font-size: 16px; margin-bottom: 48px; }
  .pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; }
  @media(max-width:760px) { .pkg-grid { grid-template-columns: 1fr; } }
  .pkg-card {
    border: 2px solid #e8f0ff; border-radius: 20px; padding: 32px 24px; text-align: center;
    transition: all 0.3s; position: relative; overflow: hidden;
  }
  .pkg-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--azure), var(--cobalt));
  }
  .pkg-card:hover { transform: translateY(-6px); border-color: var(--azure); box-shadow: 0 16px 48px rgba(34,160,254,0.15); }
  .pkg-card.popular { border-color: var(--orange); }
  .pkg-card.popular::before { background: linear-gradient(90deg, var(--orange), #ff9a5c); }
  .popular-badge {
    position: absolute; top: 16px; right: 16px; background: var(--orange);
    color: white; font-size: 11px; font-weight: 800; padding: 4px 10px;
    border-radius: 50px; letter-spacing: 0.5px;
  }
  .pkg-icon { font-size: 48px; margin-bottom: 16px; }
  .pkg-name { font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 900; color: var(--dark); margin-bottom: 6px; }
  .pkg-room { color: var(--azure); font-weight: 700; font-size: 15px; margin-bottom: 16px; }
  .pkg-items { list-style: none; text-align: left; margin-bottom: 20px; }
  .pkg-items li { font-size: 14px; color: #555; padding: 4px 0; display: flex; gap: 8px; align-items: flex-start; }
  .pkg-items li::before { content: '✓'; color: var(--azure); font-weight: 900; flex-shrink: 0; }
  .pkg-price { font-family: 'Barlow Condensed', sans-serif; font-size: 36px; font-weight: 900; color: var(--cobalt); }
  .pkg-unit { font-size: 13px; color: var(--gray); font-family: 'Nunito', sans-serif; font-weight: 600; }

  /* PRICING TABLE */
  .pricing-section { background: var(--light-bg); padding: 70px 20px; }
  .price-table { max-width: 700px; margin: 0 auto 40px; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.08); }
  .price-table table { width: 100%; border-collapse: collapse; }
  .price-table th { background: var(--cobalt); color: white; padding: 16px 20px; text-align: left; font-size: 15px; font-weight: 700; }
  .price-table td { padding: 14px 20px; border-bottom: 1px solid #e8f0ff; background: white; font-size: 15px; }
  .price-table tr:last-child td { border-bottom: none; }
  .price-table .price-val { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 900; color: var(--cobalt); }
  .price-table .highlight-row td { background: #EBF6FF; }
  .price-note-box {
    max-width: 700px; margin: 0 auto 40px;
    background: rgba(255,107,43,0.08); border: 2px solid rgba(255,107,43,0.3);
    border-radius: 12px; padding: 16px 24px; display: flex; gap: 12px; align-items: flex-start;
  }
  .price-note-box .icon { font-size: 24px; flex-shrink: 0; }
  .price-note-box p { font-size: 15px; color: var(--dark); font-weight: 600; line-height: 1.5; }
  .pricing-cta { text-align: center; }

  /* TRUST */
  .trust-section { background: white; padding: 70px 20px; }
  .trust-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto 48px; }
  .trust-card {
    display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 16px;
    background: var(--light-bg); transition: all 0.3s;
  }
  .trust-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(34,160,254,0.15); }
  .trust-card .ti { font-size: 36px; flex-shrink: 0; }
  .trust-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 4px; color: var(--cobalt); }
  .trust-card p { font-size: 13px; color: var(--gray); line-height: 1.5; }

  /* SCHEDULE */
  .schedule-section { background: var(--dark); padding: 70px 20px; }
  .schedule-section .section-title { color: white; }
  .schedule-section .section-sub { color: rgba(255,255,255,0.6); }
  .schedule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; max-width: 800px; margin: 0 auto 40px; }
  .schedule-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 16px; padding: 24px 20px; text-align: center; }
  .schedule-card .si { font-size: 40px; margin-bottom: 12px; }
  .schedule-card h3 { color: white; font-size: 16px; font-weight: 800; margin-bottom: 6px; }
  .schedule-card p { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.5; }

  .final-box {
    max-width: 700px; margin: 0 auto; text-align: center;
    background: linear-gradient(135deg, #22A0FE22, #1452AB33);
    border: 2px solid rgba(34,160,254,0.4); border-radius: 24px; padding: 48px 32px;
  }
  .final-box h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 900; color: white; margin-bottom: 12px; }
  .final-box p { color: rgba(255,255,255,0.8); font-size: 16px; margin-bottom: 28px; }
  .final-box .ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

  .sticky-zalo {
    position: fixed; bottom: 24px; right: 24px; z-index: 998;
    background: var(--green); color: white; padding: 14px 24px; border-radius: 50px;
    font-weight: 800; font-size: 15px; text-decoration: none;
    box-shadow: 0 8px 30px rgba(6,199,85,0.5);
    display: flex; align-items: center; gap: 8px;
    animation: floatBtn 3s ease-in-out infinite;
  }
  @keyframes floatBtn { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

  footer { background: #1a1a1a; color: rgba(255,255,255,0.5); text-align: center; padding: 24px; font-size: 13px; }