/* ハルノ台フーズ（架空）採用LP — concept work. Self-contained; only ../concept-bar.css is shared. */
:root{
  --navy:#14213D; --navy2:#1D2F55; --navy3:#0C1529;
  --y:#FCA311; --y-dk:#C57D00; --y-soft:#FFE7B8;
  --acc:#A15C00; --cream:#FFF8EC; --cream2:#FDEFD3; --line:#EADFC9;
  --muted:#4A5568; --on-navy:#C9D1E0; --input:#5A6478; --err:#B91C1C;
  --r:12px; --hd:64px;
  --ja:"Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Noto Sans JP","Yu Gothic Medium","YuGothic",Meiryo,system-ui,sans-serif;
  --disp:"Dela Gothic One","Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  --vi:"Be Vietnam Pro","BVP Fallback",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
}
/* metric-matched fallback for Be Vietnam Pro (limits layout shift on swap) */
@font-face{font-family:"BVP Fallback";src:local("Arial"),local("ArialMT");font-weight:400;size-adjust:108.3%}
@font-face{font-family:"BVP Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700;size-adjust:104.1%}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:#fff;color:var(--navy);font-family:var(--ja);font-size:1rem;line-height:1.9;letter-spacing:.03em;line-break:strict;overflow-wrap:break-word}
:lang(vi){font-family:var(--vi);letter-spacing:0;line-height:1.7}
[lang="ja"]{font-family:var(--ja);letter-spacing:.03em;line-height:1.9}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance;line-height:1.35}
p{text-wrap:pretty}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.hd :focus-visible,.fv :focus-visible,.entry__head :focus-visible,.ft :focus-visible{outline-color:var(--y)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,5vw,40px)}
.wrap--narrow{max-width:880px}
.vi{font-size:.9375em;margin-top:.4em}
.nw{white-space:nowrap}
.t-ja,.ff-display{font-family:var(--disp);font-weight:700;font-synthesis:none;letter-spacing:.02em;font-feature-settings:"palt" 1}
.t-ja{display:block}
.t-vi{display:block}

/* skip link */
.skip{position:absolute;left:12px;top:12px;z-index:1100;padding:12px 16px;background:var(--y);color:var(--navy);font-weight:700;border-radius:8px;transform:translateY(-200%);text-decoration:none}
.skip:focus{transform:none}
main:focus{outline:none}

