/* ============================================================
   Mặt tôi & 4 hiệu ứng
   ============================================================ */

:root{
  --ink:#3a2340;
  --ink-soft:#7c5f7f;
  --pink:#ff4d7e;
  --pink-deep:#d1255a;
  --brick:#f5871f;
  --brick-deep:#c9560a;
  --white:#fff;
  --font:"Segoe UI","Nunito","Trebuchet MS",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  min-height:100dvh;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1200px 620px at 12% 8%, #ffe1ee 0%, rgba(255,225,238,0) 62%),
    radial-gradient(900px 520px at 88% 14%, #fff1cd 0%, rgba(255,241,205,0) 60%),
    radial-gradient(1100px 720px at 50% 108%, #dcf3ff 0%, rgba(220,243,255,0) 62%),
    linear-gradient(165deg, #fff7fb 0%, #fff8ea 48%, #f2fbff 100%);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- nền blob ---------- */
.bg{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  transition:filter .5s ease;
}
body.party .bg{filter:saturate(1.35) hue-rotate(-12deg)}

.blob{
  position:absolute;
  display:block;
  border-radius:50%;
  filter:blur(42px);
  opacity:.6;
  animation:floatBlob 15s ease-in-out infinite;
}
.blob--1{width:44vmin;height:44vmin;background:#ffbfd6;left:-8vmin;top:-6vmin}
.blob--2{width:36vmin;height:36vmin;background:#ffe08a;right:-6vmin;top:10vh;animation-delay:-4s}
.blob--3{width:52vmin;height:52vmin;background:#a9e5ff;left:18vw;bottom:-20vmin;animation-delay:-8s}
.blob--4{width:26vmin;height:26vmin;background:#d6c4ff;right:10vw;bottom:4vh;animation-delay:-11s}

@keyframes floatBlob{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(22px,-32px,0) scale(1.12)}
}

/* ---------- khung trang ---------- */
.scene{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  min-height:100dvh;
}

/* ---------- HUD ---------- */
.hud{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  padding:16px 12px 0;
  z-index:6;
}

.meter{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px);
  box-shadow:0 10px 24px -16px rgba(58,35,64,.7), inset 0 0 0 1px rgba(255,255,255,.7);
  font-size:13px;
  font-weight:800;
  line-height:1;
  color:var(--ink);
  transition:transform .2s ease;
}
.meter.is-full{animation:meterPulse .55s ease-in-out infinite}
@keyframes meterPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}

.meter__icon{font-size:15px;line-height:1}
.meter__text{font-variant-numeric:tabular-nums;white-space:nowrap}
.meter__text b{font-size:15px;color:var(--pink-deep)}
.meter--bricks .meter__text b{color:var(--brick-deep)}

.meter__track{
  width:clamp(38px,12vw,72px);
  height:8px;
  border-radius:99px;
  background:#eddfe7;
  overflow:hidden;
  display:block;
}
.meter__fill{
  display:block;
  width:0;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#ff85a8,var(--pink));
  transition:width .22s cubic-bezier(.34,1.4,.64,1);
}
.meter--bricks .meter__fill{background:linear-gradient(90deg,#ffbe6b,var(--brick))}

/* ---------- thống kê theo tháng ---------- */
.month-row{
  flex:0 0 100%;
  display:flex;
  justify-content:center;
}
.month{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
  font-size:clamp(11px,1.8vw,13px);
  font-weight:800;
  color:var(--ink-soft);
  white-space:nowrap;
}
.month__label{
  font-weight:900;
  color:var(--ink);
  opacity:.85;
}
.month__sep{opacity:.5}
.month__item{display:inline-flex;align-items:center;gap:3px}
.month__item b{
  font-size:1.05em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.month__item--hits b{color:var(--brick-deep)}
.month::after{
  content:"";
  width:7px;
  height:7px;
  margin-left:2px;
  border-radius:50%;
  background:#c9b8c9;
  box-shadow:0 0 0 2px rgba(255,255,255,.65);
  transition:background .3s ease;
}
.month.is-live::after{background:#2fbf71}
.month.is-offline::after{background:#e0a33a}

/* ---------- sân khấu ---------- */
.stage{
  position:relative;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(16px, 4vh, 42px) 16px 0;
  min-height:280px;
}

.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.character{position:relative;z-index:2;will-change:transform}

.character__body{
  position:relative;
  transform-origin:50% 88%;
  transition:transform .6s cubic-bezier(.22,1.1,.36,1.2);
  will-change:transform;
}
.character__body.is-dancing{animation:dance .62s ease-in-out infinite}
.character__body.is-falling{
  transform:translate(0, 34px) rotate(84deg) scale(.97);
  transition:transform .55s cubic-bezier(.55,.05,.9,.4);
}

@keyframes dance{
  0%{transform:translateY(0) rotate(-8deg) scale(1,1)}
  25%{transform:translateY(-20px) rotate(7deg) scale(.97,1.04)}
  50%{transform:translateY(0) rotate(9deg) scale(1.03,.97)}
  75%{transform:translateY(-15px) rotate(-6deg) scale(.98,1.03)}
  100%{transform:translateY(0) rotate(-8deg) scale(1,1)}
}

/* vòng hào quang xoay */
.halo{
  position:absolute;
  inset:-15px;
  border-radius:48px;
  border:3px dashed rgba(255,255,255,.9);
  box-shadow:0 0 0 10px rgba(255,255,255,.16);
  pointer-events:none;
  animation:haloSpin 26s linear infinite;
}
@keyframes haloSpin{to{transform:rotate(360deg)}}

/* ảnh mặt */
.portrait{
  position:relative;
  width:clamp(94px, min(22.4vw, 19vh), 168px);
  aspect-ratio:1 / 1;
  border-radius:34px;
  border:8px solid #fff;
  background:#fff;
  overflow:hidden;
  box-shadow:
    0 26px 44px -22px rgba(58,35,64,.55),
    0 6px 0 rgba(255,255,255,.55) inset;
  animation:breath 4.6s ease-in-out infinite;
}
@keyframes breath{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-6px) scale(1.015)}
}

.portrait__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transition:opacity .3s ease;
}
.portrait.has-photo .portrait__img{opacity:1}

.portrait__fallback{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px;
  text-align:center;
  background:linear-gradient(150deg,#ffe3ef,#ffe9c9 55%,#dff4ff);
  color:var(--ink-soft);
}
.portrait__emoji{font-size:clamp(52px,16vw,84px);line-height:1;filter:drop-shadow(0 8px 10px rgba(0,0,0,.14))}
.portrait__note{font-size:clamp(9px,2.4vw,11px);font-weight:700;line-height:1.5;opacity:.8}
.portrait__note code{
  font-family:ui-monospace,Consolas,monospace;
  background:rgba(255,255,255,.75);
  padding:1px 5px;
  border-radius:6px;
}
.portrait.has-photo .portrait__fallback{display:none}

/* bóng đổ dưới chân */
.shadow{
  width:62%;
  height:16px;
  margin-top:6px;
  border-radius:50%;
  background:rgba(90,50,90,.22);
  filter:blur(7px);
  transition:transform .25s ease, opacity .25s ease;
}
.hero.is-jumping .shadow{opacity:0;transform:scale(.5)}

/* sao quay trên đầu */
.dizzy{
  position:absolute;
  left:50%;
  top:-26px;
  transform:translate(-50%,0) scale(.6);
  font-size:clamp(20px,4vw,28px);
  letter-spacing:.28em;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:3;
}
.dizzy.is-on{opacity:1;transform:translate(-50%,-8px) scale(1);animation:dizzySpin 1.7s linear infinite}
@keyframes dizzySpin{
  from{transform:translate(-50%,-8px) scale(1) rotate(-6deg)}
  to{transform:translate(-50%,-8px) scale(1) rotate(6deg)}
}

/* ---------- bong bóng thoại (dưới khuôn mặt) ---------- */
.bubble{
  position:absolute;
  top:calc(100% + 28px);
  left:50%;
  z-index:6;
  width:max-content;
  max-width:min(86vw, 420px);
  margin:0;
  padding:11px 18px;
  border-radius:20px;
  background:#fff;
  color:var(--ink);
  font-size:clamp(15px,2.4vw,20px);
  font-weight:800;
  line-height:1.35;
  text-align:center;
  box-shadow:0 16px 30px -18px rgba(58,35,64,.7), inset 0 0 0 1px rgba(58,35,64,.04);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, 12px) scale(.88);
  transition:
    opacity .18s ease,
    transform .24s cubic-bezier(.34,1.56,.64,1),
    visibility .24s;
}
.bubble.is-on{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0) scale(1);
}
.bubble::after{
  content:"";
  position:absolute;
  left:50%;
  top:-8px;
  width:18px;
  height:18px;
  background:#fff;
  border-radius:4px;
  transform:translateX(-50%) rotate(45deg);
}

/* ---------- đồng bộ nhà cung cấp ERP&BASE ---------- */
.sync{
  position:relative;
  z-index:7;
  width:min(520px, 100%);
  margin-top:clamp(78px, 10.5vh, 94px);
}

.sync__title{
  margin:0 0 11px;
  text-align:center;
  font-size:clamp(13px, 2.4vw, 17px);
  font-weight:900;
  line-height:1.3;
  letter-spacing:.005em;
  color:var(--ink);
}

.sync__title b{
  white-space:nowrap;
  background:linear-gradient(92deg, var(--pink) 0%, #ff7a3d 55%, var(--brick) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.sync__form{
  display:grid;
  gap:9px;
}

.sync-field{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  min-height:52px;
  padding:6px 18px;
  border:1px solid rgba(58,35,64,.12);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  cursor:text;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.sync-field:hover{
  background:#fff;
  box-shadow:0 10px 22px -16px rgba(58,35,64,.7);
}

.sync-field:focus-within{
  border-color:rgba(255,77,126,.5);
  background:#fff;
  box-shadow:0 0 0 3px rgba(255,77,126,.16), 0 12px 24px -18px rgba(58,35,64,.75);
}

.sync-field__icon{
  flex:none;
  display:flex;
  color:#b58aa9;
}
.sync-field__icon svg{width:17px;height:17px}

.sync-field__body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}

.sync-field__label{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  opacity:.78;
  line-height:1;
}

.sync-field__input{
  width:100%;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:15px;
  font-weight:600;
  line-height:1.45;
}

.sync-field__input::placeholder{
  color:#a98d9f;
  font-weight:500;
  opacity:.9;
}

/* nhóm + dropdown */
.sync-field--group{padding-right:9px}

.sync-field__toggle{
  flex:none;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .15s ease;
}
.sync-field__toggle:hover{background:rgba(58,35,64,.07)}
.sync-field__toggle svg{
  width:18px;
  height:18px;
  transition:transform .18s ease;
}
.sync-field__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.sync-field__toggle:focus-visible{
  outline:3px solid rgba(255,77,126,.5);
  outline-offset:2px;
}

.sync-menu{
  position:absolute;
  bottom:calc(100% + 8px);
  left:0;
  right:0;
  z-index:30;
  margin:0;
  padding:6px;
  list-style:none;
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 40px -22px rgba(58,35,64,.75), inset 0 0 0 1px rgba(58,35,64,.07);
  max-height:220px;
  overflow:auto;
}
.sync-menu[hidden]{display:none}

.sync-menu__empty{
  padding:12px;
  text-align:center;
  color:var(--ink-soft);
  font-size:13px;
  font-weight:700;
}

.sync-menu__option{
  padding:10px 13px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
.sync-menu__option:hover,
.sync-menu__option:focus-visible{
  background:#fff0f6;
  outline:none;
}

/* ---------- nút tra cứu MST inline ---------- */
.sync-field--tax{padding-right:6px}
.sync-field__btn-lookup{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:7px 13px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg, #7c3aed, #4f46e5);
  color:#fff;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 4px 12px -4px rgba(99,102,241,.6);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.sync-field__btn-lookup:hover:not(:disabled){
  filter:brightness(1.1);
  transform:translateY(-1px);
  box-shadow:0 6px 14px -3px rgba(99,102,241,.75);
}
.sync-field__btn-lookup:active:not(:disabled){
  transform:translateY(1px);
}
.sync-field__btn-lookup:disabled{
  opacity:.6;
  cursor:not-allowed;
  filter:grayscale(.3);
}

/* ---------- checkbox kiêm khách hàng ---------- */
.sync-extra{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:2px 14px 4px;
}
.sync-checkbox{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
  user-select:none;
}
.sync-checkbox input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--pink);
  cursor:pointer;
}
.sync-checkbox code{
  font-family:ui-monospace,Consolas,monospace;
  background:rgba(255,255,255,.8);
  padding:1px 4px;
  border-radius:4px;
  font-size:11px;
}

/* ---------- hộp cảnh báo trùng lặp ---------- */
.sync-warning{
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  background:#fffbeb;
  border:1px solid #fde68a;
  box-shadow:0 8px 18px -10px rgba(217,119,6,.25);
  animation:fadeSlideIn .25s ease-out;
}
.sync-warning[hidden]{display:none}
.sync-warning__icon{
  font-size:20px;
  line-height:1;
  flex:none;
}
.sync-warning__body{
  flex:1;
  font-size:12px;
  line-height:1.45;
  color:#92400e;
}
.sync-warning__title{
  font-weight:800;
  color:#b45309;
  margin-bottom:3px;
}
.sync-warning__desc{
  font-weight:600;
  margin-bottom:8px;
}
.sync-warning__confirm{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  color:#78350f;
  cursor:pointer;
}
.sync-warning__confirm input{
  accent-color:#d97706;
  cursor:pointer;
}

/* ---------- nút đồng bộ chính ---------- */
.sync-actions{
  display:flex;
  justify-content:center;
  margin-top:4px;
}
.btn-sync{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:48px;
  padding:10px 24px;
  border:0;
  border-radius:999px;
  background:linear-gradient(92deg, #ff4d7e 0%, #ff7a3d 50%, #f5871f 100%);
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:900;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(255,77,126,.75), 0 2px 0 rgba(209,37,90,.9);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
  user-select:none;
  touch-action:manipulation;
}
.btn-sync:hover:not(:disabled){
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 12px 28px -10px rgba(255,77,126,.85), 0 3px 0 rgba(209,37,90,.9);
}
.btn-sync:active:not(:disabled){
  transform:translateY(2px);
  box-shadow:0 4px 12px -6px rgba(255,77,126,.6), 0 1px 0 rgba(209,37,90,.9);
}
.btn-sync:disabled{
  filter:grayscale(.3) opacity(.85);
  cursor:not-allowed;
  transform:none;
}
.btn-sync__icon{
  font-size:18px;
  line-height:1;
}
.btn-sync__spinner{
  width:16px;
  height:16px;
  border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:btnSpin .6s linear infinite;
}
.btn-sync__spinner[hidden]{display:none}
@keyframes btnSpin{to{transform:rotate(360deg)}}

/* ---------- thông báo kết quả alert ---------- */
.sync-alert{
  padding:11px 16px;
  border-radius:14px;
  font-size:13px;
  font-weight:700;
  line-height:1.45;
  text-align:center;
  animation:fadeSlideIn .24s ease-out;
}
.sync-alert[hidden]{display:none}
.sync-alert.is-success{
  background:#ecfdf5;
  color:#065f46;
  border:1px solid #a7f3d0;
  box-shadow:0 10px 20px -12px rgba(16,185,129,.35);
}
.sync-alert.is-error{
  background:#fef2f2;
  color:#991b1b;
  border:1px solid #fecaca;
  box-shadow:0 10px 20px -12px rgba(239,68,68,.35);
}
@keyframes fadeSlideIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- nút bấm ---------- */
.controls{
  display:flex;
  justify-content:center;
  gap:clamp(12px,4vw,28px);
  padding:8px 16px 0;
  z-index:6;
}

.btn{
  --btn-shadow:var(--pink-deep);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  min-width:clamp(118px,32vw,172px);
  padding:13px 22px 11px;
  border:none;
  border-radius:26px;
  font-family:inherit;
  font-size:clamp(13px,2.3vw,17px);
  font-weight:900;
  letter-spacing:.01em;
  color:#fff;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  background:linear-gradient(180deg,#ff7aa5,#ff3d74);
  box-shadow:
    0 8px 0 var(--btn-shadow),
    0 18px 28px -12px rgba(255,61,116,.75),
    0 1px 0 rgba(255,255,255,.5) inset;
  transition:transform .12s ease, box-shadow .12s ease, filter .2s ease;
}
.btn--brick{
  --btn-shadow:var(--brick-deep);
  background:linear-gradient(180deg,#ffb46b,#ff7a1a);
  box-shadow:
    0 8px 0 var(--btn-shadow),
    0 18px 28px -12px rgba(255,122,26,.65),
    0 1px 0 rgba(255,255,255,.5) inset;
}
.btn__emoji{
  font-size:clamp(24px,5vw,32px);
  line-height:1.1;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.2));
}
.btn__text{line-height:1.15}

.btn:hover:not(:disabled){filter:brightness(1.04)}
.btn:active:not(:disabled){
  transform:translateY(6px);
  box-shadow:
    0 2px 0 var(--btn-shadow),
    0 8px 16px -10px rgba(0,0,0,.45);
}
.btn:focus-visible{outline:3px solid #6b3df0;outline-offset:4px}
.btn:disabled{
  cursor:not-allowed;
  filter:grayscale(.28) brightness(.97) opacity(.85);
  transform:none;
}

/* ---------- gợi ý ---------- */
.hint{
  margin:0;
  padding:14px 16px 20px;
  text-align:center;
  font-size:clamp(11px,1.9vw,14px);
  font-weight:700;
  line-height:1.6;
  color:var(--ink-soft);
  opacity:.85;
}
.hint b{color:var(--pink-deep)}
.hint b:last-of-type{color:var(--brick-deep)}

/* ---------- lớp hiệu ứng ---------- */
.fx-layer{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:50;
}

.fx{
  position:fixed;
  left:0;
  top:0;
  font-size:32px;
  line-height:1;
  pointer-events:none;
  will-change:transform,opacity;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 8px 10px rgba(58,35,64,.22));
  user-select:none;
}
.fx--heart{font-size:clamp(26px,4.2vw,36px)}
.fx--brick{font-size:clamp(30px,4.8vw,42px)}

.fx--burst{
  font-size:clamp(44px,10vw,86px);
  font-weight:900;
  letter-spacing:.02em;
  color:#fff;
  -webkit-text-stroke:7px #ff2d55;
  paint-order:stroke fill;
  text-shadow:0 10px 0 rgba(58,35,64,.14);
  z-index:55;
}

/* ---------- chớp đỏ khi trúng ---------- */
.flash{
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 46%, rgba(255,90,90,.85) 0%, rgba(255,70,70,.35) 34%, rgba(255,60,60,0) 68%);
}

/* ---------- màn hình hẹp / thấp ---------- */
@media (max-width:420px){
  .hud{padding-top:12px}
  .meter{padding:6px 11px;font-size:12px;gap:6px}
  .meter__track{width:34px}
  .controls{padding-bottom:0}
  .bubble{padding:9px 14px}
  .month{gap:6px;padding:5px 11px}
  .sync__title{font-size:12.5px}
  .sync-field{min-height:50px;padding:5px 16px;gap:10px}
  .sync-field__input{font-size:16px}
}

@media (max-width:360px){
  .month{gap:4px;padding:5px 9px;font-size:10px}
  .month__label{font-size:.95em}
}

@media (max-height:780px){
  .bubble{top:calc(100% + 22px)}
  .sync__title{font-size:12px;margin-bottom:8px}
  .sync__form{gap:8px}
  .sync-field{min-height:46px;padding:4px 16px}
  .sync-field__label{font-size:9px}
  .controls{padding-top:4px}
  .hint{padding:10px 16px 14px}
}

@media (max-height:640px){
  .portrait{width:clamp(80px, min(18.4vw, 14.4vh), 120px);border-width:6px;border-radius:26px}
  .halo{inset:-10px;border-radius:34px}
  .hint{padding:8px 16px 14px}
  .stage{padding-top:10px}
  .btn{padding:9px 18px 8px;border-radius:22px}
  .sync{margin-top:76px}
  .sync__title{font-size:12px;margin-bottom:8px}
  .sync__form{gap:7px}
  .sync-field{min-height:45px;padding:4px 15px}
  .sync-field__label{font-size:8.5px}
  .sync-field__icon svg{width:15px;height:15px}
}

/* ---------- tôn trọng giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .blob,.halo,.portrait{animation:none !important}
  .character__body.is-dancing{animation:none}
}