@import url('../../assets/fonts.css');

/* ============================================================
   Rabit POS — "Máy chủ trên mây" (đăng ký / đăng nhập / tài khoản / hết hạn)
   Token màu dùng chung tên với trang chủ (cam #FF9933), light mặc định,
   dark theo hệ thống + ghi đè thủ công qua [data-theme] (khóa localStorage
   `rabitpos-theme`, giống trang chủ).
   Nút chính: nền #FF9933 + chữ nâu đậm #2B1500 (tương phản 8:1) thay vì chữ
   trắng trên cam (chỉ 2,2:1).
   ============================================================ */

:root{
  --mc-primary:#FF9933;
  --mc-primary-hover:#F58A1F;
  --mc-primary-press:#E67E00;
  --mc-on-primary:#2B1500;
  --mc-primary-soft:#FFF3E4;
  --mc-primary-ink:#A85A00;      /* chữ/link cam đạt >= 5:1 trên nền trắng */
  --mc-primary-line:#FFD6A3;

  --mc-bg:#F1F5F9;
  --mc-surface:#FFFFFF;
  --mc-surface-2:#F8FAFC;
  --mc-border:#E2E8F0;
  --mc-border-strong:#CBD5E1;
  --mc-text:#0F172A;
  --mc-muted:#475569;
  --mc-subtle:#64748B;

  --mc-ok:#15803D;   --mc-ok-soft:#DCFCE7;   --mc-ok-line:#86EFAC;
  --mc-warn:#9A5B00; --mc-warn-soft:#FEF3C7; --mc-warn-line:#FCD34D;
  --mc-danger:#B91C1C; --mc-danger-soft:#FEE2E2; --mc-danger-line:#FCA5A5;
  --mc-info:#1D4ED8; --mc-info-soft:#DBEAFE; --mc-info-line:#93C5FD;
  --mc-neutral:#475569; --mc-neutral-soft:#E2E8F0;

  --mc-hero:linear-gradient(145deg,#E67E00 0%,#FF9933 58%,#FFB04D 100%);
  --mc-hero-ink:#2B1500;

  --mc-shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --mc-shadow-md:0 6px 18px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04);
  --mc-shadow-lg:0 24px 60px rgba(15,23,42,.22);

  --mc-font-display:'Be Vietnam Pro',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  --mc-font-body:'Inter','Be Vietnam Pro',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  --mc-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --mc-radius:12px;
  --mc-radius-lg:18px;
  --mc-gutter:16px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --mc-primary-soft:rgba(255,153,51,.13);
    --mc-primary-ink:#FFB04D;
    --mc-primary-line:rgba(255,153,51,.38);
    --mc-bg:#0B1220; --mc-surface:#111A2C; --mc-surface-2:#16213A;
    --mc-border:#24324A; --mc-border-strong:#37486A;
    --mc-text:#F1F5F9; --mc-muted:#CBD5E1; --mc-subtle:#94A3B8;
    --mc-ok:#4ADE80; --mc-ok-soft:rgba(74,222,128,.14); --mc-ok-line:rgba(74,222,128,.4);
    --mc-warn:#FBBF24; --mc-warn-soft:rgba(251,191,36,.14); --mc-warn-line:rgba(251,191,36,.4);
    --mc-danger:#F87171; --mc-danger-soft:rgba(248,113,113,.15); --mc-danger-line:rgba(248,113,113,.42);
    --mc-info:#93C5FD; --mc-info-soft:rgba(96,165,250,.16); --mc-info-line:rgba(96,165,250,.4);
    --mc-neutral:#CBD5E1; --mc-neutral-soft:#24324A;
    --mc-hero:linear-gradient(145deg,#0B1220 0%,#2A1B08 60%,#7A430A 100%);
    --mc-hero-ink:#FFE9CC;
    --mc-shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --mc-shadow-md:0 6px 18px rgba(0,0,0,.45);
    --mc-shadow-lg:0 24px 60px rgba(0,0,0,.65);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --mc-primary-soft:rgba(255,153,51,.13);
  --mc-primary-ink:#FFB04D;
  --mc-primary-line:rgba(255,153,51,.38);
  --mc-bg:#0B1220; --mc-surface:#111A2C; --mc-surface-2:#16213A;
  --mc-border:#24324A; --mc-border-strong:#37486A;
  --mc-text:#F1F5F9; --mc-muted:#CBD5E1; --mc-subtle:#94A3B8;
  --mc-ok:#4ADE80; --mc-ok-soft:rgba(74,222,128,.14); --mc-ok-line:rgba(74,222,128,.4);
  --mc-warn:#FBBF24; --mc-warn-soft:rgba(251,191,36,.14); --mc-warn-line:rgba(251,191,36,.4);
  --mc-danger:#F87171; --mc-danger-soft:rgba(248,113,113,.15); --mc-danger-line:rgba(248,113,113,.42);
  --mc-info:#93C5FD; --mc-info-soft:rgba(96,165,250,.16); --mc-info-line:rgba(96,165,250,.4);
  --mc-neutral:#CBD5E1; --mc-neutral-soft:#24324A;
  --mc-hero:linear-gradient(145deg,#0B1220 0%,#2A1B08 60%,#7A430A 100%);
  --mc-hero-ink:#FFE9CC;
  --mc-shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --mc-shadow-md:0 6px 18px rgba(0,0,0,.45);
  --mc-shadow-lg:0 24px 60px rgba(0,0,0,.65);
  color-scheme:dark;
}

/* ---------- Nền tảng ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body.mc{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--mc-bg);color:var(--mc-text);
  font-family:var(--mc-font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
html[data-ui="lo"] body.mc,html[data-ui="km"] body.mc,html[data-ui="th"] body.mc{line-height:1.8;}
.mc h1,.mc h2,.mc h3{font-family:var(--mc-font-display);line-height:1.2;margin:0 0 .4em;letter-spacing:-.01em;}
.mc p{margin:0 0 .75em;}
.mc a{color:var(--mc-primary-ink);text-decoration:none;font-weight:600;}
.mc a:hover{text-decoration:underline;}
.mc img,.mc svg{max-width:100%;display:block;}
.mc :focus-visible{outline:3px solid var(--mc-primary);outline-offset:2px;border-radius:6px;}
.mc [hidden]{display:none !important;}
.mc-mono{font-family:var(--mc-font-mono);font-size:.94em;}
.mc-muted{color:var(--mc-muted);}
.mc-small{font-size:.86rem;}
.mc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.mc-ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- Thanh trên ---------- */
.mc-top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--mc-surface) 90%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--mc-border);}
.mc-top-in{max-width:1120px;margin:0 auto;padding:10px var(--mc-gutter);display:flex;align-items:center;gap:10px;min-height:64px;}
.mc-logo{display:inline-flex;align-items:center;flex:none;margin-right:auto;}
.mc-logo img{height:34px;width:auto;}
.mc-logo .mc-logo-dark{display:none;}
:root[data-theme="dark"] .mc-logo .mc-logo-light{display:none;}
:root[data-theme="dark"] .mc-logo .mc-logo-dark{display:block;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mc-logo .mc-logo-light{display:none;}
  :root:not([data-theme="light"]) .mc-logo .mc-logo-dark{display:block;}
}
.mc-user{display:inline-flex;align-items:center;gap:9px;max-width:260px;padding:5px 12px 5px 5px;border:1px solid var(--mc-border);
  border-radius:999px;background:var(--mc-surface-2);font-size:.88rem;font-weight:600;color:var(--mc-text);}