/* buttons */
.btn{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:48px;padding:8px 24px;border:2px solid transparent;border-radius:999px;font-weight:700;line-height:1.4;text-align:center;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,background-color .15s,color .15s}
.btn__ja{font-feature-settings:"palt" 1;word-break:keep-all}
.btn__vi{font-size:.75rem;font-weight:700}
.btn--y{background:var(--y);color:var(--navy);box-shadow:0 4px 0 var(--y-dk)}
.btn--y:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--y-dk)}
.btn--y:active{transform:translateY(4px);box-shadow:none}
.btn--line{border-color:#fff;color:#fff;background:transparent}
.btn--line:hover{background:#fff;color:var(--navy)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy2)}
.btn--outline{border-color:var(--navy);color:var(--navy);background:#fff}
.btn--outline:hover{background:var(--cream)}
.btn--sm{min-height:44px;padding:4px 18px}
.btn--sm .btn__ja{font-size:.875rem}
.btn--sm .btn__vi{font-size:.6875rem}
.btn--xl{width:100%;min-height:72px;padding:12px 56px;font-size:1.125rem}
.btn--xl .btn__vi{font-size:.8125rem}
.btn__arrow{position:absolute;right:14px;top:50%;width:32px;height:32px;margin-top:-16px;padding:7px;border-radius:50%;background:var(--navy);color:var(--y)}
.btn--line.btn--xl{font-size:1rem;min-height:64px}

/* header */
.hd{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff;border-bottom:1px solid #2A3A60}
.hd__in{display:flex;align-items:center;gap:16px;min-height:var(--hd)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;flex:none}
.logo__mark{width:36px;height:36px}
.logo__txt{display:flex;flex-direction:column;line-height:1.25}
.logo__name{font-size:1.125rem;letter-spacing:.04em}
.logo__sub{font-size:.6875rem;color:var(--on-navy);letter-spacing:.04em}
.logo__sub [lang="vi"]{letter-spacing:0}
.gnav{display:none}
.hd__cta{margin-left:auto;flex:none}
@media (min-width:900px){
  .gnav{display:block;margin-left:auto}
  .gnav ul{display:flex;gap:clamp(14px,2vw,30px)}
  .gnav a{position:relative;display:flex;flex-direction:column;align-items:center;min-height:48px;justify-content:center;text-decoration:none;line-height:1.35;white-space:nowrap}
  .gnav a span:first-child{font-size:.875rem;font-weight:700}
  .gnav a [lang="vi"]{font-size:.6875rem;color:var(--on-navy)}
  .gnav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;border-radius:2px;background:var(--y);transform:scaleX(0);transition:transform .2s}
  .gnav a:hover::after,.gnav a[aria-current]::after{transform:scaleX(1)}
  .hd__cta{margin-left:clamp(8px,1.5vw,20px)}
}

/* first view */
.fv{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding-block:clamp(28px,4vw,48px) clamp(48px,6vw,88px)}
.fv::before{content:"";position:absolute;right:-190px;top:-170px;width:320px;height:320px;border-radius:50%;border:44px solid var(--navy2)}
.fv::after{content:"";position:absolute;left:0;bottom:0;width:180px;height:56px;background:repeating-linear-gradient(-45deg,var(--navy2) 0 8px,transparent 8px 20px)}
.fv__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "visual" "lead" "act";row-gap:24px}
.fv__head{grid-area:head;container-type:inline-size}
.fv__visual{grid-area:visual}
.fv__lead{grid-area:lead}
.fv__act{grid-area:act}
.fv__eyebrow{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:6px solid var(--y);font-weight:700;font-size:.9375rem;line-height:1.5}
.fv__eyebrow [lang="vi"]{font-size:.8125rem;color:var(--on-navy);line-height:1.5}
.fv__title{margin-top:20px}
.fv__title .t-ja{font-size:clamp(2.5rem,9.4cqi,3.5rem);line-height:1.28}
.fv__title .hl{color:var(--y)}
.fv__title .t-vi{margin-top:14px;font-size:clamp(1rem,.92rem + .35vw,1.25rem);font-weight:700;line-height:1.5;color:#fff}
.fv__lead{max-width:36em;color:#E4E9F2}
.fv__lead .vi{color:#E4E9F2}
.fv__visual{position:relative;max-width:500px;width:100%;margin-inline:auto}
.fv__svg{width:100%;height:auto}
.fv__fig figcaption{margin-top:12px;font-size:.75rem;line-height:1.5;color:var(--on-navy);text-align:right}
.fv__fig figcaption [lang="vi"],.sup__fig figcaption [lang="vi"]{display:inline-block}
.fv__badges{position:relative;z-index:2;display:flex;justify-content:center;gap:10px;margin-top:-52px}
.fv__badges li{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 1 108px;min-width:0;aspect-ratio:1;padding:8px;border-radius:50%;background:var(--y);color:var(--navy);text-align:center;line-height:1.3;box-shadow:0 0 0 5px var(--navy)}
.fv__badges b{font-size:clamp(.8125rem,.6rem + 1vw,.9375rem);word-break:keep-all;font-feature-settings:"palt" 1}
.fv__badges [lang="vi"]{margin-top:3px;font-size:.6875rem;font-weight:700;line-height:1.3;text-wrap:balance}
.fv__cta{display:grid;gap:18px;max-width:480px}
.fv__micro{display:flex;gap:8px;margin-top:16px;max-width:520px;font-size:.8125rem;line-height:1.7;color:var(--on-navy)}
.fv__micro svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--y)}
.fv__micro .vi{display:block;font-size:1em;margin-top:.2em}
@media (min-width:960px){
  .fv::before{right:-140px;top:-160px;width:420px;height:420px;border-width:56px}
  .fv__in{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);grid-template-areas:"head visual" "lead visual" "act visual";grid-template-rows:auto auto 1fr;column-gap:48px;row-gap:20px}
  .fv__visual{align-self:center;max-width:none}
  .fv__cta{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;gap:16px}
  .fv__cta .btn--xl{padding-inline:20px 48px;min-height:84px}
  .fv__cta .btn--line{padding-inline:20px}
}

/* marquee */
.marquee{display:flex;align-items:center;background:var(--y);color:var(--navy);overflow:hidden}
.marquee__vp{flex:1;min-width:0;overflow:hidden}
.marquee__track{display:flex;justify-content:center}
.marquee__item{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:18px;row-gap:2px;padding:16px;text-align:center}
.marquee__ja{font-size:clamp(1.25rem,.95rem + 1.4vw,1.875rem);line-height:1.4}
.marquee__vi{font-size:.9375rem;font-weight:700}
.marquee__item[aria-hidden]{display:none}
.marquee__toggle{display:none}
.marquee.is-ready .marquee__track{justify-content:flex-start;width:max-content;animation:mq 42s linear infinite}
.marquee.is-ready .marquee__item{flex-wrap:nowrap;white-space:nowrap;padding:18px 0}
.marquee.is-ready .marquee__item[aria-hidden]{display:flex}
.marquee.is-ready .marquee__item::after{content:"";flex:none;width:14px;height:14px;margin-inline:10px 28px;border-radius:50%;background:var(--navy)}
.marquee.is-ready .marquee__toggle{display:flex}
.marquee__vp:hover .marquee__track,.marquee:focus-within .marquee__track,.marquee.is-paused .marquee__track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee__toggle{flex:none;align-items:center;gap:8px;min-height:48px;margin:8px 12px 8px 4px;padding:6px 12px;border:0;border-radius:10px;background:var(--navy);color:#fff;cursor:pointer;line-height:1.3;text-align:left}
.marquee__toggle::before{content:"";flex:none;width:12px;height:14px;border-inline:4px solid var(--y)}
.marquee.is-paused .marquee__toggle::before{width:0;height:0;border-inline:0;border-block:7px solid transparent;border-left:12px solid var(--y)}
.mq-stop,.mq-play{display:flex;flex-direction:column;font-size:.75rem;font-weight:700}
.marquee__toggle [lang="vi"]{font-size:.6875rem;font-weight:400;color:var(--on-navy)}
.mq-play,.marquee.is-paused .mq-stop{display:none}
.marquee.is-paused .mq-play{display:flex}
.marquee__toggle:focus-visible{outline-color:var(--navy)}
@media (prefers-reduced-motion:reduce){
  .marquee.is-ready .marquee__track{animation:none;width:auto;justify-content:center}
  .marquee.is-ready .marquee__item{flex-wrap:wrap;white-space:normal;padding:16px}
  .marquee.is-ready .marquee__item::after,.marquee.is-ready .marquee__item[aria-hidden]{display:none}
  .marquee.is-ready .marquee__toggle{display:none}
}

/* sections */
.sec{padding-block:clamp(72px,10vw,120px)}
.sec--cream{background:var(--cream)}
.sh{margin-bottom:clamp(32px,5vw,52px)}
.sh__mark{display:flex;gap:6px;margin-bottom:16px}
.sh__mark::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--y)}
.sh__mark::after{content:"";width:16px;height:16px;border-radius:16px 0 0 0;background:var(--navy)}
.sh h2 .t-ja{font-size:clamp(1.75rem,1.2rem + 2.3vw,2.75rem)}
.sh h2 .t-vi{margin-top:.55em;font-size:clamp(1rem,.95rem + .25vw,1.125rem);font-weight:700;color:var(--acc)}
.fict{margin-top:18px;max-width:46em;font-size:.8125rem;line-height:1.7;color:var(--muted)}
.fict [lang="vi"]{display:block;margin-top:2px}
.sec--cream .sh h2 .t-vi{color:var(--acc)}

/* about */
.about__grid{display:grid;gap:40px;align-items:center}
.about__lead{font-size:1.0625rem;font-weight:700;line-height:2;max-width:32em}
.about__txt .vi{max-width:36em;margin-top:1em}
.about__fig img{width:100%;max-width:440px;height:auto;margin-inline:auto}
@media (min-width:900px){.about__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px}}

