:root{
  --vng:#e5a63f;          /* gold */
  --vng-2:#e5a53e;
  --gold-dark:#9f7c3e;
  --trng:#fcfcfc;          /* off-white */
  --en:#020202;
  --en-text:#020410;
  --xm-text:#6d6d6d;
  --black:#000;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;}
html{scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:hidden;max-width:100%;}
body{
  font-family:'Roboto',Helvetica,Arial,sans-serif;
  background:var(--black);
  color:var(--trng);
  line-height:normal;
  overflow-x:hidden;
  max-width:100%;
}
img{display:block;max-width:100%;height:auto;}
a{text-decoration:none;color:inherit;}

.script{font-family:'Dancing Script',cursive;}
.sans-soft{font-family:'Nunito','Segoe UI',Helvetica,sans-serif;}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 24px;}
.section{position:relative;padding:90px 0;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 22px;border:1px solid var(--vng);
  font-family:'Roboto';font-weight:600;font-size:16px;cursor:pointer;
  transition:.25s ease;white-space:nowrap;background:transparent;
}
.btn-gold{background:var(--vng);color:var(--black);}
.btn-gold:hover{background:#d4972f;}
.btn-outline{color:var(--vng);}
.btn-outline.white{color:var(--trng);}
.btn-outline:hover{background:var(--vng);color:var(--black);}
.btn .tri{width:11.5px;height:12.67px;}

/* ---------- Navbar ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:transparent;
  transition:background .3s ease;
}
header.scrolled{
  background:rgba(0,0,0,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(229,166,63,.18);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px;gap:24px;}
.brand{display:flex;gap:5px;align-items:baseline;font-size:42px;line-height:1;white-space:nowrap;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.4));}
.brand .k{color:#fff;-webkit-text-stroke:.5px #fff;}
.brand .n{color:var(--vng);-webkit-text-stroke:.5px var(--vng);}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;}
.nav-links a{
  font-family:'Nunito','Segoe UI',sans-serif;font-weight:700;font-size:16px;color:var(--trng);
  position:relative;padding:4px 0;transition:color .2s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--vng);transition:width .25s;
}
.nav-links a:hover{color:var(--vng);}
.nav-links a:hover::after{width:100%;}
.nav-right{display:flex;align-items:center;gap:18px;}
.lang{display:inline-flex;align-items:center;gap:4px;font-family:'Montserrat';font-weight:600;font-size:14px;color:var(--trng);background:none;border:0;cursor:pointer;padding:4px;}
.lang:hover{color:var(--vng);}
.lang img{width:9.5px;height:5.5px;}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:6px;}
.burger span{width:26px;height:2px;background:var(--trng);transition:.3s;}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg img{position:absolute;top:0;left:0;height:100%;width:55%;min-width:520px;object-fit:cover;}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.55) 38%,#000 60%);}
.hero .container{position:relative;z-index:1;display:flex;justify-content:flex-end;}
.hero-content{max-width:603px;width:100%;display:flex;flex-direction:column;gap:30px;}
.hero h1{font-weight:700;font-size:clamp(30px,3.4vw,48px);line-height:1.05;overflow-wrap:break-word;}
.hero h1 .gold{color:var(--vng);font-size:clamp(34px,3.9vw,55px);display:block;overflow-wrap:break-word;}
.hero .lead{font-family:'Nunito','Segoe UI',sans-serif;font-weight:600;font-size:18px;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- Generic section heading ---------- */
.eyebrow{color:var(--vng);font-weight:700;font-size:20px;}
.eyebrow.center,.h-block.center{text-align:center;}
.h-block h2{font-weight:700;font-size:30px;color:var(--trng);line-height:1.2;}
.h-block{display:flex;flex-direction:column;gap:10px;margin-bottom:40px;}

/* ---------- Busy (light) section ---------- */
.busy{background:#f1f1f1;color:#000;padding:0;}
.busy-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:466px;}
.busy-text{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:60px 24px 60px 0;}
.busy-text .big{font-weight:700;font-size:40px;line-height:1.1;color:#000;}
.busy-text .sub{font-family:'Nunito','Segoe UI',sans-serif;font-weight:600;font-size:18px;color:#000;}
.busy-text .accent{font-weight:700;font-size:30px;color:var(--gold-dark);line-height:1.15;}
.busy-img{position:relative;}
.busy-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ---------- My Story ---------- */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.story-grid img{width:100%;border-radius:4px;object-fit:cover;}
.story-text{display:flex;flex-direction:column;gap:34px;}
.story-text .hl{font-weight:700;font-size:24px;line-height:1.35;}
.story-text .p{font-family:'Nunito','Segoe UI',sans-serif;font-weight:600;font-size:18px;}

/* ---------- The System ---------- */
.system-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:48px;margin-top:10px;}
.scard{width:200px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;}
.scard img,.scard .ico{height:100px;width:auto;}
.scard .ico{width:100px;background-size:100% 100%;background-repeat:no-repeat;}
.scard h3{font-weight:700;font-size:20px;}
.scard p{font-family:'Nunito','Segoe UI',sans-serif;font-weight:400;font-size:18px;}

/* ---------- Impact / Galary images ---------- */
.full-svg{width:100%;height:auto;}
.quote{color:var(--vng);font-size:18px;text-align:center;margin-top:30px;}

/* ---------- Experience ---------- */
.exp{position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);}
.exp-bg{position:absolute;inset:0;z-index:0;}
.exp-bg img{width:100%;height:100%;object-fit:cover;}
.exp-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.1),rgba(0,0,0,.45) 45%,rgba(0,0,0,.82) 100%);}
.exp .container{position:relative;z-index:1;display:flex;justify-content:flex-end;}
.exp-content{max-width:760px;display:flex;flex-direction:column;gap:34px;padding:60px 0;}
.exp-icons{display:flex;flex-wrap:wrap;gap:36px;}
.exp-ico{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}
.exp-ico img,.exp-ico .ico{height:62px;width:auto;}
.exp-ico .ico{width:62px;background-size:100% 100%;background-repeat:no-repeat;}
.exp-ico span{font-weight:700;font-size:16px;text-align:center;}
.ticket{width:162px;height:auto;}