.mc-user b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mc-primary);color:var(--mc-on-primary);
  font-family:var(--mc-font-display);font-size:.85rem;text-transform:uppercase;flex:none;}
.mc-user span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mc-select{appearance:none;-webkit-appearance:none;height:40px;max-width:120px;padding:0 28px 0 12px;border:1px solid var(--mc-border);border-radius:10px;
  background:var(--mc-surface-2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2394A3B8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 8px center/14px 14px;
  color:var(--mc-text);font:inherit;font-weight:600;font-size:.86rem;cursor:pointer;}
.mc-select:hover{border-color:var(--mc-primary);}
.mc-iconbtn{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--mc-border);border-radius:10px;background:var(--mc-surface-2);
  color:var(--mc-muted);cursor:pointer;flex:none;transition:border-color .15s,color .15s;}
.mc-iconbtn:hover{border-color:var(--mc-primary);color:var(--mc-primary-ink);}
.mc-iconbtn .icon-sun{display:none;}
:root[data-theme="dark"] .mc-iconbtn .icon-sun{display:block;}
:root[data-theme="dark"] .mc-iconbtn .icon-moon{display:none;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mc-iconbtn .icon-sun{display:block;}
  :root:not([data-theme="light"]) .mc-iconbtn .icon-moon{display:none;}
}
.mc-logout{display:inline-flex;align-items:center;gap:8px;}

/* ---------- Nút ---------- */
.mc-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 20px;border-radius:var(--mc-radius);
  border:1.5px solid transparent;font-family:var(--mc-font-display);font-weight:700;font-size:.97rem;line-height:1.2;cursor:pointer;text-align:center;
  text-decoration:none;transition:background .15s,border-color .15s,transform .1s,box-shadow .15s;}
.mc a.mc-btn,.mc a.mc-btn:hover{text-decoration:none;font-weight:700;}
.mc-btn:active{transform:translateY(1px);}
.mc-btn[disabled],.mc-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none;}
.mc-btn-primary,.mc a.mc-btn-primary{background:var(--mc-primary);color:var(--mc-on-primary);box-shadow:0 2px 0 rgba(168,90,0,.35);}
.mc-btn-primary:hover,.mc a.mc-btn-primary:hover{background:var(--mc-primary-hover);color:var(--mc-on-primary);}
.mc-btn-outline,.mc a.mc-btn-outline{background:var(--mc-surface);color:var(--mc-text);border-color:var(--mc-border-strong);}
.mc-btn-outline:hover,.mc a.mc-btn-outline:hover{border-color:var(--mc-primary);background:var(--mc-primary-soft);color:var(--mc-text);}
.mc-btn-ghost,.mc a.mc-btn-ghost{background:transparent;color:var(--mc-muted);border-color:transparent;}
.mc-btn-ghost:hover{background:var(--mc-surface-2);color:var(--mc-text);}
.mc-btn-danger,.mc a.mc-btn-danger{background:var(--mc-danger-soft);color:var(--mc-danger);border-color:var(--mc-danger-line);}
.mc-btn-sm{min-height:38px;padding:8px 14px;font-size:.88rem;border-radius:10px;}
.mc-btn-block{width:100%;}
.mc-btn .mc-ico{width:19px;height:19px;}
.mc-btn-google{background:#fff;color:#1F2937;border-color:#CBD5E1;font-family:var(--mc-font-body);font-weight:600;}
.mc-btn-google:hover{background:#F8FAFC;border-color:#94A3B8;}
.mc-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:mc-rot .8s linear infinite;flex:none;}
@keyframes mc-rot{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.mc-spin{animation-duration:2.4s;}.mc *{transition:none !important;}}

/* ---------- Thẻ & bố cục ---------- */
.mc-main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:28px var(--mc-gutter) 56px;}
.mc-card{background:var(--mc-surface);border:1px solid var(--mc-border);border-radius:var(--mc-radius-lg);padding:24px;box-shadow:var(--mc-shadow-sm);}
.mc-eyebrow{display:block;font-family:var(--mc-font-display);font-weight:700;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mc-primary-ink);margin-bottom:8px;}
.mc-foot{padding:18px var(--mc-gutter) 26px;text-align:center;font-size:.82rem;color:var(--mc-subtle);}
.mc-foot a{font-weight:500;color:var(--mc-subtle);text-decoration:underline;}

