/* ============================================================
   Mirai Nissey — Theme V3 · Hồng + Xanh ngọc (sakura & matcha)
   Shared design shell: tokens, buttons, header, sections, footer,
   floats, badges, animations. Page-specific styles stay inline
   in each page. Design by NEXORA.
   ============================================================ */
:root{
  --teal:#0E6B60; --teal-2:#12857A; --teal-deep:#0A5049; --teal-pale:#E7F4F1; --teal-line:#CFE7E2;
  --pink:#EE7BA4; --pink-deep:#DA5C8C; --pink-pale:#FCEAF1;
  --cream:#FCFAF5;
  --ink:#1E332F; --grey:#6F7F7B; --line:#E4EBE8; --bg:#FBFCFB; --red:#D6455D;
  /* compat aliases so legacy inline/JS color refs stay on-brand */
  --green:#2E9E6B; --steel:var(--teal-2); --orange:var(--pink-deep); --hivis:#EFB93B;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Be Vietnam Pro',sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1140px;margin:0 auto;padding:0 22px}
.mut{color:var(--grey);font-size:13.5px}

/* mockup annotation strip */
.mockstrip{background:#0A2622;color:#fff;font-size:12px;display:flex;gap:14px;align-items:center;padding:7px 16px}
.mockstrip b{color:var(--pink)}
.mockstrip a{margin-left:auto;color:var(--pink);text-decoration:underline}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14.5px;padding:12px 24px;border-radius:12px;border:none;cursor:pointer;transition:.18s}
.btn-pink{background:var(--pink-deep);color:#fff;box-shadow:0 8px 18px rgba(218,92,140,.28)}
.btn-pink:hover{background:#C74A7B}
.btn-teal{background:var(--teal-2);color:#fff}
.btn-teal:hover{background:var(--teal)}
.btn-outline{background:#fff;border:1.5px solid var(--teal-line);color:var(--teal)}
.btn-outline:hover{border-color:var(--pink-deep);color:var(--pink-deep)}
.btn-ghost{background:var(--teal-pale);color:var(--teal);border:1.5px solid var(--teal-line)}
.btn-ghost:hover{background:#fff;border-color:var(--pink-deep);color:var(--pink-deep)}
/* compat aliases for legacy button classes → map onto V3 palette */
.btn-steel{background:var(--teal-2);color:#fff}
.btn-steel:hover{background:var(--teal)}
.btn-orange{background:var(--pink-deep);color:#fff;box-shadow:0 8px 18px rgba(218,92,140,.28)}
.btn-orange:hover{background:#C74A7B}
.btn-sm{padding:9px 16px;font-size:13px}

/* topbar */
.topbar{background:var(--teal-deep);color:#BFE0DA;font-size:12.5px}
.topbar .container{display:flex;justify-content:space-between;gap:12px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.topbar b{color:#FBC5D8}

/* header / nav */
.sitehead{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.sitehead .container{display:flex;align-items:center;gap:22px;padding-top:12px;padding-bottom:12px}
.logo{display:flex;align-items:center;gap:11px}
.logo img{height:46px;width:auto}
.logo .nm{font-weight:800;font-size:15.5px;letter-spacing:.6px;line-height:1.15;color:var(--teal);
  background:linear-gradient(92deg,var(--teal) 0%,var(--teal-2) 44%,var(--pink-deep) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.logo .nm small{display:block;font-weight:500;font-size:10.5px;color:var(--grey);letter-spacing:.2px;-webkit-text-fill-color:var(--grey)}
.mainnav{display:flex;gap:4px;margin-left:auto}
.mainnav a{font-weight:600;font-size:14px;padding:9px 13px;border-radius:10px;color:var(--ink)}
.mainnav a:hover{background:var(--teal-pale)}
.mainnav a.cur{background:var(--teal);color:#fff}
.navtoggle{display:none;background:none;border:1.5px solid var(--line);border-radius:10px;font-size:20px;padding:4px 12px;cursor:pointer;color:var(--teal)}

/* page hero (inner pages) */
.pagehero{background:linear-gradient(115deg,var(--teal) 0%,var(--teal-2) 58%,#178D80 100%);color:#fff;position:relative;overflow:hidden}
.pagehero .container{position:relative;padding-top:46px;padding-bottom:46px}
.crumb{font-size:12.5px;color:#CFEAE5;margin-bottom:12px}
.crumb span{cursor:pointer}
.crumb span:hover{color:#fff}

/* generic typographic bits */
.display{font-weight:800;font-size:38px;line-height:1.14;letter-spacing:-.5px}
.display em{font-style:normal;color:#FBC5D8;position:relative}
.display em::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;background:var(--pink);border-radius:2px}

/* sections */
.sec{padding:62px 0}
.sec.alt{background:var(--teal-pale)}
.kick{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--teal-2);margin-bottom:10px}
.kick::before{content:"✿";color:var(--pink)}
.h2{font-size:28px;font-weight:800;letter-spacing:-.3px;color:var(--teal-deep)}
.sec-head{margin-bottom:26px}
.sec-head h2{font-size:28px;font-weight:800;letter-spacing:-.3px;color:var(--teal-deep)}
.sec-head p{color:var(--grey);margin-top:8px;max-width:640px}
.headrow{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px;margin-bottom:26px}

/* badges */
.badge{font-size:11px;font-weight:800;letter-spacing:.6px;border-radius:999px;padding:4px 10px;white-space:nowrap;display:inline-block}
.badge-hot{background:var(--pink-deep);color:#fff}
.badge-open{background:var(--teal-pale);color:var(--teal)}

/* CTA band */
.ctaband{background:linear-gradient(110deg,var(--pink-deep),var(--pink));border-radius:20px;color:#fff;padding:38px 42px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden}
.ctaband::before{content:"✿";position:absolute;right:26px;top:-30px;font-size:120px;color:rgba(255,255,255,.16)}
.ctaband h2{font-size:26px;font-weight:800}
.ctaband p{margin-top:8px;color:#FFE6EF}

/* footer */
.sitefoot{background:var(--teal-deep);color:#BFE0DA;font-size:13.5px;margin-top:44px}
.sitefoot .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px;padding:44px 0 26px}
.sitefoot h4{color:#FBC5D8;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:12px}
.sitefoot ul{list-style:none}
.sitefoot li{margin-bottom:8px;cursor:pointer}
.sitefoot li:hover{color:#fff}
.sitefoot .bot{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #14615A;padding:16px 0;flex-wrap:wrap;color:#8FBDB5}
.foot-logo{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.foot-logo img{height:46px;border-radius:11px}
/* footer uses .logo shell too on some pages */
.sitefoot .logo img{height:46px;border-radius:11px}
.sitefoot .logo .nm{color:#fff}
.sitefoot .logo .nm small{color:#8FBDB5}

/* floating contact buttons */
.floats{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:12px;z-index:60}
.floats a{position:relative;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12.5px;text-align:center;line-height:1.05;text-decoration:none;box-shadow:0 6px 18px rgba(7,48,43,.22);transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s;animation:floatIn .5s cubic-bezier(.2,.7,.3,1) backwards}
.floats a:nth-child(1){animation-delay:.04s}
.floats a:nth-child(2){animation-delay:.11s}
.floats a:nth-child(3){animation-delay:.18s}
.floats a:nth-child(4){animation-delay:.25s}
.floats a:hover{transform:translateY(-3px) scale(1.07);box-shadow:0 12px 26px rgba(7,48,43,.3)}
.floats a:active{transform:scale(.94)}
.floats a:focus-visible{outline:3px solid rgba(255,255,255,.9);outline-offset:2px}
/* hover/focus tooltip pill — label pulled from each button's aria-label */
.floats a::after{content:attr(aria-label);position:absolute;right:calc(100% + 14px);top:50%;transform:translate(8px,-50%);background:var(--ink);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;padding:7px 12px;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;box-shadow:0 8px 20px rgba(7,48,43,.28)}
.floats a::before{content:"";position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:var(--ink);opacity:0;transition:opacity .18s}
.floats a:hover::after,.floats a:focus-visible::after{opacity:1;transform:translate(0,-50%)}
.floats a:hover::before,.floats a:focus-visible::before{opacity:1}
.floats .f-zalo{background:#0068FF;box-shadow:0 8px 20px rgba(0,104,255,.4);animation:floatIn .5s .11s cubic-bezier(.2,.7,.3,1) backwards,zaloPing 2.6s 1.2s ease-out infinite}
.floats .f-call{background:var(--pink-deep);font-size:20px;box-shadow:0 8px 20px rgba(218,92,140,.45)}
@media(max-width:600px){.floats{right:14px;bottom:14px;gap:10px}.floats a{width:50px;height:50px}}

/* ===== responsive shell ===== */
@media(max-width:960px){
  .sitefoot .grid{grid-template-columns:1fr 1fr}
  .mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;padding:10px}
  .mainnav.open{display:flex}
  .navtoggle{display:block;margin-left:auto}
  .headcta{display:none}
  .display{font-size:31px}
}
@media(max-width:600px){
  .container{padding:0 16px}
  .mockstrip{flex-wrap:wrap}
  .display{font-size:27px}
  .ctaband{padding:26px 22px}
  .ctaband h2{font-size:22px}
  .sitefoot .grid{grid-template-columns:1fr;gap:20px}
}

/* ===== animations (shared) ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes hotPulse{0%{box-shadow:0 0 0 0 rgba(218,92,140,.55)}70%{box-shadow:0 0 0 9px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
.badge-hot{animation:hotPulse 1.9s ease-out infinite}
@keyframes zaloPing{0%{box-shadow:0 8px 20px rgba(0,104,255,.4),0 0 0 0 rgba(0,104,255,.5)}70%{box-shadow:0 8px 20px rgba(0,104,255,.4),0 0 0 13px rgba(0,104,255,0)}100%{box-shadow:0 8px 20px rgba(0,104,255,.4),0 0 0 0 rgba(0,104,255,0)}}
@keyframes floatIn{from{opacity:0;transform:translateY(16px) scale(.85)}to{opacity:1;transform:none}}
@keyframes btnShine{0%,55%{transform:translateX(-130%) skewX(-18deg)}75%,100%{transform:translateX(260%) skewX(-18deg)}}
.btn-pink{position:relative;overflow:hidden}
.btn-pink::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:btnShine 4.2s ease-in-out infinite;pointer-events:none}
.rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}
}