/* ---------- Decision ---------- */
.decision{position:relative;overflow:hidden;min-height:440px;display:flex;align-items:center;}
.decision-bg{position:absolute;inset:0;z-index:0;}
.decision-bg img{height:100%;width:55%;min-width:520px;object-fit:cover;object-position:center top;}
.decision-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,.6) 45%,#000 60%);}
.decision .container{position:relative;z-index:1;display:flex;justify-content:flex-end;}
.decision-content{max-width:603px;display:flex;flex-direction:column;gap:34px;padding:50px 0;}
.decision-content .big{font-weight:700;font-size:40px;line-height:1.15;}
.decision-content .big .gold{color:var(--vng);}

/* ---------- Consultation form ---------- */
.consult{padding:90px 0;}
.consult-wrap{max-width:906px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:42px;}
.consult h2{font-weight:700;font-size:40px;text-align:center;}
.consult h2 .gold{color:var(--vng);}
.consult .sub{font-family:'Nunito','Segoe UI',sans-serif;font-weight:600;font-size:18px;text-align:center;}
.form{width:100%;display:flex;flex-direction:column;gap:14px;}
.form-row{display:flex;gap:14px;flex-wrap:wrap;}
.field{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px;}
.field .lbl{font-family:'Roboto';font-weight:500;font-size:16px;color:var(--trng);padding:2px 4px;}
.field .ctrl{
  display:flex;align-items:center;gap:8px;height:44px;
  background:var(--trng);border:1px solid var(--vng);border-radius:20px;padding:0 12px 0 16px;
}
.field .ctrl img,.field .ctrl .ico{width:18px;height:18px;flex:0 0 18px;background-size:100% 100%;background-repeat:no-repeat;}
.field .ctrl input,.field .ctrl select{
  border:0;outline:0;background:transparent;width:100%;
  font-family:'Roboto';font-size:16px;color:#020410;
}
.field .ctrl input::placeholder{color:var(--xm-text);}
.field .ctrl select{color:var(--xm-text);cursor:pointer;-webkit-appearance:none;appearance:none;}