/* ---------- Biểu mẫu ---------- */
.mc-form{display:grid;gap:16px;}
.mc-field{display:grid;gap:6px;min-width:0;}
.mc-field > label,.mc-label{font-weight:600;font-size:.9rem;color:var(--mc-text);}
.mc-field .mc-opt{font-weight:400;color:var(--mc-subtle);}
.mc-input,.mc-sel{width:100%;height:48px;padding:0 14px;border:1.5px solid var(--mc-border-strong);border-radius:var(--mc-radius);background:var(--mc-surface);color:var(--mc-text);
  font:inherit;font-size:1rem;transition:border-color .15s,box-shadow .15s;min-width:0;}
.mc-sel{appearance:none;-webkit-appearance:none;padding-right:38px;
  background:var(--mc-surface) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2364748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 12px center/16px 16px;}
.mc-input::placeholder{color:var(--mc-subtle);opacity:.8;}
.mc-input:hover,.mc-sel:hover{border-color:var(--mc-subtle);}
.mc-input:focus,.mc-sel:focus{outline:none;border-color:var(--mc-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mc-primary) 28%,transparent);}
.mc-field[data-state="error"] .mc-input,.mc-input[aria-invalid="true"]{border-color:var(--mc-danger);}
.mc-hint{font-size:.83rem;color:var(--mc-subtle);margin:0 !important;display:flex;gap:6px;align-items:flex-start;line-height:1.45;}
.mc-hint .mc-ico{width:16px;height:16px;margin-top:2px;}
.mc-err{display:flex;gap:8px;align-items:flex-start;padding:11px 13px;border-radius:var(--mc-radius);background:var(--mc-danger-soft);border:1px solid var(--mc-danger-line);color:var(--mc-danger);font-size:.9rem;font-weight:500;margin:0 !important;}
.mc-err .mc-ico{margin-top:1px;}
.mc-pw{position:relative;display:block;}
.mc-pw .mc-input{padding-right:78px;}
.mc-pw-btn{position:absolute;right:6px;top:6px;height:36px;padding:0 11px;border:0;border-radius:8px;background:transparent;color:var(--mc-primary-ink);font:inherit;font-weight:700;font-size:.82rem;cursor:pointer;}
.mc-pw-btn:hover{background:var(--mc-primary-soft);}
.mc-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:2px;}
.mc-meter i{height:5px;border-radius:3px;background:var(--mc-border);}
.mc-meter[data-score="1"] i:nth-child(-n+1){background:var(--mc-danger);}
.mc-meter[data-score="2"] i:nth-child(-n+2){background:var(--mc-warn);}
.mc-meter[data-score="3"] i:nth-child(-n+3){background:#84B000;}
.mc-meter[data-score="4"] i{background:var(--mc-ok);}
.mc-check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--mc-muted);line-height:1.45;}
.mc-check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--mc-primary);flex:none;}
.mc-or{display:flex;align-items:center;gap:12px;margin:2px 0;color:var(--mc-subtle);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;}
.mc-or::before,.mc-or::after{content:"";flex:1;height:1px;background:var(--mc-border);}
.mc-split-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:.9rem;}

/* ô tên cửa hàng + hậu tố */
.mc-subdomain{display:flex;align-items:stretch;border:1.5px solid var(--mc-border-strong);border-radius:var(--mc-radius);background:var(--mc-surface);overflow:hidden;transition:border-color .15s,box-shadow .15s;}
.mc-subdomain:focus-within{border-color:var(--mc-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mc-primary) 28%,transparent);}
.mc-subdomain input{flex:1;min-width:0;height:46px;padding:0 4px 0 14px;border:0;background:transparent;color:var(--mc-text);font:inherit;font-family:var(--mc-font-mono);font-size:1rem;outline:none;}
.mc-subdomain .mc-suffix{display:grid;place-items:center;padding:0 14px 0 2px;color:var(--mc-subtle);font-family:var(--mc-font-mono);font-size:.95rem;white-space:nowrap;}
.mc-subdomain .mc-name-state{display:grid;place-items:center;width:42px;flex:none;}
.mc-name-state svg,.mc-name-state .mc-spin{display:none;}
.mc-field[data-name-state="checking"] .mc-subdomain{border-color:var(--mc-border-strong);}
.mc-field[data-name-state="checking"] .mc-name-state .mc-spin{display:block;color:var(--mc-subtle);}
.mc-field[data-name-state="ok"] .mc-subdomain{border-color:var(--mc-ok);}
.mc-field[data-name-state="ok"] .mc-name-state .s-ok{display:block;color:var(--mc-ok);}
.mc-field[data-name-state="taken"] .mc-subdomain,.mc-field[data-name-state="invalid"] .mc-subdomain{border-color:var(--mc-danger);}
.mc-field[data-name-state="taken"] .mc-name-state .s-bad,.mc-field[data-name-state="invalid"] .mc-name-state .s-bad{display:block;color:var(--mc-danger);}
.mc-name-msg{font-size:.84rem;margin:0 !important;min-height:1.3em;display:none;gap:6px;align-items:center;}
.mc-field[data-name-state]:not([data-name-state="idle"]) .mc-name-msg{display:flex;}
.mc-field[data-name-state="checking"] .mc-name-msg{color:var(--mc-subtle);}
.mc-field[data-name-state="ok"] .mc-name-msg{color:var(--mc-ok);font-weight:600;}
.mc-field[data-name-state="taken"] .mc-name-msg,.mc-field[data-name-state="invalid"] .mc-name-msg{color:var(--mc-danger);font-weight:600;}
.mc-name-msg [data-msg]{display:none;}
.mc-field[data-name-state="checking"] [data-msg="checking"],.mc-field[data-name-state="ok"] [data-msg="ok"],
.mc-field[data-name-state="taken"] [data-msg="taken"],.mc-field[data-name-state="invalid"] [data-msg="invalid"]{display:inline;}
.mc-url-preview{padding:10px 13px;border-radius:var(--mc-radius);background:var(--mc-surface-2);border:1px dashed var(--mc-border-strong);font-size:.88rem;color:var(--mc-muted);word-break:break-all;}
.mc-url-preview b{color:var(--mc-text);font-family:var(--mc-font-mono);font-weight:600;}

