/* Maison Perl — Mobile Web App (mobile.html)
   Native-feel: bottom tabs, bottom sheets, passive touch, transform/opacity-only animation. */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --bg: #141612; --bg-2: #191C17; --card: #20231D; --card-2: #292D25;
  --fg: #F4F4F6; --muted: #9F9DB3; --line: rgba(255,255,255,0.09);
  --accent: #CDB784; --accent-strong: #A98A52; --ok: #34D399; --warn: #FBBF24; --err: #F87171;
  --f-display: "Playfair Display", Georgia, serif;
  --f-body: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --top-h: 54px; --tab-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
img { display: block; max-width: 100%; }
em { font-style: italic; color: #E0D1AD; }

/* Top bar */
.m-top {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: calc(var(--top-h) + var(--safe-t)); padding: var(--safe-t) 14px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(8,8,12,0.86); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.m-brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; }
.m-top-title { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.m-icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; }

/* Main & views */
.m-main { padding: calc(var(--top-h) + var(--safe-t) + 12px) 14px calc(var(--tab-h) + var(--safe-b) + 24px); max-width: 640px; margin: 0 auto; }
.m-view { display: none; }
.m-view.active { display: block; animation: mViewIn 0.32s var(--ease) both; }
@keyframes mViewIn { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }

/* Typography */
.m-eyebrow { display: block; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.m-mono { font-family: var(--f-mono); font-size: 0.74rem; color: var(--muted); }
.m-display { font-family: var(--f-display); font-weight: 600; font-size: clamp(30px, 9vw, 42px); line-height: 1.08; margin: 8px 0 10px; letter-spacing: -0.01em; }
.m-lede { color: var(--muted); margin: 0 0 16px; }
.m-sec-head { display: flex; justify-content: space-between; align-items: baseline; margin: 26px 2px 12px; }
.m-sec-head h2 { font-family: var(--f-display); font-size: 1.5rem; margin: 0; font-weight: 600; }

/* Hero */
.m-hero { padding: 22px 18px; border-radius: 20px; border: 1px solid var(--line);
  background: radial-gradient(120% 80% at 90% 0%, rgba(205,183,132,0.22), transparent 60%), linear-gradient(180deg, #1D211A, #141612); }

/* Buttons */
.m-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.m-btn { min-height: 46px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--card-2); color: #fff; font-weight: 600; font-size: 0.92rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: transform 0.15s var(--ease), background 0.2s ease; }
.m-btn:active { transform: scale(0.97); }
.m-btn.primary { background: linear-gradient(135deg, #B69A62, #A98A52); border-color: transparent; box-shadow: 0 8px 22px rgba(169,138,82,0.35); }
.m-btn.ghost { background: transparent; }
.m-btn.sm { min-height: 36px; padding: 0 12px; font-size: 0.82rem; border-radius: 10px; }
.m-btn.block { width: 100%; margin-top: 16px; }
.m-btn.grow { flex: 1; }
.m-btn[disabled] { opacity: 0.55; }
.m-link { background: none; border: 0; color: var(--accent); font-size: 0.82rem; padding: 8px 0; text-decoration: underline; text-underline-offset: 3px; }

/* Cards */
.m-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin-top: 14px; }
.m-card h3 { font-family: var(--f-display); font-size: 1.3rem; margin: 4px 0 12px; font-weight: 600; }

/* Looks rail */
.m-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -14px; padding: 2px 14px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.m-rail::-webkit-scrollbar { display: none; }
.m-look { flex: 0 0 72%; scroll-snap-align: start; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line); text-align: left; padding: 0; }
.m-look-img { aspect-ratio: 3 / 4; overflow: hidden; position: relative; background: #111; }
.m-look-img img { width: 100%; height: 100%; object-fit: cover; }
.m-look-tag { position: absolute; top: 10px; left: 10px; font-family: var(--f-mono); font-size: 0.66rem; padding: 4px 8px; border-radius: 999px; background: rgba(8,8,12,0.75); color: #fff; }
.m-look-body { padding: 12px 14px 14px; }
.m-look-body h4 { margin: 0; font-family: var(--f-display); font-size: 1.2rem; }
.m-look-body p { margin: 2px 0 0; color: var(--muted); font-size: 0.82rem; }

/* Verify */
.m-inline-form { display: flex; gap: 8px; }
.m-inline-form .m-input { flex: 1; min-width: 0; }
.m-cert { margin-top: 14px; padding: 16px; border-radius: 14px; border: 1px solid rgba(52,211,153,0.35); background: linear-gradient(160deg, rgba(52,211,153,0.1), rgba(19,19,28,0.9)); animation: mViewIn 0.35s var(--ease) both; }
.m-cert.bad { border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.07); }
.m-cert dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0; font-size: 0.85rem; }
.m-cert dt { color: var(--muted); }
.m-cert dd { margin: 0; text-align: right; font-weight: 500; }

/* Portals */
.m-portal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.m-portal { border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 14px 6px; display: grid; gap: 6px; justify-items: center; font-size: 0.78rem; color: #E4E3EE; }
.m-portal b { font-size: 1.35rem; font-weight: 400; }
.m-portal:active { transform: scale(0.96); }
.m-desktop-link { display: block; text-align: center; margin: 22px 0 4px; color: var(--muted); font-size: 0.82rem; text-decoration: none; }

/* Inputs */
.m-label { display: block; font-size: 0.8rem; color: var(--muted); margin: 14px 2px 6px; }
.m-input { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.13); background: #0D0D14; font-size: 16px; outline: none; transition: border-color 0.2s ease; }
.m-input:focus { border-color: var(--accent); }
.m-input.mono { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; }
textarea.m-input { resize: vertical; min-height: 84px; }
.m-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.82rem; color: var(--muted); margin: 14px 2px; }
.m-check input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin-top: 1px; }

/* Segmented & chips */
.m-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.m-seg button { min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 600; font-size: 0.86rem; transition: background 0.2s ease, color 0.2s ease; }
.m-seg button.active { background: var(--accent-strong); color: #fff; }
.m-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.m-chips.scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 0 14px 4px; scrollbar-width: none; }
.m-chips.scroll::-webkit-scrollbar { display: none; }
.m-chips button { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 0.82rem; color: #DDDCEA; }
.m-chips button.active { background: #fff; color: #0B0B10; border-color: #fff; font-weight: 600; }

/* Figure */
.m-figure-card { display: grid; grid-template-columns: 46% 1fr; gap: 12px; align-items: center; }
.m-figure { width: 100%; height: auto; }
.m-figure #m-body { transition: d 0.45s var(--ease); }
.m-figure-info { display: grid; gap: 4px; }
.m-figure-info strong { font-family: var(--f-display); font-size: 1.35rem; }

/* Fields (stepper) */
.m-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.m-field { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 10px 12px; }
.m-field.wide { grid-column: 1 / -1; }
.m-field label { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--muted); margin-bottom: 8px; }
.m-field label i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.m-stepper { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 4px; }
.m-stepper button { height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); font-size: 1.15rem; }
.m-stepper button:active { background: var(--accent-strong); }
.m-stepper input { width: 100%; text-align: center; background: transparent; border: 0; font-family: var(--f-mono); font-size: 1.05rem; font-weight: 500; outline: none; padding: 0; }
.m-field small { display: block; text-align: center; font-family: var(--f-mono); font-size: 0.66rem; color: var(--muted); margin-top: 4px; }

.m-result { text-align: center; }
.m-size-big { font-family: var(--f-display); font-size: 3.2rem; line-height: 1; margin: 6px 0; }
.m-advice-title { font-weight: 600; margin: 0 0 6px; }
#m-advice p { margin: 0 0 8px; font-size: 0.88rem; color: #D6D5E3; }

/* Order steps: 4 sequential atelier stages */
.m-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.m-steps span { text-align: center; font-family: var(--f-mono); font-size: 0.68rem; font-weight: 600; padding: 8px 2px; border-radius: 10px; background: var(--card); color: var(--muted); border: 1px solid var(--line); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-steps span.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.m-step { display: none; }
.m-step.active { display: block; animation: mViewIn 0.3s var(--ease) both; }
.m-look-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-look-opt { padding: 0; border-radius: 14px; overflow: hidden; border: 2px solid transparent; background: var(--card); text-align: left; transition: border-color 0.2s ease; }
.m-look-opt img { aspect-ratio: 1; width: 100%; object-fit: cover; }
.m-look-opt span { display: block; padding: 8px 10px; font-size: 0.8rem; }
.m-look-opt span b { display: block; font-family: var(--f-display); font-size: 1rem; }
.m-look-opt.active { border-color: var(--accent); }
.m-measure-attach { font-family: var(--f-mono); font-size: 0.74rem; color: #D2D1E0; line-height: 1.7; }
.m-deposit .m-dep-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 0.9rem; }
.m-deposit .m-dep-row:last-child { border-bottom: 0; }
.m-deposit .m-dep-row.hi b { color: var(--ok); font-size: 1.15rem; }
.m-qr-card { display: grid; justify-items: center; gap: 10px; text-align: center; }
.m-qr-card img { border-radius: 12px; background: #fff; padding: 6px; }
.m-bank { font-size: 0.84rem; color: #D6D5E3; line-height: 1.6; }
.m-bank b { font-family: var(--f-mono); color: #fff; }
.m-upload { display: grid; place-items: center; gap: 10px; margin-top: 14px; min-height: 96px; padding: 16px; border-radius: 16px; border: 1.5px dashed rgba(205,183,132,0.45); background: rgba(205,183,132,0.06); color: #E0D1AD; font-size: 0.88rem; text-align: center; }
.m-upload img { max-height: 180px; border-radius: 10px; }
.m-done { text-align: center; padding: 26px 18px; }
.m-done h3 { font-family: var(--f-display); font-size: 1.6rem; margin: 10px 0 6px; }

/* Experts */
.m-exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.m-exp { border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line); text-align: left; padding: 0; }
.m-exp-img { aspect-ratio: 4 / 5; position: relative; background: #111; }
.m-exp-img img { width: 100%; height: 100%; object-fit: cover; }
.m-exp-img .m-look-tag { left: 8px; top: 8px; }
.m-exp-body { padding: 10px 12px 12px; }
.m-exp-body h4 { margin: 0; font-family: var(--f-display); font-size: 1.02rem; }
.m-exp-body p { margin: 2px 0 0; font-size: 0.74rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* News */
.m-search { margin-bottom: 12px; }
.m-news-list { display: grid; gap: 14px; margin-top: 14px; }
.m-news { display: grid; grid-template-columns: 108px 1fr; gap: 12px; padding: 10px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); text-align: left; }
.m-news.featured { grid-template-columns: 1fr; padding: 0; overflow: hidden; }
.m-news img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.m-news.featured img { aspect-ratio: 16 / 10; border-radius: 0; }
.m-news-body { display: grid; gap: 4px; align-content: start; }
.m-news.featured .m-news-body { padding: 0 14px 14px; }
.m-news-body h4 { margin: 0; font-family: var(--f-display); font-size: 1.02rem; line-height: 1.3; }
.m-news.featured h4 { font-size: 1.3rem; }
.m-share-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.m-share { min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-size: 0.74rem; font-weight: 600; }
.m-share.fb { color: #60A5FA; border-color: rgba(96,165,250,0.35); }
.m-share.zalo { color: #3B82F6; border-color: rgba(59,130,246,0.35); }
.m-share.threads { color: #fff; border-color: rgba(255,255,255,0.3); }
.m-btn.sm.m-view-action,.m-share.m-view-action { min-height: 44px; border-radius: 999px; transition: transform .18s, background-color .22s, border-color .22s; }
.m-view-action:active { transform: scale(.96); background: rgba(190,151,163,.22); border-color: #c09ca7; }
@media (prefers-reduced-motion: reduce) { .m-view-action { transition: none !important; } }

/* Reader inside sheet */
.m-reader-cover { margin: -6px -18px 14px; aspect-ratio: 16 / 10; overflow: hidden; }
.m-reader-cover img { width: 100%; height: 100%; object-fit: cover; }
.m-reader h2 { font-family: var(--f-display); font-size: 1.6rem; line-height: 1.2; margin: 8px 0; }
.m-reader-lead { font-weight: 500; color: #E5E4F0; }
.m-reader-content p { margin: 0 0 14px; color: #D9D8E6; }
.m-reader-tools { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 12px 0; }
.m-reader.sepia { background: #F4EFE6; color: #2C251E; margin: -6px -18px; padding: 6px 18px 20px; }
.m-reader.sepia .m-reader-content p, .m-reader.sepia .m-reader-lead, .m-reader.sepia h2 { color: #1E1914; }
.m-comment { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); margin-top: 8px; font-size: 0.85rem; }
.m-comment b { display: block; font-size: 0.82rem; }
.m-reader.sepia .m-comment { background: rgba(0,0,0,0.04); }

/* Tabs */
.m-tabs { position: fixed; inset: auto 0 0 0; z-index: 40; height: calc(var(--tab-h) + var(--safe-b)); padding: 6px 6px var(--safe-b);
  display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(10,10,15,0.9); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-top: 1px solid var(--line); }
.m-tabs button { border: 0; background: none; display: grid; justify-items: center; align-content: center; gap: 3px; color: #8A889F; font-size: 0.66rem; font-weight: 500; border-radius: 12px; transition: color 0.2s ease; }
.m-tabs svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; transition: transform 0.25s var(--ease); }
.m-tabs button.active { color: #fff; }
.m-tabs button.active svg { transform: translate3d(0,-2px,0); stroke: var(--accent); }

/* Bottom sheet */
.m-sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.m-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.m-sheet { position: fixed; inset: auto 0 0 0; z-index: 61; max-height: 92vh; max-height: 92dvh; background: var(--bg-2); border-radius: 22px 22px 0 0; border-top: 1px solid var(--line);
  transform: translate3d(0, 105%, 0); transition: transform 0.42s var(--ease); display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; will-change: transform; }
.m-sheet.open { transform: none; }
.m-sheet-grip { width: 42px; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.22); margin: 10px auto 4px; flex: none; }
.m-sheet-body { overflow-y: auto; padding: 6px 18px calc(24px + var(--safe-b)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.m-sheet-body h3 { font-family: var(--f-display); font-size: 1.45rem; margin: 6px 0 10px; }
.m-album { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px 12px; padding: 0 18px; scrollbar-width: none; }
.m-album::-webkit-scrollbar { display: none; }
.m-album figure { flex: 0 0 86%; margin: 0; scroll-snap-align: center; }
.m-album img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; }
.m-album figcaption { font-size: 0.74rem; color: var(--muted); margin-top: 6px; }
.m-menu-list { display: grid; gap: 8px; }
.m-menu-list a, .m-menu-list button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: #fff; text-decoration: none; font-size: 0.92rem; text-align: left; }
.m-admin-row { padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); margin-top: 8px; font-size: 0.82rem; }
.m-admin-row .m-row { margin-top: 8px; }
.m-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-kpis div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; }
.m-kpis b { display: block; font-family: var(--f-display); font-size: 1.5rem; }
.m-kpis span { font-size: 0.66rem; color: var(--muted); font-family: var(--f-mono); }
.m-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-family: var(--f-mono); }
.m-badge.ok { background: rgba(52,211,153,0.15); color: var(--ok); }
.m-badge.wait { background: rgba(251,191,36,0.15); color: var(--warn); }

/* Toast */
.m-toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--safe-b) + 14px); z-index: 80; transform: translate3d(-50%, 20px, 0); opacity: 0; pointer-events: none;
  padding: 11px 16px; border-radius: 14px; background: #F4F4F6; color: #0B0B10; font-size: 0.84rem; font-weight: 500; max-width: calc(100vw - 32px); box-shadow: 0 10px 30px rgba(0,0,0,0.45); transition: opacity 0.25s ease, transform 0.3s var(--ease); }
.m-toast.show { opacity: 1; transform: translate3d(-50%, 0, 0); }
.m-toast.err { background: #FEE2E2; color: #7F1D1D; }

.m-skel { border-radius: 16px; background: linear-gradient(90deg, #20231D 0%, #1B1B26 50%, #20231D 100%); background-size: 200% 100%; animation: mSkel 1.3s ease-in-out infinite; min-height: 120px; }
@keyframes mSkel { to { background-position: -200% 0; } }

@media (min-width: 700px) {
  .m-look { flex-basis: 44%; }
  .m-exp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* =========================================================
   MOBILE GLOWING LOGO & LUMINESCENCE (Phát sáng & Nổi bật)
   ========================================================= */
/* =========================================================
   LUXURY METALLIC POLISHED CHROME LOGO (Bóng láng kim loại CHUYỂN ĐỘNG)
   Không bo tròn · Không hình mờ · Sắc nét chỉ riêng Logo & Typography
   Chuyển động liên tục lấp lánh phản chiếu ánh sáng (Specular Chrome Sweep)
   ========================================================= */
.m-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.m-brand-mark,
.m-brand .mark {
  display: inline-block !important;
  width: 25px !important;
  height: 28px !important;
  aspect-ratio: 264 / 297 !important;
  -webkit-mask-image: var(--logo-url, url("images/logo.png")) !important;
  -webkit-mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-image: var(--logo-url, url("images/logo.png")) !important;
  mask-size: contain !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  background: linear-gradient(
    115deg,
    #334155 0%,
    #64748B 15%,
    #E2E8F0 28%,
    #FFFFFF 38%,
    #F8FAFC 45%,
    #94A3B8 55%,
    #CBD5E1 65%,
    #FFFFFF 75%,
    #94A3B8 85%,
    #334155 100%
  ) !important;
  background-size: 300% 100% !important;
  animation: metallicSheenMove 2.6s linear infinite !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.95)) !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

.m-brand-logo-img {
  width: 25px !important;
  height: 28px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.95)) !important;
}

.m-brand-text,
.m-brand span {
  font-family: var(--f-display) !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  background: linear-gradient(
    115deg,
    #334155 0%,
    #64748B 15%,
    #E2E8F0 28%,
    #FFFFFF 38%,
    #F8FAFC 45%,
    #94A3B8 55%,
    #CBD5E1 65%,
    #FFFFFF 75%,
    #94A3B8 85%,
    #334155 100%
  ) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: metallicSheenMove 2.6s linear infinite !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.95)) !important;
  line-height: 1 !important;
}

@keyframes metallicSheenMove {
  0% {
    background-position: 250% 0;
  }
  100% {
    background-position: -250% 0;
  }
}

.m-brand:active {
  transform: scale(0.97);
  transition: transform 0.15s ease;
}

/* Tactile micro-interactions for all interactive mobile components */
.m-btn:active, 
.m-portal:active, 
.m-tabs button:active, 
.m-chips button:active, 
.m-share:active, 
.m-icon-btn:active,
.m-seg button:active,
.m-look-opt:active {
  transform: scale(0.94) !important;
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.m-portal {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s, border-color 0.2s;
}

.m-tabs button {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s;
}

/* Mannequin interactive touch zones & highlight pulse */
.m-fig-touch-zone {
  cursor: pointer;
  transition: opacity 0.2s;
}
.m-fig-touch-zone:hover, .m-fig-touch-zone:active {
  opacity: 0.85;
}

@keyframes mFieldPulse {
  0% { box-shadow: 0 0 0 0 rgba(205, 183, 132, 0.7); border-color: #CDB784; }
  50% { box-shadow: 0 0 0 8px rgba(205, 183, 132, 0.25); border-color: #C084FC; }
  100% { box-shadow: 0 0 0 0 rgba(205, 183, 132, 0); border-color: var(--line); }
}
.m-field-pulse {
  animation: mFieldPulse 1.4s ease 2 !important;
  border-color: #CDB784 !important;
}

/* Mobile Admin Studio UI */
.m-admin-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.m-admin-tabs::-webkit-scrollbar { display: none; }
.m-admin-tab-btn {
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}
.m-admin-tab-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.m-admin-panel {
  display: none;
}
.m-admin-panel.active {
  display: block;
  animation: fadeIn 0.25s ease;
}

/* Google Verification Gate Styling on Mobile */
.m-google-gate {
  background: #FFFFFF;
  color: #202124;
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.m-google-gate h3 {
  font-family: 'Google Sans', Roboto, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  margin: 8px 0 4px;
  color: #202124;
}
.m-google-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #F8F9FA;
  border: 1px solid #DADCE0;
  border-radius: 20px;
  margin: 14px 0;
  text-align: left;
}
.m-google-ava {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1A73E8;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* =========================================================
   TAILOR MEASURING TAPE & COLOR-CODED PROPORTION GAUGES
   ========================================================= */
.m-color-ruler-wrap {
  margin-top: 6px;
  display: grid;
  gap: 4px;
  width: 100%;
}
.m-color-ruler-bar {
  position: relative;
  height: 6px;
  border-radius: 4px;
  display: flex;
  overflow: visible;
  background: rgba(255,255,255,0.08);
}
.m-ruler-seg {
  flex: 1;
  height: 100%;
  opacity: 0.85;
}
.m-ruler-seg:first-child { border-radius: 4px 0 0 4px; }
.m-ruler-seg:last-child { border-radius: 0 4px 4px 0; }
.m-ruler-pin {
  position: absolute;
  top: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 8px currentColor;
  transform: translateX(-50%);
  transition: left 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease;
}
.m-ruler-status {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.25s ease;
}

/* Mannequin Tailor Tape Animations */
.m-tape-ribbon {
  transition: stroke 0.3s ease, stroke-width 0.3s ease;
  filter: drop-shadow(0 0 6px currentColor);
}
.m-tape-ticks {
  pointer-events: none;
}
.m-tape-badge {
  font-family: var(--f-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Direct Contact Section & Official Platform Links on Mobile Homepage */
.m-contact-direct-card {
  margin: 18px 16px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.m-contact-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.m-contact-live-status {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: #10B981;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.m-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.m-contact-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--card-2);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--fg);
  transition: all 0.2s ease;
}
.m-contact-tile:active {
  transform: scale(0.98);
  border-color: var(--accent);
}
.m-contact-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.m-contact-icon.fb-bg {
  background: linear-gradient(135deg, #1877F2 0%, #0D65D9 100%);
  box-shadow: 0 2px 8px rgba(24, 119, 242, 0.4);
}
.m-contact-icon.zalo-bg {
  background: linear-gradient(135deg, #0068FF 0%, #004ecc 100%);
  box-shadow: 0 2px 8px rgba(0, 104, 255, 0.4);
}
.m-contact-icon.ig-bg {
  background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #FCB045 100%);
  box-shadow: 0 2px 8px rgba(253, 29, 29, 0.35);
}
.m-contact-icon.tel-bg {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}
.m-contact-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.m-contact-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
}
.m-contact-sub {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* =========================================================
   DYNAMIC SCROLL LUXURY PHYSICS FOR PERL LOGO & TOP BAR
   - Hiệu ứng phát sáng ngọc trai (Luminescence) khi lướt trang
   - Gia tốc dải quang phổ kim loại (Accelerated metallic sweep)
   - Tinh chỉnh vi mô góc nghiêng và độ nảy organic
   ========================================================= */
.m-brand {
  position: relative !important;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), filter 0.24s ease !important;
  will-change: transform, filter;
}

.m-brand.is-scrolling {
  filter: drop-shadow(0 0 10px rgba(197, 160, 89, 0.65)) brightness(1.18) !important;
}

.m-brand.is-scrolling .m-brand-mark,
.m-brand.is-scrolling .mark {
  animation-duration: 0.85s !important;
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.85)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.95)) !important;
  transform: scale(1.08) rotate(-2.5deg) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease !important;
}

.m-brand.is-scrolling .m-brand-text,
.m-brand.is-scrolling span {
  animation-duration: 0.85s !important;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.75)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.85)) !important;
  letter-spacing: 0.09em !important;
  transition: letter-spacing 0.22s ease, filter 0.22s ease !important;
}

.m-brand.is-scrolling.scroll-down {
  transform: translateY(-1.5px) scale(0.97) !important;
}

.m-brand.is-scrolling.scroll-up {
  transform: translateY(1px) scale(1.02) !important;
}

.m-top {
  transition: background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, backdrop-filter 0.28s ease !important;
}

.m-top.scrolled {
  background: rgba(9, 9, 13, 0.88) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.25) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
}

/* =========================================================
   COLLECTIONS SWITCHER (Bộ lọc & Chuyển đổi Bộ sưu tập trên Trang chủ)
   ========================================================= */
.m-collections-switcher {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 16px 10px;
  margin-top: -2px;
  margin-bottom: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.m-collections-switcher::-webkit-scrollbar {
  display: none;
}
.m-col-pill {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.m-col-pill:active {
  transform: scale(0.96);
}
.m-col-pill.active {
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.28), rgba(205, 183, 132, 0.22));
  border-color: rgba(197, 160, 89, 0.65);
  color: #FFFFFF;
  box-shadow: 0 2px 12px rgba(197, 160, 89, 0.25);
  font-weight: 600;
}
.m-col-pill-badge {
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #FFF;
}
.m-col-pill.active .m-col-pill-badge {
  background: var(--accent);
  color: #000;
  font-weight: 700;
}

/* =========================================================
   SUBTLE MINIMAL REFRESH BUTTON (Nút làm mới nhỏ tinh tế ở cuối trang)
   ========================================================= */
.m-refresh-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28px 16px 20px;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}
.m-refresh-wrap:hover,
.m-refresh-wrap:focus-within {
  opacity: 1;
}
.m-refresh-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.m-refresh-pill:active {
  transform: scale(0.95);
  background: rgba(197, 160, 89, 0.15);
  border-color: rgba(197, 160, 89, 0.4);
  color: var(--accent);
}
.m-refresh-pill svg {
  transition: transform 0.35s ease;
}
.m-refresh-pill:active svg {
  transform: rotate(180deg);
}

/* =========================================================
   MOBILE HAUTE COUTURE VISUAL EFFECTS 2.0 (mobile.css)
   Hairline Scroll Progress, Aurora Atmosphere, Spring Haptics & Glassmorphism
   ========================================================= */

/* Hairline Gold/Indigo Scroll Reading Progress Indicator */
.m-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2.5px;
  background: linear-gradient(90deg, #C5A059 0%, #F59E0B 35%, #CDB784 70%, #E6CA85 100%);
  background-size: 200% auto;
  box-shadow: 0 0 10px rgba(197, 160, 89, 0.75), 0 0 4px rgba(205, 183, 132, 0.5);
  z-index: 99999;
  pointer-events: none;
  transition: width 0.08s linear;
}

/* Atmospheric Floating Silk Aurora Orbs (Hardware-accelerated) */
.ambient-aurora {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0.42;
}

.ambient-aurora .aurora-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.ambient-aurora .orb-1 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(205, 183, 132, 0.16) 0%, rgba(205, 183, 132, 0.04) 45%, transparent 70%);
  top: -80px;
  left: -80px;
  animation: mAuroraDrift1 22s ease-in-out infinite alternate;
}

.ambient-aurora .orb-2 {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(197, 160, 89, 0.15) 0%, rgba(197, 160, 89, 0.03) 45%, transparent 70%);
  bottom: 20px;
  right: -80px;
  animation: mAuroraDrift2 26s ease-in-out infinite alternate;
}

@keyframes mAuroraDrift1 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(50px, 70px, 0) scale(1.09); }
}

@keyframes mAuroraDrift2 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-60px, -50px, 0) scale(1.07); }
}

/* Glassmorphism 2.0 & Luminous Trims */
.m-top {
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
}

.m-tabs {
  background: rgba(9, 9, 13, 0.88) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55) !important;
}

.m-tabs button.active svg {
  transform: translate3d(0, -2px, 0) scale(1.14) !important;
  filter: drop-shadow(0 0 10px rgba(205, 183, 132, 0.75)) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.28s ease !important;
}

/* Enhanced Touch Haptics & Look Card Interaction */
.m-look {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.3s ease !important;
}
.m-look:active {
  transform: scale(0.975) !important;
  border-color: rgba(197, 160, 89, 0.55) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(197, 160, 89, 0.25) !important;
}
.m-look-img img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.m-look:active .m-look-img img {
  transform: scale(1.04) !important;
}

/* Bottom Sheet Polish */
.m-sheet {
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.m-sheet.open {
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.75), 0 0 1px 1px rgba(197, 160, 89, 0.25) !important;
}