/* ---------- Slider (shared) ---------- */
.slider{position:relative;display:flex;align-items:center;gap:8px;margin-top:10px;}
.slider-track{
  display:flex;gap:18px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;padding:6px 2px 16px;flex:1;
  scrollbar-width:thin;scrollbar-color:var(--vng) transparent;
}
.slider-track::-webkit-scrollbar{height:8px;}
.slider-track::-webkit-scrollbar-thumb{background:var(--vng);border-radius:8px;}
.slider-track::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:8px;}
.slider-nav{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--vng);background:rgba(0,0,0,.6);color:var(--vng);
  font-size:18px;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;
}
.slider-nav:hover{background:var(--vng);color:#000;}

/* video cards */
.vcard{
  position:relative;flex:0 0 auto;width:300px;height:185px;border-radius:10px;overflow:hidden;
  cursor:pointer;scroll-snap-align:start;background:#111;
}
.vcard img{width:100%;height:100%;object-fit:cover;transition:.35s;}
.vcard:hover img{transform:scale(1.05);}
.vcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55));}
.vcard .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:58px;height:58px;border-radius:50%;background:rgba(229,166,63,.92);
  display:flex;align-items:center;justify-content:center;transition:.25s;
}
.vcard .play::before{content:"";border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #000;margin-left:4px;}
.vcard:hover .play{transform:translate(-50%,-50%) scale(1.12);background:var(--vng);}
.vcard-label{position:absolute;left:12px;bottom:10px;z-index:2;font-weight:700;font-size:15px;color:#fff;}

/* gallery cards */
.gcard{
  flex:0 0 auto;width:280px;height:200px;border-radius:10px;overflow:hidden;
  cursor:pointer;scroll-snap-align:start;background:#111;
}
.gcard img{width:100%;height:100%;object-fit:cover;transition:.35s;}
.gcard:hover img{transform:scale(1.06);}

/* ---------- Lightbox / Video modal ---------- */
.overlay{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.overlay.open{display:flex;}
.overlay .close{
  position:absolute;top:18px;right:22px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.4);color:#fff;
  font-size:24px;cursor:pointer;line-height:1;transition:.2s;z-index:210;
}
.overlay .close:hover{background:var(--vng);color:#000;border-color:var(--vng);}
.overlay .arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.4);color:#fff;font-size:24px;cursor:pointer;transition:.2s;z-index:210;
  display:flex;align-items:center;justify-content:center;
}
.overlay .arrow:hover{background:var(--vng);color:#000;border-color:var(--vng);}
.overlay .arrow.prev{left:18px;}
.overlay .arrow.next{right:18px;}
.overlay img.lb-img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:6px;}
.overlay .video-wrap{position:relative;width:min(900px,92vw);aspect-ratio:16/9;}
.overlay .video-wrap iframe{width:100%;height:100%;border:0;border-radius:8px;}
.lb-counter{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;opacity:.8;z-index:210;}

/* ---------- Footer ---------- */
footer{border-top:1px solid rgba(255,255,255,.15);padding:28px 0;}
.foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.foot .name{font-family:'Nunito','Segoe UI',sans-serif;font-weight:700;font-size:20px;}
.foot .name .gold{color:var(--vng-2);}
.foot .moto{font-size:18px;color:var(--trng);text-align:center;flex:1;}
.foot img{width:114px;height:auto;}

/* ---------- Floating hello ---------- */
.hello{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:10px;}
.hello .bubble{
  background:#fff;color:var(--en);border:2px solid var(--vng);border-radius:18px 18px 0 18px;
  padding:10px;font-weight:600;font-size:14px;box-shadow:0 4px 8.8px rgba(0,0,0,.18);white-space:nowrap;
}
.hello img{width:73px;height:auto;}

/* ====================================================== */
/* ===============  RESPONSIVE — TABLET  ================= */
/* ====================================================== */
@media(max-width:1024px){
  .container{padding:0 20px;}
  .hero h1{font-size:42px;}
  .hero h1 .gold{font-size:46px;}
  .system-cards{gap:36px;}
  .exp-content,.hero-content,.decision-content{max-width:520px;}
}

/* ====================================================== */
/* ============  RESPONSIVE — MOBILE (<=900)  =========== */
/* ====================================================== */
@media(max-width:900px){

  /* ---- Navbar: burger (left) · logo (center) · EN (right) ---- */
  .nav{height:68px;}
  .brand{order:2;flex:1;justify-content:center;display:flex;font-size:34px;}
  .nav-right{order:3;}
  .burger{display:flex;order:1;}
  .btn-begin{display:none;}
  .lang{font-size:13px;}

  header{scroll-padding-top:68px;}
  html{scroll-padding-top:68px;}

  /* nav wrapper must not take layout space on mobile */
  header nav{position:static;}

  /* slide-down full-width menu panel */
  .nav-links{
    position:fixed;top:68px;left:0;right:0;width:auto;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:0;list-style:none;
    background:#000;
    max-height:0;overflow:hidden;
    transform:none;transition:max-height .35s ease;
    z-index:55;box-shadow:0 12px 24px rgba(0,0,0,.55);
  }
  .nav-links.open{max-height:80vh;border-bottom:1px solid rgba(229,166,63,.25);}
  .nav-links li{width:100%;margin:0;padding:0;list-style:none;}
  .nav-links a{
    display:block;width:100%;box-sizing:border-box;
    padding:16px 24px;font-size:16px;text-align:left;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .nav-links a::after{display:none;}

  /* ---- HERO: full-width image on top, text below over dark ---- */
  .hero{min-height:0;display:block;}
  .hero-bg{position:relative;height:auto;}
  .hero-bg img{position:relative;width:100%;height:auto;min-width:0;}
  .hero-bg::after{display:none;}
  .hero .container{padding-top:28px;padding-bottom:40px;justify-content:stretch;}
  .hero-content{max-width:none;gap:22px;}
  .hero h1{font-size:38px;line-height:1.08;}
  .hero h1 .gold{font-size:40px;}
  .hero-cta{flex-direction:column;}
  .hero-cta .btn{width:100%;}

  /* ---- BUSY: single column, text then image ---- */
  .busy-grid{grid-template-columns:1fr;min-height:0;}
  .busy-text{padding:48px 0 36px;}
  .busy-text .big{font-size:34px;}
  .busy-text .accent{font-size:26px;}
  .busy-img{min-height:340px;}

  /* ---- MY STORY: text first, image below ---- */
  .story-grid{grid-template-columns:1fr;gap:0;}
  .story-text{order:1;gap:26px;padding:8px 0 32px;}
  .story-grid > img{order:2;width:100%;}
  .story-text .hl{font-size:22px;}

  /* ---- THE SYSTEM: stacked cards ---- */
  .section{padding:60px 0;}
  .system-cards{gap:40px;}
  .scard{width:100%;max-width:320px;}

  /* ---- EXPERIENCE: background covers whole section, content overlays ---- */
  .exp{display:block;}
  .exp-bg{position:absolute;inset:0;height:100%;}
  .exp-bg img{width:100%;height:100%;object-fit:cover;}
  .exp-bg::after{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.6));}
  .exp .container{justify-content:stretch;}
  .exp-content{max-width:none;padding:48px 0;gap:22px;}
  .exp-icons{
    display:grid;grid-template-columns:1fr 1fr;
    justify-items:center;
    column-gap:16px;row-gap:28px;width:100%;margin:8px 0;
  }
  .exp-ico{min-width:0;gap:10px;max-width:200px;}
  .exp-ico span{font-size:15px;white-space:normal;}
  .exp-content .btn{align-self:center !important;width:auto;margin-top:4px;}

  /* ---- SLIDERS on mobile ---- */
  .slider{gap:4px;}
  .slider-nav{width:34px;height:34px;font-size:15px;}
  .vcard{width:240px;height:150px;}
  .gcard{width:220px;height:160px;}
  .overlay .arrow{width:42px;height:42px;font-size:20px;}
  .overlay .arrow.prev{left:8px;}
  .overlay .arrow.next{right:8px;}

  /* ---- DECISION: background covers whole section, content overlays ---- */
  .decision{display:block;}
  .decision-bg{position:absolute;inset:0;height:100%;}
  .decision-bg img{width:100%;height:100%;min-width:0;object-fit:cover;}
  .decision-bg::after{display:block;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.72));}
  .decision .container{justify-content:stretch;}
  .decision-content{max-width:none;padding:56px 0;}
  .decision-content .big{font-size:32px;}

  /* ---- FORM: stack every field ---- */
  .consult{padding:56px 0;}
  .consult h2{font-size:30px;}
  .form-row{flex-direction:column;gap:14px;}
  .field,.field[style]{max-width:none !important;}

  /* ---- Headings ---- */
  .h-block h2{font-size:24px;}

  /* ---- Footer ---- */
  .foot{flex-direction:column;text-align:center;gap:16px;}
  .foot .moto{order:3;}

  /* ---- Floating hello smaller ---- */
  .hello{right:14px;bottom:14px;}
  .hello img{width:56px;}
  .hello .bubble{font-size:12px;padding:8px;}
}