/* chọn loại hình dạng thẻ */
.mc-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;border:0;padding:0;margin:0;min-width:0;}
.mc-choice{position:relative;}
.mc-choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0;z-index:1;}
.mc-choice > span{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;border:1.5px solid var(--mc-border-strong);border-radius:var(--mc-radius);background:var(--mc-surface);
  font-weight:600;font-size:.9rem;line-height:1.25;color:var(--mc-text);transition:border-color .15s,background .15s,box-shadow .15s;}
.mc-choice > span .mc-ico{width:24px;height:24px;color:var(--mc-subtle);transition:color .15s;}
.mc-choice:hover span{border-color:var(--mc-primary);}
.mc-choice input:checked + span{border-color:var(--mc-primary);background:var(--mc-primary-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--mc-primary) 26%,transparent);}
.mc-choice input:checked + span .mc-ico{color:var(--mc-primary-ink);}
.mc-choice input:focus-visible + span{outline:3px solid var(--mc-primary);outline-offset:2px;}

/* ---------- Banner / badge ---------- */
.mc-banner{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--mc-radius);border:1px solid var(--mc-info-line);background:var(--mc-info-soft);color:var(--mc-text);font-size:.92rem;line-height:1.5;margin:0;}
.mc-banner .mc-ico{margin-top:1px;color:var(--mc-info);}
.mc-banner[data-tone="warn"]{background:var(--mc-warn-soft);border-color:var(--mc-warn-line);}
.mc-banner[data-tone="warn"] .mc-ico{color:var(--mc-warn);}
.mc-banner[data-tone="danger"]{background:var(--mc-danger-soft);border-color:var(--mc-danger-line);}
.mc-banner[data-tone="danger"] .mc-ico{color:var(--mc-danger);}
.mc-banner[data-tone="ok"]{background:var(--mc-ok-soft);border-color:var(--mc-ok-line);}
.mc-banner[data-tone="ok"] .mc-ico{color:var(--mc-ok);}
.mc-banner b{font-weight:700;}
.mc-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:.78rem;font-weight:700;line-height:1.3;white-space:nowrap;background:var(--mc-neutral-soft);color:var(--mc-neutral);}
.mc-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.mc-badge[data-tone="trial"]{background:var(--mc-primary-soft);color:var(--mc-primary-ink);}
.mc-badge[data-tone="ok"]{background:var(--mc-ok-soft);color:var(--mc-ok);}
.mc-badge[data-tone="warn"]{background:var(--mc-warn-soft);color:var(--mc-warn);}
.mc-badge[data-tone="danger"]{background:var(--mc-danger-soft);color:var(--mc-danger);}
.mc-badge[data-tone="info"]{background:var(--mc-info-soft);color:var(--mc-info);}
.mc-badge[data-tone="info"]::before{animation:mc-pulse 1.2s ease-in-out infinite;}
@keyframes mc-pulse{50%{opacity:.25;}}