/* numbers */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.stat{padding:22px 16px 20px;border:2px solid var(--navy);border-radius:var(--r);background:#fff;box-shadow:6px 6px 0 var(--y)}
.stat__num{white-space:nowrap;font-size:clamp(2.25rem,1.6rem + 2.2vw,3rem);line-height:1.2;letter-spacing:.01em;text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:.16em;text-underline-offset:.1em;text-decoration-skip-ink:none}
.stat__num span{font-size:.42em;margin-left:.08em}
.stat__ja{margin-top:12px;font-weight:700;font-size:.9375rem;line-height:1.6}
.stat__sub{font-size:.8125rem;word-break:keep-all}
.stat__vi{margin-top:4px;font-size:.8125rem;line-height:1.55}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.stat{padding:28px 22px 24px}}

/* work */
.cards3{display:grid;gap:20px}
.wcard{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;align-items:center;padding:24px 22px;border:2px solid var(--navy);border-radius:var(--r);background:#fff}
.wcard > p{grid-column:1 / -1}
.wcard__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--y);color:var(--navy)}
.wcard__icon svg{width:28px;height:28px}
.wcard h3{margin:0}
.wcard h3 + p{margin-top:16px}
.wcard h3 .t-ja,.sup__item h3 .t-ja{font-size:1.5rem}
.wcard h3 .t-vi,.sup__item h3 .t-vi{margin-top:4px;font-size:.9375rem;font-weight:700;color:var(--acc)}
.wcard .vi{margin-top:.6em}
@media (min-width:900px){.cards3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.note{display:flex;gap:12px;margin-top:28px;padding:18px 20px;border-radius:var(--r);background:var(--cream);border-left:6px solid var(--y)}
.note svg{flex:none;width:22px;height:22px;margin-top:3px}
.note p:first-child{font-weight:700}

/* day */
.day__grid{display:grid;gap:8px}
.day__deco{display:none}
.tl{position:relative;padding:12px clamp(16px,3vw,32px);border-radius:var(--r);background:#fff;border:2px solid var(--navy)}
.tl::before{content:"";position:absolute;left:calc(clamp(16px,3vw,32px) + 38px);top:28px;bottom:28px;width:4px;margin-left:-2px;border-radius:2px;background:var(--y)}
.tl li{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:start;padding-block:12px}
.tl li + li{border-top:1px dashed var(--line)}
.tl__time{display:grid;place-items:center;height:36px;border-radius:999px;background:var(--navy);color:#fff;font-size:1rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.is-break .tl__time{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.is-end .tl__time{background:var(--y);color:var(--navy)}
.tl__body{padding-top:3px}
.tl__ja{font-weight:700;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
.tl__body .vi{margin-top:2px;font-size:.875rem;line-height:1.6}
.is-break .tl__ja{font-weight:400}
@media (min-width:900px){
  .day__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
  .day__head{position:sticky;top:calc(var(--hd) + 32px)}
  .day__deco{display:block;width:220px;height:auto;margin-top:8px}
  .tl li{grid-template-columns:88px minmax(0,1fr);gap:20px}
  .tl::before{left:calc(clamp(16px,3vw,32px) + 44px)}
  .tl__time{height:40px;font-size:1.125rem}
}

/* support */
.sup{display:grid;gap:16px}
.sup__item{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;align-items:center;padding:24px 22px;border-radius:var(--r);background:var(--cream)}
.sup__item > p{grid-column:1 / -1}
.sup__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--navy);color:var(--y)}
.sup__icon svg{width:28px;height:28px}
.sup__item h3{margin:0}
.sup__item h3 + p{margin-top:16px}
.sup__item .vi{margin-top:.6em}
.sup__fig{display:flex;border-radius:var(--r);background:var(--navy);color:var(--on-navy);padding:18px 18px 14px}
.sup__fig figure{width:100%;display:flex;flex-direction:column;justify-content:center}
.sup__fig img{width:100%;max-width:360px;height:auto;margin-inline:auto}
.sup__fig figcaption{margin-top:8px;font-size:.75rem;text-align:right}
@media (min-width:640px){.sup{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.sup{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.small-note{margin-top:22px;font-size:.8125rem;line-height:1.7;color:var(--muted)}
.small-note .vi{display:block;font-size:1em;margin-top:2px}

/* jobs */
.jobs__label{display:flex;gap:10px;margin-bottom:20px;padding:14px 18px;border:2px solid var(--navy);border-radius:var(--r);background:#fff;font-weight:700;font-size:.9375rem;line-height:1.7}
.jobs__label svg{flex:none;width:22px;height:22px;margin-top:2px}
.jobs__label .vi{display:block;font-weight:400;font-size:.875rem}
.jobs__table{border:2px solid var(--navy);border-radius:var(--r);overflow:hidden;background:#fff}
.jobs__table table{width:100%;border-collapse:collapse}
.jobs__table caption{padding:14px 20px;background:var(--navy);color:#fff;font-weight:700;text-align:left;letter-spacing:.04em}
.jobs__table th,.jobs__table td{padding:16px 20px;text-align:left;vertical-align:top;line-height:1.8;border-top:1px solid var(--line)}
.jobs__table tr:first-child th,.jobs__table tr:first-child td{border-top:0}
.jobs__table th{width:11.5em;background:var(--cream2);font-weight:700;white-space:nowrap}
.jobs__table .pay{font-size:1.25rem;letter-spacing:.02em;box-shadow:inset 0 -.42em 0 var(--y-soft)}
@media (max-width:699.98px){
  .jobs__table th,.jobs__table td{display:block;width:auto}
  .jobs__table th{padding:10px 16px;white-space:normal}
  .jobs__table td{padding:12px 16px 18px;border-top:0}
  .jobs__table caption{padding:12px 16px}
}
.summary{margin-top:32px;padding:clamp(22px,4vw,36px);border-radius:var(--r);background:#fff;border:2px solid var(--navy);box-shadow:6px 6px 0 var(--y)}
.summary__title{font-size:1.375rem;font-weight:700;line-height:1.4}
.summary__label{margin-top:8px;font-size:.8125rem;color:var(--muted)}
.summary__dl{margin-top:18px;border-top:1px solid var(--line)}
.summary__dl div{display:grid;gap:2px;padding-block:12px;border-bottom:1px solid var(--line)}
.summary__dl dt{font-weight:700}
.summary__dl .is-pay dd{font-weight:700}
@media (min-width:700px){.summary__dl div{grid-template-columns:11em minmax(0,1fr);gap:16px}}
.summary__notes{margin-top:16px;font-size:.875rem;color:var(--muted)}

/* selection */
.steps{display:grid;gap:0}
.steps li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;padding-bottom:22px}
.steps li:not(:last-child)::before{content:"";position:absolute;left:23px;top:48px;bottom:0;width:0;border-left:3px dotted var(--navy)}
.steps__n{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--y);color:var(--navy);font-size:1.25rem}
.steps__ja{padding-top:9px;font-weight:700;line-height:1.6}
.steps__note{font-weight:400;font-size:.875rem;font-feature-settings:"palt" 1}
.steps__vi{margin-top:2px;font-size:.875rem;line-height:1.55}
.steps .is-key .steps__n{background:var(--navy);color:var(--y)}
.steps .is-last .steps__n{background:var(--navy);color:#fff}
@media (min-width:1100px){
  .steps{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
  .steps li{display:flex;flex-direction:column;align-items:flex-start;padding:20px 18px 22px 26px;background:var(--cream2);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%)}
  .steps li:first-child{padding-left:16px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%);border-radius:var(--r) 0 0 var(--r)}
  .steps li::before{display:none}
  .steps .is-key{background:var(--y-soft)}
  .steps .is-last{background:var(--navy);color:#fff}
  .steps .is-last .steps__n{background:var(--y);color:var(--navy)}
  .steps__n{width:44px;height:44px;margin-bottom:12px}
  .steps__ja{padding-top:0;font-size:1rem;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
  .steps__note{display:block;margin-top:2px;font-size:.75rem;line-height:1.5}
  .steps__vi{margin-top:6px;font-size:.78125rem;line-height:1.5}
}
.steps__foot{margin-top:24px}
.steps__note{font-weight:700}
.steps__note .vi{display:block;font-weight:400}

/* faq */
.faq{display:grid;gap:12px}
.faq details{border-radius:var(--r);background:#fff;border:2px solid transparent}
.faq details[open]{border-color:var(--navy)}
.faq summary{display:grid;grid-template-columns:40px minmax(0,1fr) 28px;gap:14px;align-items:start;padding:18px 18px 18px 16px;cursor:pointer;list-style:none;border-radius:10px}
.faq summary::-webkit-details-marker{display:none}
.faq__q,.faq__am{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-family:var(--vi);font-weight:700;font-size:1.125rem;letter-spacing:0}
.faq__q{background:var(--navy);color:var(--y)}
.faq__am{background:var(--y);color:var(--navy)}
.faq__qt{padding-top:6px;font-weight:700;line-height:1.7}
.faq__qt .vi{display:block;font-weight:400;font-size:.875rem}
.faq__qt > span:first-child{word-break:keep-all;overflow-wrap:anywhere}
.faq__pm{position:relative;width:28px;height:28px;margin-top:6px;border-radius:50%;border:2px solid var(--navy)}
.faq__pm::before,.faq__pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--navy);transition:transform .2s}
.faq__pm::after{transform:rotate(90deg)}
details[open] .faq__pm::after{transform:rotate(0)}
.faq__a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:4px 18px 22px 16px}
.faq__a > div{padding-top:6px;border-top:1px dashed var(--line)}
.faq__a > div p:first-child{padding-top:8px}
@media (min-width:700px){.faq summary{padding:20px 24px 20px 20px}.faq__a{padding:4px 70px 24px 20px}}

/* entry */
.entry{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding-block:clamp(72px,10vw,120px)}
.entry::before{content:"";position:absolute;left:-120px;bottom:-140px;width:360px;height:360px;border-radius:50%;background:var(--navy2)}
.entry::after{content:"";position:absolute;right:0;top:0;width:200px;height:72px;background:repeating-linear-gradient(-45deg,var(--y) 0 8px,transparent 8px 22px);opacity:.9}
.entry__grid{position:relative;z-index:1;display:grid;gap:36px}
.entry__head{container-type:inline-size}
.entry__title .t-ja{font-size:min(3rem,9.4cqi);line-height:1.4}
.entry__title .hl{color:var(--y)}
.entry__title .t-vi{margin-top:16px;font-size:clamp(1rem,.95rem + .3vw,1.1875rem);font-weight:700;color:#fff}
.entry__sub{margin-top:20px;color:#E4E9F2;max-width:30em}
.entry__sub .vi{display:block}
@media (min-width:1000px){
  .entry__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
  .entry__head{position:sticky;top:calc(var(--hd) + 40px)}
}
.fcard{padding:clamp(22px,4vw,44px);border-radius:16px;background:#fff;color:var(--navy);border-top:8px solid var(--y)}
.fcard__title .t-ja{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.fcard__title .t-vi{margin-top:6px;font-size:1rem;font-weight:700;color:var(--acc)}
.fnotice{margin-top:18px;padding:14px 16px;border-radius:10px;background:var(--cream);font-size:.8125rem;line-height:1.7}
.fnotice .vi{font-size:1em;margin-top:.5em}
.fsum{margin-top:20px;padding:14px 16px;border:2px solid var(--err);border-radius:10px;background:#FEF2F2;color:var(--err);font-weight:700;font-size:.9375rem}
.fsum .vi{font-weight:400}
.fsum:focus-visible{outline-color:var(--err)}
.f{margin:26px 0 0;padding:0;border:0;min-width:0}
.f__label{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-bottom:10px;padding:0;font-weight:700;line-height:1.5}
.f__vi{flex-basis:100%;font-size:.875rem;font-weight:700;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:1px 10px;border-radius:6px;border:1.5px solid var(--input);font-size:.75rem;font-weight:700;line-height:1.6;color:var(--muted);white-space:nowrap}
.badge [lang="vi"]{padding-left:6px;border-left:1px solid currentColor;font-size:.6875rem;line-height:1.3}
.badge--req{background:var(--navy);border-color:var(--navy);color:#fff}
.f__input{display:block;width:100%;min-height:54px;padding:12px 14px;border:2px solid var(--input);border-radius:10px;background:#fff;color:var(--navy);font:inherit;font-size:1rem;letter-spacing:.02em}
.f__input::placeholder{color:#6B7385;opacity:1}
.f__input:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-color:var(--navy)}
.f__input[aria-invalid="true"]{border-color:var(--err);background:#FFF7F7}
.f__help{margin-top:8px;font-size:.8125rem;line-height:1.6;color:var(--muted)}
.f__help [lang="vi"],.f__err [lang="vi"]{display:block}
.f__err{margin-top:8px;font-size:.875rem;line-height:1.6;font-weight:700;color:var(--err)}
.f__err [lang="vi"]{font-weight:400}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.choices--2{grid-template-columns:minmax(0,1fr)}
.choices--sm{grid-template-columns:repeat(6,minmax(0,1fr))}
.choices--sm .choice{grid-column:span 2}
.choices--sm .choice--half{grid-column:span 3}
.choice--wide{grid-column:1 / -1}
.choice{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border:2px solid var(--input);border-radius:10px;background:#fff;cursor:pointer;line-height:1.35;transition:background-color .15s,border-color .15s}
.choice:hover{border-color:var(--navy)}
.choice input{flex:none;appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border:2px solid var(--input);border-radius:50%;background:#fff}
.choice input:checked{border-color:var(--navy);background:var(--navy);box-shadow:inset 0 0 0 4px #fff}
.choice:has(input:checked){border-color:var(--navy);background:var(--y-soft)}
.choice:has(input:focus-visible){outline:3px solid var(--navy);outline-offset:2px}
.choice input:focus-visible{outline:none}
.choice__t{display:flex;flex-direction:column;font-weight:700;font-size:.9375rem;word-break:keep-all;overflow-wrap:anywhere}
.choice__t > span{text-wrap:balance}
.choice__t [lang="vi"]{font-size:.75rem;font-weight:400;line-height:1.35}
.choice:has(input[aria-invalid="true"]){border-color:var(--err)}
@media (min-width:560px){.choices{grid-template-columns:repeat(3,minmax(0,1fr))}.choices--2{grid-template-columns:repeat(2,minmax(0,1fr))}.choices--sm{grid-template-columns:repeat(6,minmax(0,1fr))}.choice--wide{grid-column:span 2}}
@media (max-width:374.98px){.choices{grid-template-columns:minmax(0,1fr)}.choices--sm{grid-template-columns:repeat(2,minmax(0,1fr))}.choices--sm .choice,.choices--sm .choice--half{grid-column:auto}.choices--sm .choice:last-child{grid-column:1 / -1}.fv__badges{gap:8px}.fv__badges li{padding:6px}.fv__badges [lang="vi"]{font-size:.625rem}}
.consent{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:10px;background:var(--cream)}
.consent input{flex:none;appearance:none;-webkit-appearance:none;width:26px;height:26px;margin:0;border:2px solid var(--input);border-radius:6px;background:#fff;cursor:pointer}
.consent input:checked{border-color:var(--navy);background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23FCA311' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.consent input[aria-invalid="true"]{border-color:var(--err)}
.consent label{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-weight:700;cursor:pointer;line-height:1.5}
.consent .f__ja{word-break:keep-all;overflow-wrap:anywhere}
.linkbtn{display:inline-flex;flex-direction:column;align-items:flex-start;min-height:44px;margin-top:6px;padding:4px 2px;border:0;background:none;color:var(--acc);font-size:.875rem;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.linkbtn:hover{text-decoration-thickness:2px}
.btn--submit{margin-top:30px}
.fdemo{margin-top:14px;font-size:.8125rem;line-height:1.6;color:var(--muted);text-align:center}
.fdemo [lang="vi"]{display:block}
.result{margin-top:22px;padding:24px;border:2px solid var(--navy);border-radius:var(--r);background:var(--cream)}
.result__title{font-size:1.25rem;font-weight:700;line-height:1.5}
.result__title [lang="vi"]{display:block;font-size:.9375rem}
.result__title:focus{outline:none}
.result__title:focus-visible{outline:3px solid var(--navy)}
.result p{margin-top:12px}
.result .vi{margin-top:4px}
.result__link{margin-top:20px}

/* footer */
.ft{background:var(--navy3);color:var(--on-navy);padding-block:48px 56px;font-size:.8125rem;line-height:1.8}
.ft__brand{color:#fff;font-weight:700;font-size:.9375rem}
.ft__brand [lang="vi"]{display:block;font-weight:400;font-size:.875rem;color:var(--on-navy)}
.ft__addr{margin-top:4px}
.ft__notes{margin-top:22px;padding-top:22px;border-top:1px solid #26365C;display:grid;gap:10px}
.ft__credit{margin-top:22px;display:grid;gap:4px}
.ft a{display:inline-flex;flex-direction:column;justify-content:center;min-height:44px;margin-top:6px;color:var(--y);font-weight:700;text-underline-offset:3px;line-height:1.5}
.ft a [lang="vi"]{font-size:.75rem}

/* demo dialog */
.demo-dialog{width:min(560px,calc(100% - 32px));max-height:calc(100% - 32px);padding:clamp(22px,5vw,36px);border:0;border-top:8px solid var(--y);border-radius:16px;background:#fff;color:var(--navy)}
.demo-dialog::backdrop{background:rgba(12,21,41,.72)}
.demo-dialog h2{font-size:1.25rem;font-weight:700;line-height:1.5}
.demo-dialog h2 [lang="vi"]{display:block;font-size:.9375rem;margin-top:4px}
.demo-dialog p{margin-top:12px;font-size:.9375rem}
.demo-dialog .vi{margin-top:4px}
.demo-dialog__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.demo-dialog__btns .btn{flex:1 1 180px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none}}
@media print{.hd,.marquee,.skip{display:none}.fv,.entry{background:none;color:#000}}