/* ====================================================== */
/* ===========  RESPONSIVE — SMALL PHONE (<=480)  ======= */
/* ====================================================== */
@media(max-width:480px){
  .container{padding:0 18px;}
  .brand{font-size:30px;}
  .hero h1{font-size:32px;}
  .hero h1 .gold{font-size:34px;}
  .busy-text .big{font-size:28px;}
  .busy-text .accent{font-size:22px;}
  .consult h2,.decision-content .big{font-size:26px;}
  .h-block h2{font-size:22px;}
  .story-text .hl{font-size:20px;}
  .scard h3{font-size:18px;}
  .btn{font-size:15px;padding:12px 18px;}
  .eyebrow{font-size:18px;}
}

/* ---------- Logo image variant ---------- */
.brand-img{display:flex;align-items:center;height:80px;line-height:0;flex:0 0 auto;}
.brand-img img{
  height:74px !important;max-height:74px;width:auto;display:block;
  filter:drop-shadow(0 2px 10px rgba(229,166,63,.45)) drop-shadow(0 1px 2px rgba(0,0,0,.6)) contrast(1.08) saturate(1.12);
  transition:transform .25s ease, filter .25s ease;
}
.brand-img:hover img{
  transform:scale(1.05);
  filter:drop-shadow(0 3px 16px rgba(229,166,63,.7)) drop-shadow(0 1px 2px rgba(0,0,0,.6)) contrast(1.12) saturate(1.2);
}
@media(max-width:900px){
  .brand-img{order:2;flex:1;justify-content:center;height:68px;}
  .brand-img img{height:56px !important;max-height:56px;}
}
@media(max-width:480px){ .brand-img img{height:46px !important;max-height:46px;} }