/* ---------- Trang xác thực ---------- */
.mc-auth{display:grid;gap:24px;max-width:1000px;margin:0 auto;align-items:stretch;}
.mc-auth.single{max-width:480px;}
.mc-auth .mc-card{padding:28px 24px;}
.mc-auth h1{font-size:1.65rem;font-weight:800;}
.mc-auth .mc-lead{color:var(--mc-muted);margin-bottom:20px;}
.mc-aside{border-radius:var(--mc-radius-lg);background:var(--mc-hero);color:var(--mc-hero-ink);padding:28px 26px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;}
.mc-aside::after{content:"";position:absolute;right:-70px;bottom:-70px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.16);}
.mc-aside h2{font-size:1.4rem;font-weight:800;margin:0;position:relative;}
.mc-aside ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative;z-index:1;}
.mc-aside li{display:flex;gap:12px;align-items:flex-start;font-weight:500;line-height:1.45;}
.mc-aside li svg{width:22px;height:22px;flex:none;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.mc-aside li b{font-weight:700;display:block;}
.mc-aside .mc-aside-note{font-size:.84rem;opacity:.85;margin:auto 0 0;position:relative;z-index:1;}
@media (min-width:900px){
  .mc-auth:not(.single){grid-template-columns:minmax(0,1fr) minmax(0,.85fr);}
  .mc-auth .mc-card{padding:36px 36px;}
}
@media (max-width:899px){.mc-aside{order:2;padding:22px 20px;}}
.mc-alt{text-align:center;margin:18px 0 0 !important;color:var(--mc-muted);font-size:.93rem;}
.mc-success{text-align:center;padding:8px 0;}
.mc-success .mc-bigicon{width:64px;height:64px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;background:var(--mc-ok-soft);color:var(--mc-ok);}
.mc-success .mc-bigicon svg{width:32px;height:32px;}
.mc-success .mc-bigicon[data-tone="danger"]{background:var(--mc-danger-soft);color:var(--mc-danger);}
.mc-success .mc-bigicon[data-tone="warn"]{background:var(--mc-warn-soft);color:var(--mc-warn);}

/* ---------- Tài khoản ---------- */
.mc-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.mc-pagehead h1{font-size:1.65rem;font-weight:800;margin:0;}
.mc-pagehead p{margin:4px 0 0;color:var(--mc-muted);font-size:.95rem;}
.mc-section{margin-top:36px;}
.mc-section > h2{font-size:1.2rem;font-weight:800;margin-bottom:14px;}
.mc-stores{display:grid;gap:16px;}

.mc-store{background:var(--mc-surface);border:1px solid var(--mc-border);border-radius:var(--mc-radius-lg);box-shadow:var(--mc-shadow-sm);overflow:hidden;}
.mc-store[data-state="expired"]{border-color:var(--mc-danger-line);}
.mc-store[data-state="locked"]{border-color:var(--mc-border-strong);}
.mc-store[data-state="expiring"]{border-color:var(--mc-warn-line);}
.mc-store-head{display:flex;gap:14px;align-items:flex-start;padding:20px 22px 0;}
.mc-store-mark{width:48px;height:48px;border-radius:14px;background:var(--mc-primary-soft);color:var(--mc-primary-ink);display:grid;place-items:center;flex:none;}
.mc-store-mark svg{width:26px;height:26px;}
.mc-store[data-state="expired"] .mc-store-mark{background:var(--mc-danger-soft);color:var(--mc-danger);}
.mc-store[data-state="locked"] .mc-store-mark{background:var(--mc-neutral-soft);color:var(--mc-neutral);}
.mc-store-id{min-width:0;flex:1;}
.mc-store-host{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 2px;}
.mc-store-host a.host{font-family:var(--mc-font-display);font-weight:800;font-size:1.22rem;color:var(--mc-text);word-break:break-all;line-height:1.25;}
.mc-store-host a.host em{font-style:normal;color:var(--mc-subtle);font-weight:600;}
.mc-store-host a.host:hover{color:var(--mc-primary-ink);}
.mc-store-meta{display:flex;flex-wrap:wrap;gap:2px 14px;color:var(--mc-muted);font-size:.88rem;margin:0;}
.mc-store-meta span{display:inline-flex;align-items:center;gap:6px;}
.mc-store-meta .mc-ico{width:15px;height:15px;color:var(--mc-subtle);}
.mc-store-banner{margin:16px 22px 0;}
.mc-store-body{display:grid;gap:18px;padding:20px 22px;}
.mc-metric{display:grid;gap:7px;min-width:0;}
.mc-metric-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
.mc-metric-label{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mc-subtle);}
.mc-metric-val{font-family:var(--mc-font-display);font-weight:700;font-size:1.02rem;}
.mc-metric-val small{font-weight:500;color:var(--mc-muted);font-size:.86rem;}
.mc-bar{height:10px;border-radius:999px;background:var(--mc-border);overflow:hidden;}
.mc-bar > i{display:block;height:100%;width:var(--pct,0%);border-radius:inherit;background:var(--mc-ok);transition:width .5s ease;}
.mc-metric[data-level="warn"] .mc-bar > i{background:#F59E0B;}
.mc-metric[data-level="over"] .mc-bar > i{background:var(--mc-danger);}
.mc-metric[data-level="warn"] .mc-metric-val b{color:var(--mc-warn);}
.mc-metric[data-level="over"] .mc-metric-val b{color:var(--mc-danger);}
.mc-metric .mc-hint{font-size:.82rem;}
.mc-metric[data-level="warn"] .mc-hint.q-warn,.mc-metric[data-level="over"] .mc-hint.q-over{display:flex;}
.mc-metric .q-warn,.mc-metric .q-over{display:none;}
.mc-metric[data-level="warn"] .q-warn{color:var(--mc-warn);}
.mc-metric[data-level="over"] .q-over{color:var(--mc-danger);}
.mc-time .mc-bar > i{background:var(--mc-primary);}
.mc-store[data-state="paid"] .mc-time .mc-bar > i{background:var(--mc-ok);}
.mc-store[data-state="expiring"] .mc-time .mc-bar > i{background:#F59E0B;}
.mc-store[data-state="expired"] .mc-time .mc-bar > i,.mc-store[data-state="locked"] .mc-time .mc-bar > i{background:var(--mc-danger);}
.mc-store-actions{display:flex;flex-wrap:wrap;gap:10px;padding:16px 22px;border-top:1px solid var(--mc-border);background:var(--mc-surface-2);}
.mc-store-actions .mc-btn{flex:0 0 auto;}
.mc-store-actions .push{margin-left:auto;}
@media (min-width:760px){
  .mc-store-body{grid-template-columns:1fr 1fr;gap:32px;}
}
@media (max-width:560px){
  .mc-store-head{padding:18px 16px 0;}
  .mc-store-body{padding:18px 16px;}
  .mc-store-banner{margin:14px 16px 0;}
  .mc-store-actions{padding:14px 16px;}
  .mc-store-actions .mc-btn{flex:1 1 100%;}
  .mc-store-actions .push{margin-left:0;}
  .mc-store-mark{width:42px;height:42px;border-radius:12px;}
  .mc-store-host a.host{font-size:1.05rem;}
}
/* hiển thị theo trạng thái thẻ (data-state): trial | paid | expiring | expired | locked | creating */
.mc-store .only-live,.mc-store .only-expired,.mc-store .only-locked,.mc-store .only-creating,.mc-store .only-closed{display:none;}
.mc-store:is([data-state="trial"],[data-state="paid"],[data-state="expiring"]) .only-live{display:revert;}
.mc-store:is([data-state="trial"],[data-state="paid"],[data-state="expiring"]) .mc-btn.only-live{display:inline-flex;}
.mc-store[data-state="expired"] .only-expired,.mc-store[data-state="expired"] .only-closed{display:revert;}
.mc-store[data-state="locked"] .only-locked,.mc-store[data-state="locked"] .only-closed{display:revert;}
.mc-store[data-state="creating"] .only-creating{display:revert;}
.mc-store:is([data-state="expired"],[data-state="locked"]) .mc-btn.only-closed,.mc-store[data-state="expired"] .mc-btn.only-expired{display:inline-flex;}
.mc-store[data-state="locked"] .mc-btn.only-locked,.mc-store[data-state="creating"] .mc-btn.only-creating{display:inline-flex;}
.mc-store[data-state="creating"] .not-creating{display:none !important;}
.mc-store[data-state="trial"] .only-paid,.mc-store[data-state="expiring"] .only-paid{display:none !important;}

/* đang tạo */
.mc-create-wait{padding:22px;display:grid;gap:18px;}
.mc-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.mc-steps li{display:flex;align-items:center;gap:12px;color:var(--mc-subtle);font-size:.95rem;}
.mc-steps li .dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--mc-border-strong);display:grid;place-items:center;flex:none;font-size:.75rem;font-weight:700;}
.mc-steps li.done{color:var(--mc-text);}
.mc-steps li.done .dot{background:var(--mc-ok);border-color:var(--mc-ok);color:#fff;}
.mc-steps li.done .dot svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;}
.mc-steps li.cur{color:var(--mc-text);font-weight:600;}
.mc-steps li.cur .dot{border-color:var(--mc-primary);}
.mc-steps li.cur .dot::after{content:"";width:12px;height:12px;border-radius:50%;border:2.5px solid var(--mc-primary);border-right-color:transparent;animation:mc-rot .8s linear infinite;}
.mc-steps li .dot svg{display:none;}
.mc-steps li.done .dot svg{display:block;}

/* trạng thái rỗng + form tạo */
.mc-empty{display:grid;gap:26px;}
@media (min-width:900px){.mc-empty{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start;}}
.mc-empty-hero{text-align:center;padding:30px 16px 8px;}
.mc-empty-hero .art{width:84px;height:84px;margin:0 auto 14px;border-radius:24px;background:var(--mc-primary-soft);color:var(--mc-primary-ink);display:grid;place-items:center;}
.mc-empty-hero .art svg{width:44px;height:44px;}
.mc-empty-hero h2{font-size:1.35rem;font-weight:800;}
.mc-perks{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.mc-perks li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;line-height:1.45;}
.mc-perks li svg{width:22px;height:22px;flex:none;color:var(--mc-primary-ink);margin-top:1px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.mc-perks b{display:block;}
.mc-formcard h2{font-size:1.3rem;font-weight:800;}
.mc-formgrid{display:grid;gap:16px;}
@media (min-width:560px){.mc-formgrid.two{grid-template-columns:1fr 1fr;}}
.mc-formcard .mc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.mc-formcard .mc-actions .mc-btn-primary{flex:1 1 220px;}

/* ---------- Bảng đơn thanh toán ---------- */
.mc-tablecard{padding:0;overflow:hidden;}
.mc-table{width:100%;border-collapse:collapse;font-size:.92rem;}
.mc-table th{padding:12px 18px;text-align:left;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mc-subtle);background:var(--mc-surface-2);border-bottom:1px solid var(--mc-border);font-weight:700;}
.mc-table td{padding:14px 18px;border-bottom:1px solid var(--mc-border);vertical-align:middle;}
.mc-table tr:last-child td{border-bottom:0;}
.mc-table .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;}
.mc-table th.num{text-align:right;}
.mc-table .code{font-family:var(--mc-font-mono);font-size:.85rem;}
@media (max-width:719px){
  .mc-table thead{display:none;}
  .mc-table,.mc-table tbody,.mc-table tr,.mc-table td{display:block;width:100%;}
  .mc-table tr{padding:14px 16px;border-bottom:1px solid var(--mc-border);display:grid;grid-template-columns:1fr auto;gap:4px 12px;}
  .mc-table tr:last-child{border-bottom:0;}
  .mc-table td{padding:0;border:0;width:auto;}
  .mc-table td[data-label]::before{content:attr(data-label) ": ";color:var(--mc-subtle);font-size:.8rem;}
  .mc-table td.num{text-align:right;grid-column:2;grid-row:1;font-size:1rem;}
  .mc-table td.c-desc{grid-column:1;grid-row:1;font-weight:600;}
  .mc-table td.c-desc::before{content:none;}
  .mc-table td.c-code,.mc-table td.c-date{grid-column:1;color:var(--mc-muted);font-size:.84rem;}
  .mc-table td.c-status{grid-column:2;grid-row:2 / span 2;align-self:end;justify-self:end;}
  .mc-table td.c-status::before{content:none;}
}
.mc-tablecard .mc-empty-row{padding:26px;text-align:center;color:var(--mc-subtle);}

/* ---------- Hộp thoại gia hạn ---------- */
.mc-dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;color:inherit;}
.mc-dialog:not([open]){display:none;}
.mc-dialog::backdrop{background:rgba(8,12,24,.62);backdrop-filter:blur(3px);}
.mc-dialog-wrap{min-height:100%;display:grid;place-items:center;padding:16px;}
.mc-dialog-box{width:100%;max-width:520px;background:var(--mc-surface);color:var(--mc-text);border-radius:22px;box-shadow:var(--mc-shadow-lg);overflow:hidden;border:1px solid var(--mc-border);}
.mc-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 0;}
.mc-dialog-head h2{font-size:1.25rem;font-weight:800;margin:0;}
.mc-dialog-head p{margin:2px 0 0;color:var(--mc-muted);font-size:.9rem;}
.mc-dialog-body{padding:18px 22px 22px;display:grid;gap:16px;}
.mc-plan{display:grid;gap:8px;padding:14px 16px;border:1.5px solid var(--mc-primary);background:var(--mc-primary-soft);border-radius:var(--mc-radius);}
.mc-plan-row{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;}
.mc-plan-row span:first-child{color:var(--mc-muted);}
.mc-plan-row b{text-align:right;}
.mc-plan-total{border-top:1px dashed var(--mc-primary-line);padding-top:9px;margin-top:2px;font-size:1.05rem;}
.mc-plan-total b{font-family:var(--mc-font-display);font-size:1.25rem;}
.mc-pay{display:grid;gap:16px;justify-items:center;}
.mc-qr{margin:0;padding:12px;background:#fff;border-radius:16px;border:1px solid var(--mc-border);box-shadow:var(--mc-shadow-sm);}
.mc-qr img{width:210px;height:210px;image-rendering:pixelated;}
.mc-pay-info{width:100%;display:grid;gap:10px;}
.mc-pay-timer{text-align:center;color:var(--mc-muted);font-size:.9rem;margin:0;}
.mc-pay-timer b{font-family:var(--mc-font-mono);font-size:1.05rem;color:var(--mc-text);}
.mc-pay-steps{margin:0;padding:0 0 0 20px;color:var(--mc-muted);font-size:.9rem;display:grid;gap:3px;}
.mc-pay-live{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--mc-muted);font-size:.9rem;margin:0;}
.mc-dot{width:9px;height:9px;border-radius:50%;background:var(--mc-primary);animation:mc-pulse 1.2s ease-in-out infinite;}
.mc-dialog-foot{display:flex;gap:10px;flex-wrap:wrap;}
.mc-dialog-foot .mc-btn{flex:1 1 150px;}

/* ---------- Toast ---------- */
.mc-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:12px 18px;border-radius:12px;background:#0F172A;color:#fff;font-size:.92rem;font-weight:500;box-shadow:var(--mc-shadow-lg);z-index:90;}

/* ---------- Skeleton ---------- */
.mc-skel{border-radius:var(--mc-radius-lg);background:linear-gradient(90deg,var(--mc-border) 25%,var(--mc-surface-2) 50%,var(--mc-border) 75%);background-size:200% 100%;animation:mc-shim 1.4s linear infinite;}
@keyframes mc-shim{to{background-position:-200% 0;}}

/* ---------- Bản xem thử trạng thái (chỉ khi mở bằng ?state=...) ---------- */
.mc-demo-bar{position:fixed;right:10px;bottom:10px;z-index:99;background:#0F172A;color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.4 var(--mc-font-mono);opacity:.88;max-width:calc(100vw - 20px);}

/* ---------- Bổ sung ---------- */
.mc-store[data-state="locked"] .not-locked{display:none !important;}
.mc-store:is([data-state="expiring"],[data-state="expired"]) [data-expiring-primary]{background:var(--mc-primary);color:var(--mc-on-primary);border-color:transparent;box-shadow:0 2px 0 rgba(168,90,0,.35);}
.mc-store:is([data-state="expiring"],[data-state="expired"]) [data-expiring-primary]:hover{background:var(--mc-primary-hover);}
.mc-store-banner[hidden]{display:none;}
#create-panel[data-mode="add"] .mc-empty-hero{display:none;}
#create-panel[data-mode="empty"] [data-action="hide-create"]{display:none;}
.mc-price{font-weight:600;opacity:.85;}
.mc-price::before{content:"·";margin-right:6px;}
@media (max-width:640px){
  .mc-logout-txt{display:none;}
  .mc-logout{width:40px;height:40px;padding:0;min-height:40px;border-radius:10px;}
  .mc-user{padding:3px;max-width:40px;gap:0;}
  .mc-user span{display:none;}
  .mc-user b{width:32px;height:32px;}
  .mc-top-in{gap:8px;}
  .mc-select{max-width:104px;padding-left:10px;}
  .mc-pagehead .mc-btn{width:100%;}
  .mc-card{padding:18px;}
  .mc-auth .mc-card{padding:22px 18px;}
}
@media (max-width:380px){ .mc-logo img{height:28px;width:auto;} .mc-select{max-width:92px;font-size:.8rem;} }

/* ---------- Chỉnh sau vòng chụp 1 ---------- */
.mc-card.mc-tablecard{padding:0;}
.mc-store-host a.host{display:block;word-break:normal;overflow-wrap:break-word;}
.mc-store-host a.host em{white-space:nowrap;}
.mc-table .c-code{white-space:nowrap;}
.mc-whoami{display:none;margin:0 0 14px !important;font-size:.86rem;color:var(--mc-muted);}
.mc-whoami b{color:var(--mc-text);font-weight:600;word-break:break-all;}
@media (max-width:640px){
  .mc-user{display:none;}
  .mc-whoami{display:block;}
}
.mc-mock{position:relative;z-index:1;margin-top:auto;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.9);color:#0F172A;box-shadow:0 8px 24px rgba(0,0,0,.14);display:grid;gap:10px;}
.mc-mock-url{display:flex;align-items:center;gap:8px;font-family:var(--mc-font-mono);font-size:.9rem;font-weight:600;}
.mc-mock-url::before{content:"";width:9px;height:9px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 4px rgba(22,163,74,.2);flex:none;}
.mc-mock-url em{font-style:normal;color:#64748B;font-weight:500;}
.mc-mock-bar{height:8px;border-radius:999px;background:#E2E8F0;overflow:hidden;}
.mc-mock-bar i{display:block;height:100%;width:23%;background:#16A34A;border-radius:inherit;}
.mc-mock-row{display:flex;justify-content:space-between;font-size:.76rem;color:#475569;font-weight:600;}
.mc-aside .mc-aside-note{margin-top:0;}
:root[data-theme="dark"] .mc-mock{background:rgba(15,23,42,.88);color:#F1F5F9;}
:root[data-theme="dark"] .mc-mock-url em,:root[data-theme="dark"] .mc-mock-row{color:#CBD5E1;}
:root[data-theme="dark"] .mc-mock-bar{background:#24324A;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mc-mock{background:rgba(15,23,42,.88);color:#F1F5F9;}
  :root:not([data-theme="light"]) .mc-mock-url em,:root:not([data-theme="light"]) .mc-mock-row{color:#CBD5E1;}
  :root:not([data-theme="light"]) .mc-mock-bar{background:#24324A;}
}
.mc-price{margin-left:2px;}

.mc-choice > span > span{display:block;}
.mc-store[data-state="creating"] .mc-store-actions{display:none;}
.mc-banner.mc-store-banner{margin:16px 22px 0;}
@media (max-width:560px){.mc-banner.mc-store-banner{margin:14px 16px 0;}}
.mc-pay .mc-plan-total{border-top:0;padding-top:0;margin:0;}

/* ---------- Gắn API (dev 13/10/2026) ---------- */
/* dải phân biệt hai hệ tài khoản (trên mây ≠ máy tự cài) */
.mc-xband{background:var(--mc-primary-soft);border-bottom:1px solid var(--mc-primary-line);color:var(--mc-text);font-size:.86rem;line-height:1.45;}
.mc-xband-in{max-width:1120px;margin:0 auto;padding:9px var(--mc-gutter);display:flex;gap:9px;align-items:flex-start;}
.mc-xband .mc-ico{width:17px;height:17px;margin-top:1px;color:var(--mc-primary-ink);}
.mc-xband a{white-space:nowrap;}
.mc-page-banner{margin:0 0 18px;align-items:center;flex-wrap:wrap;}
.mc-page-banner > span{flex:1 1 220px;}
.mc-toast[data-tone="danger"]{background:var(--mc-danger);}
:root[data-theme="dark"] .mc-toast[data-tone="danger"]{background:#7F1D1D;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mc-toast[data-tone="danger"]{background:#7F1D1D;}}
.mc-store-name{margin:0 0 4px;font-weight:600;color:var(--mc-muted);overflow-wrap:anywhere;}
.mc-fieldset{border:0;padding:0;margin:0;}
.mc-fieldset legend{padding:0;margin-bottom:6px;}
/* mật khẩu root ban đầu (hiện một lần) */
.mc-initpw{margin:16px 22px 0;padding:14px 16px;border-radius:var(--mc-radius);border:1.5px dashed var(--mc-primary);background:var(--mc-primary-soft);display:grid;gap:10px;justify-items:start;}
.mc-initpw p{margin:0 !important;}
.mc-initpw-h{display:flex;gap:8px;align-items:center;}
.mc-initpw-h .mc-ico{color:var(--mc-primary-ink);}
.mc-initpw-row{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;width:100%;}
.mc-initpw-user{font-family:var(--mc-font-mono);font-size:.9rem;color:var(--mc-muted);}
.mc-initpw-user::after{content:" /";}
.mc-initpw-val{font-family:var(--mc-font-mono);font-size:1.08rem;font-weight:700;padding:6px 10px;border-radius:8px;background:var(--mc-surface);border:1px solid var(--mc-border);letter-spacing:.03em;overflow-wrap:anywhere;user-select:all;}
@media (max-width:560px){.mc-initpw{margin:14px 16px 0;}}
/* nút xóa & nút nguy hiểm đặc */
.mc-btn-del{color:var(--mc-danger);}
.mc-btn-del:hover{background:var(--mc-danger-soft);color:var(--mc-danger);}
.mc-btn-dangersolid{background:var(--mc-danger);color:#fff;}
.mc-btn-dangersolid:hover{filter:brightness(1.08);}
:root[data-theme="dark"] .mc-btn-dangersolid{background:#B91C1C;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mc-btn-dangersolid{background:#B91C1C;}}
.mc-btn[aria-busy="true"]{position:relative;color:transparent !important;}
.mc-btn[aria-busy="true"]::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2.5px solid var(--mc-text);border-right-color:transparent;animation:mc-rot .8s linear infinite;}
.mc-btn-primary[aria-busy="true"]::after{border-color:var(--mc-on-primary);border-right-color:transparent;}
/* thùng rác: không tải sao lưu được (API 409), không vào cửa hàng */
.mc-store[data-trashed] [data-action="root-password"],.mc-store[data-trashed] [data-action="download-backup"],.mc-store[data-trashed] [data-action="download-backup-live"]{display:none !important;}
.mc-qr[hidden]{display:none !important;}
/* Google GIS iframe không tràn ngang */
#g_id_signin{display:flex;justify-content:center;min-height:44px;overflow:hidden;}

/* ---------- Trang giới thiệu /may-chu/ ---------- */
.mc-hero{background:var(--mc-hero);color:var(--mc-hero-ink);border-radius:var(--mc-radius-lg);padding:40px 28px;position:relative;overflow:hidden;}
.mc-hero::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.14);}
.mc-hero > *{position:relative;z-index:1;}
.mc-hero h1{font-size:clamp(1.7rem,4.6vw,2.6rem);font-weight:800;max-width:720px;}
.mc-hero p{font-size:1.06rem;max-width:640px;opacity:.95;}
.mc-hero .mc-eyebrow{color:inherit;opacity:.85;}
.mc-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.mc-hero-cta .mc-btn{flex:0 1 auto;}
.mc-hero .mc-btn-outline{background:rgba(255,255,255,.9);border-color:transparent;color:#2B1500;}
.mc-hero-url{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.88);color:#0F172A;font-family:var(--mc-font-mono);font-size:.92rem;font-weight:600;max-width:100%;overflow-wrap:anywhere;}
.mc-hero-url::before{content:"";width:9px;height:9px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 4px rgba(22,163,74,.2);flex:none;}
.mc-facts{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:28px;}
.mc-fact{display:flex;gap:12px;align-items:flex-start;}
.mc-fact .mc-ico{width:26px;height:26px;color:var(--mc-primary-ink);flex:none;}
.mc-fact b{display:block;font-family:var(--mc-font-display);font-size:1.05rem;}
.mc-fact span{color:var(--mc-muted);font-size:.92rem;}
.mc-types{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
.mc-type{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--mc-border);border-radius:var(--mc-radius);background:var(--mc-surface);font-weight:600;font-size:.93rem;}
.mc-type .mc-ico{width:22px;height:22px;color:var(--mc-primary-ink);}
.mc-steps-intro{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.mc-steps-intro li{counter-increment:s;padding:16px 16px 16px 58px;position:relative;border:1px solid var(--mc-border);border-radius:var(--mc-radius);background:var(--mc-surface);}
.mc-steps-intro li::before{content:counter(s);position:absolute;left:16px;top:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--mc-primary);color:var(--mc-on-primary);font-weight:800;}
.mc-steps-intro b{display:block;}
.mc-steps-intro span{color:var(--mc-muted);font-size:.92rem;}
.mc-note-card{display:flex;gap:12px;align-items:flex-start;}
.mc-note-card .mc-ico{color:var(--mc-info);margin-top:2px;}
@media (max-width:560px){.mc-hero{padding:28px 18px;}.mc-hero-cta .mc-btn{flex:1 1 100%;}}
.mc-hero .mc-hero-ghost{color:inherit;border-color:color-mix(in srgb,currentColor 40%,transparent);}
.mc-hero .mc-hero-ghost:hover{background:rgba(255,255,255,.18);color:inherit;}
.mc-hero-url b{font-weight:600;color:#64748B;}