/* ============================================================
   M3 Components — Yofatik AI Client
   Phụ thuộc: tokens.css
   Chứa: typography, button, icon-button, fab, card, textfield,
         switch, checkbox, radio, chip, top-app-bar, nav-bar,
         nav-drawer, search-bar, tabs, dialog, snackbar, list,
         menu, divider, progress, expressive
   ============================================================ */

/* --------- Typography ---------- */
.m3-display-large       { font: 400 57px/64px var(--md-sys-typescale-font); letter-spacing: -0.25px; }
.m3-display-medium      { font: 400 45px/52px var(--md-sys-typescale-font); letter-spacing: 0; }
.m3-display-small       { font: 400 36px/44px var(--md-sys-typescale-font); letter-spacing: 0; }
.m3-headline-large      { font: 400 32px/40px var(--md-sys-typescale-font); letter-spacing: 0; }
.m3-headline-medium     { font: 400 28px/36px var(--md-sys-typescale-font); letter-spacing: 0; }
.m3-headline-small      { font: 400 24px/32px var(--md-sys-typescale-font); letter-spacing: 0; }
.m3-title-large         { font: 400 22px/28px var(--md-sys-typescale-font); letter-spacing: 0; }
.m3-title-medium        { font: 500 16px/24px var(--md-sys-typescale-font); letter-spacing: 0.15px; }
.m3-title-small         { font: 500 14px/20px var(--md-sys-typescale-font); letter-spacing: 0.1px; }
.m3-body-large          { font: 400 16px/24px var(--md-sys-typescale-font); letter-spacing: 0.5px; }
.m3-body-medium         { font: 400 14px/20px var(--md-sys-typescale-font); letter-spacing: 0.25px; }
.m3-body-small          { font: 400 12px/16px var(--md-sys-typescale-font); letter-spacing: 0.4px; }
.m3-label-large         { font: 500 14px/20px var(--md-sys-typescale-font); letter-spacing: 0.1px; }
.m3-label-medium        { font: 500 12px/16px var(--md-sys-typescale-font); letter-spacing: 0.5px; }
.m3-label-small         { font: 500 11px/16px var(--md-sys-typescale-font); letter-spacing: 0.5px; }

/* Expressive emphasized */
.m3-display-large-em    { font: 700 57px/64px var(--md-sys-typescale-font); letter-spacing: -0.25px; font-variation-settings: 'GRAD' 100; }
.m3-display-medium-em   { font: 700 45px/52px var(--md-sys-typescale-font); font-variation-settings: 'GRAD' 100; }
.m3-headline-large-em   { font: 700 32px/40px var(--md-sys-typescale-font); font-variation-settings: 'GRAD' 50; }
.m3-headline-medium-em  { font: 700 28px/36px var(--md-sys-typescale-font); font-variation-settings: 'GRAD' 50; }
.m3-title-large-em      { font: 600 22px/28px var(--md-sys-typescale-font); font-variation-settings: 'GRAD' 25; }

/* --------- State layer mixin (utility) ---------- */
.m3-state-layer { position: relative; overflow: hidden; isolation: isolate; }
.m3-state-layer::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0; pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  z-index: 0;
}
.m3-state-layer > * { position: relative; z-index: 1; }
.m3-state-layer:hover::before { opacity: 0.08; }
.m3-state-layer:focus-visible::before { opacity: 0.10; }
.m3-state-layer:active::before { opacity: 0.12; }

/* Focus ring */
.m3-focus-ring:focus-visible {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
}

/* --------- Buttons ---------- */
.m3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 24px;
  border: none; border-radius: var(--md-sys-shape-corner-full);
  font: 500 14px/20px var(--md-sys-typescale-font); letter-spacing: 0.1px;
  cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  text-decoration: none;
  transition:
    background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.m3-btn::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0; pointer-events: none;
  transition: opacity 100ms;
  z-index: 0;
}
.m3-btn > * { position: relative; z-index: 1; }
.m3-btn:hover::before { opacity: 0.08; }
.m3-btn:focus-visible::before { opacity: 0.10; }
.m3-btn:active::before { opacity: 0.12; }
.m3-btn:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.m3-btn:disabled {
  background: rgb(from var(--md-sys-color-on-surface) r g b / 0.12) !important;
  color: rgb(from var(--md-sys-color-on-surface) r g b / 0.38) !important;
  box-shadow: none !important; cursor: not-allowed;
}
.m3-btn:disabled::before { display: none; }

.m3-btn-filled   { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.m3-btn-tonal    { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.m3-btn-outlined { background: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); }
.m3-btn-outlined:focus-visible { border-color: var(--md-sys-color-primary); }
.m3-btn-elevated { background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-primary); box-shadow: var(--md-sys-elevation-level-1); }
.m3-btn-elevated:hover { box-shadow: var(--md-sys-elevation-level-2); }
.m3-btn-text     { background: transparent; color: var(--md-sys-color-primary); padding: 0 12px; }

.m3-btn-large    { height: 56px; padding: 0 32px; font-size: 16px; }
.m3-btn-small    { height: 32px; padding: 0 16px; font-size: 13px; }

/* --------- Icon Button ---------- */
.m3-icon-btn {
  width: 40px; height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  display: inline-grid; place-items: center;
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  border: none; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: background 100ms;
}
.m3-icon-btn::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0; pointer-events: none;
  transition: opacity 100ms;
}
.m3-icon-btn:hover::before { opacity: 0.08; }
.m3-icon-btn:focus-visible::before { opacity: 0.10; }
.m3-icon-btn:active::before { opacity: 0.12; }
.m3-icon-btn:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.m3-icon-btn-filled   { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.m3-icon-btn-tonal    { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.m3-icon-btn-outlined { border: 1px solid var(--md-sys-color-outline); }

/* --------- FAB ---------- */
.m3-fab {
  width: 56px; height: 56px;
  border-radius: var(--md-sys-shape-corner-lg);
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
  border: none; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--md-sys-elevation-level-3);
  position: relative; overflow: hidden; isolation: isolate;
  transition:
    box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.m3-fab::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0; pointer-events: none;
  transition: opacity 100ms;
}
.m3-fab:hover { box-shadow: var(--md-sys-elevation-level-4); transform: scale(1.04); }
.m3-fab:hover::before { opacity: 0.08; }
.m3-fab:active { animation: m3-spring 400ms var(--md-sys-motion-easing-emphasized); }
.m3-fab-extended {
  width: auto; padding: 0 20px 0 16px; gap: 12px;
  display: inline-flex; align-items: center;
  font: 500 14px/20px var(--md-sys-typescale-font); letter-spacing: 0.1px;
}
.m3-fab-large    { width: 96px; height: 96px; border-radius: var(--md-sys-shape-corner-xl); }
.m3-fab-pill     { border-radius: var(--md-sys-shape-corner-full); }

@keyframes m3-spring {
  0%   { transform: scale(0.96); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* --------- Cards ---------- */
.m3-card {
  border-radius: var(--md-sys-shape-corner-md);
  padding: 16px;
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--md-sys-color-on-surface);
  transition:
    background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
    border-radius var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}
.m3-card-elevated  { background: var(--md-sys-color-surface-container-low); box-shadow: var(--md-sys-elevation-level-1); }
.m3-card-elevated:hover { box-shadow: var(--md-sys-elevation-level-2); }
.m3-card-filled    { background: var(--md-sys-color-surface-container-highest); }
.m3-card-outlined  { background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); }
.m3-card-interactive { cursor: pointer; }
.m3-card-interactive::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0; pointer-events: none;
  transition: opacity 100ms; z-index: 0;
}
.m3-card-interactive > * { position: relative; z-index: 1; }
.m3-card-interactive:hover::before { opacity: 0.08; }
.m3-card-interactive:focus-visible::before { opacity: 0.10; }
.m3-card-interactive:active::before { opacity: 0.12; }
.m3-card-morph:hover { border-radius: var(--md-sys-shape-corner-sm); }

.m3-card-asymm-tl-br { border-radius: 28px 12px 28px 12px; }
.m3-card-asymm-hero  { border-radius: 28px 12px 12px 28px; }

.m3-card-hero {
  background: linear-gradient(135deg,
    var(--md-sys-color-primary-container) 0%,
    var(--md-sys-color-tertiary-container) 100%);
  color: var(--md-sys-color-on-primary-container);
  border-radius: var(--md-sys-shape-corner-xl);
  padding: 32px;
}
.m3-card-media {
  width: calc(100% + 32px); margin: -16px -16px 16px;
  display: block; aspect-ratio: 16/9; object-fit: cover;
}
.m3-card-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* Bento grid */
.m3-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  grid-auto-rows: 200px;
}
@media (max-width: 768px) {
  .m3-bento { grid-template-columns: repeat(4, 1fr); }
  .m3-bento > * { grid-column: span 4 !important; grid-row: span 1 !important; }
}

/* --------- Text Field ---------- */
.m3-textfield {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%;
  margin-bottom: 16px;
}
.m3-textfield-input {
  height: 56px; padding: 8px 16px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-xs);
  background: transparent; color: var(--md-sys-color-on-surface);
  font: 400 16px/24px var(--md-sys-typescale-font); letter-spacing: 0.5px;
  outline: none;
  transition: border-color 200ms, border-width 200ms, padding 200ms;
}
.m3-textfield-input:hover { border-color: var(--md-sys-color-on-surface); }
.m3-textfield-input:focus { border: 2px solid var(--md-sys-color-primary); padding: 7px 15px; }
.m3-textfield-label {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  background: var(--md-sys-color-surface);
  padding: 0 4px;
  color: var(--md-sys-color-on-surface-variant);
  font: 400 16px/24px var(--md-sys-typescale-font); letter-spacing: 0.5px;
  pointer-events: none;
  transition: all 200ms var(--md-sys-motion-easing-standard);
}
.m3-textfield-input:focus + .m3-textfield-label,
.m3-textfield-input:not(:placeholder-shown) + .m3-textfield-label {
  top: 0; transform: translateY(-50%);
  font-size: 12px; line-height: 16px;
  color: var(--md-sys-color-primary);
}
.m3-textfield-supporting {
  font: 400 12px/16px var(--md-sys-typescale-font); letter-spacing: 0.4px;
  color: var(--md-sys-color-on-surface-variant);
  padding: 4px 16px 0;
}
.m3-textfield-input:invalid:not(:placeholder-shown) { border-color: var(--md-sys-color-error); }
.m3-textfield-input:invalid:not(:placeholder-shown) + .m3-textfield-label,
.m3-textfield-input:invalid:not(:placeholder-shown) ~ .m3-textfield-supporting {
  color: var(--md-sys-color-error);
}
.m3-textfield-input--textarea { height: auto; min-height: 120px; padding: 16px; resize: vertical; }
.m3-textfield-filled .m3-textfield-input {
  background: var(--md-sys-color-surface-container-highest);
  border: none; border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-xs) var(--md-sys-shape-corner-xs) 0 0;
}
.m3-textfield-filled .m3-textfield-input:focus { border-bottom: 2px solid var(--md-sys-color-primary); padding-bottom: 7px; }
.m3-textfield-filled .m3-textfield-label { background: transparent; }

.m3-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 44px;
}

/* --------- Switch ---------- */
.m3-switch {
  --track-w: 52px; --track-h: 32px; --thumb-d: 16px;
  position: relative; display: inline-block;
  width: var(--track-w); height: var(--track-h);
  cursor: pointer;
}
.m3-switch input { position: absolute; opacity: 0; pointer-events: none; }
.m3-switch-track {
  position: absolute; inset: 0;
  background: var(--md-sys-color-surface-container-highest);
  border: 2px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  transition: background 200ms, border-color 200ms;
}
.m3-switch-thumb {
  position: absolute;
  width: var(--thumb-d); height: var(--thumb-d);
  border-radius: 50%; background: var(--md-sys-color-outline);
  top: 50%; left: 8px;
  transform: translateY(-50%);
  transition: all 200ms var(--md-sys-motion-easing-emphasized);
}
.m3-switch input:checked ~ .m3-switch-track {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}
.m3-switch input:checked ~ .m3-switch-thumb {
  background: var(--md-sys-color-on-primary);
  width: 24px; height: 24px;
  left: calc(var(--track-w) - 24px - 4px);
}
.m3-switch:hover .m3-switch-thumb { transform: translateY(-50%) scale(1.2); }

/* --------- Checkbox / Radio ---------- */
.m3-checkbox {
  width: 18px; height: 18px;
  border: 2px solid var(--md-sys-color-on-surface-variant);
  border-radius: 2px;
  appearance: none; cursor: pointer; position: relative;
  transition: all 150ms;
}
.m3-checkbox:checked {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}
.m3-checkbox:checked::after {
  content: ''; position: absolute;
  left: 4px; top: 0; width: 6px; height: 12px;
  border: solid var(--md-sys-color-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.m3-checkbox:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }

.m3-radio {
  width: 20px; height: 20px;
  border: 2px solid var(--md-sys-color-on-surface-variant);
  border-radius: 50%;
  appearance: none; cursor: pointer; position: relative;
  transition: border-color 150ms;
}
.m3-radio:checked { border-color: var(--md-sys-color-primary); }
.m3-radio:checked::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--md-sys-color-primary);
}

/* --------- Chip ---------- */
.m3-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 16px;
  border-radius: var(--md-sys-shape-corner-sm);
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface-variant);
  font: 500 14px/20px var(--md-sys-typescale-font); letter-spacing: 0.1px;
  cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: background 150ms, border-color 150ms;
}
.m3-chip::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
  pointer-events: none; transition: opacity 100ms;
}
.m3-chip > * { position: relative; z-index: 1; }
.m3-chip:hover::before { opacity: 0.08; }
.m3-chip:focus-visible::before { opacity: 0.10; }
.m3-chip:active::before { opacity: 0.12; }
.m3-chip:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.m3-chip[aria-selected="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}
.m3-chip-input { background: var(--md-sys-color-surface-container-low); border: none; padding-left: 4px; }
.m3-chip-leading-icon { width: 18px; height: 18px; border-radius: 50%; }
.m3-chip-close {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  margin-right: -8px;
  background: transparent; border: none;
}
.m3-chip-close:hover { background: rgb(from currentColor r g b / 0.12); }
.m3-chip-set { display: flex; flex-wrap: wrap; gap: 8px; }

/* --------- Top App Bar ---------- */
.m3-top-app-bar {
  height: 64px;
  display: flex; align-items: center; gap: 4px;
  padding: 0 4px 0 16px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  position: sticky; top: 0;
  z-index: 100;
  transition:
    background var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
    box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}
.m3-top-app-bar.is-scrolled {
  background: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-level-2);
}
.m3-top-app-bar.is-scrolled-blur {
  background: rgb(from var(--md-sys-color-surface-container) r g b / 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.m3-top-app-bar-title {
  font: 400 22px/28px var(--md-sys-typescale-font);
  margin-left: 12px; flex: 1;
}
.m3-top-app-bar-actions { display: flex; gap: 0; }
.m3-top-app-bar-center .m3-top-app-bar-title { text-align: center; }
.m3-top-app-bar-large { height: 152px; align-items: flex-end; padding: 0 16px 28px; }
.m3-top-app-bar-large .m3-top-app-bar-title { font: 400 32px/40px var(--md-sys-typescale-font); }

/* --------- Nav Bar (mobile bottom) ---------- */
.m3-nav-bar {
  display: flex; height: 80px;
  background: var(--md-sys-color-surface-container);
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 100;
}
.m3-nav-bar-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  padding: 12px 0 16px;
  color: var(--md-sys-color-on-surface-variant);
  font: 500 12px/16px var(--md-sys-typescale-font); letter-spacing: 0.5px;
  text-decoration: none;
}
.m3-nav-bar-icon-wrap {
  width: 64px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--md-sys-shape-corner-full);
  transition: background 200ms;
}
.m3-nav-bar-item.is-active { color: var(--md-sys-color-on-secondary-container); }
.m3-nav-bar-item.is-active .m3-nav-bar-icon-wrap { background: var(--md-sys-color-secondary-container); }
.m3-nav-bar-item:hover .m3-nav-bar-icon-wrap { background: rgb(from var(--md-sys-color-on-surface) r g b / 0.08); }

/* --------- Nav Drawer ---------- */
.m3-nav-drawer {
  position: fixed; top: 0; left: 0;
  width: 360px; max-width: 80vw;
  height: 100vh;
  background: var(--md-sys-color-surface-container-low);
  padding: 12px;
  transform: translateX(-100%);
  transition: transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized);
  z-index: 200;
  overflow-y: auto;
}
.m3-nav-drawer.is-open { transform: translateX(0); }
.m3-nav-drawer-scrim {
  position: fixed; inset: 0;
  background: var(--md-sys-color-scrim);
  opacity: 0; visibility: hidden;
  transition: opacity 300ms, visibility 300ms;
  z-index: 199;
}
.m3-nav-drawer-scrim.is-open { opacity: 0.32; visibility: visible; }
.m3-nav-drawer-header {
  font: 400 14px/20px var(--md-sys-typescale-font); letter-spacing: 0.1px;
  color: var(--md-sys-color-on-surface-variant);
  padding: 16px 16px 8px;
}
.m3-nav-drawer-item {
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 16px;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  font: 500 14px/20px var(--md-sys-typescale-font);
  text-decoration: none; cursor: pointer;
}
.m3-nav-drawer-item:hover { background: rgb(from var(--md-sys-color-on-surface) r g b / 0.08); }
.m3-nav-drawer-item.is-active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* --------- Search Bar ---------- */
.m3-search-bar {
  display: flex; align-items: center; gap: 16px;
  height: 56px; padding: 0 16px;
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface);
  cursor: text;
  transition: box-shadow 200ms, background 200ms;
}
.m3-search-bar:hover { background: var(--md-sys-color-surface-container-highest); }
.m3-search-bar:focus-within { box-shadow: var(--md-sys-elevation-level-2); }
.m3-search-bar-input {
  flex: 1; border: none; background: transparent;
  color: inherit; outline: none;
  font: 400 16px/24px var(--md-sys-typescale-font);
}
.m3-search-bar-input::placeholder { color: var(--md-sys-color-on-surface-variant); }

/* --------- Tabs ---------- */
.m3-tabs {
  display: flex;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  height: 48px;
  background: var(--md-sys-color-surface);
}
.m3-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px;
  color: var(--md-sys-color-on-surface-variant);
  font: 500 14px/20px var(--md-sys-typescale-font); letter-spacing: 0.1px;
  text-decoration: none; cursor: pointer;
  position: relative;
  transition: color 150ms, background 150ms;
  background: transparent; border: none;
}
.m3-tab.is-active { color: var(--md-sys-color-primary); }
.m3-tab.is-active::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--md-sys-color-primary);
  border-radius: 3px 3px 0 0;
}
.m3-tab:hover { background: rgb(from var(--md-sys-color-on-surface) r g b / 0.08); }

/* --------- Dialog ---------- */
.m3-dialog-scrim {
  position: fixed; inset: 0;
  background: var(--md-sys-color-scrim);
  opacity: 0; visibility: hidden;
  transition:
    opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
    visibility var(--md-sys-motion-duration-medium2);
  z-index: 1000;
  display: grid; place-items: center;
}
.m3-dialog-scrim.is-open { opacity: 0.32; visibility: visible; }
.m3-dialog {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-xl);
  box-shadow: var(--md-sys-elevation-level-3);
  min-width: 280px; max-width: 560px; width: 90vw;
  padding: 24px;
  position: relative; z-index: 1001;
  transform: scale(0.92) translateY(8px);
  opacity: 0;
  transition:
    transform var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized-decelerate),
    opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
}
.m3-dialog-scrim.is-open .m3-dialog { transform: scale(1) translateY(0); opacity: 1; }
.m3-dialog-icon { display: grid; place-items: center; margin-bottom: 16px; color: var(--md-sys-color-secondary); font-size: 24px; }
.m3-dialog-title { font: 400 24px/32px var(--md-sys-typescale-font); margin-bottom: 16px; }
.m3-dialog-body  { font: 400 14px/20px var(--md-sys-typescale-font); color: var(--md-sys-color-on-surface-variant); margin-bottom: 24px; }
.m3-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }

.m3-dialog-fullscreen {
  position: fixed; inset: 0;
  background: var(--md-sys-color-surface);
  z-index: 1000;
  transform: translateY(100%);
  transition: transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized);
  overflow-y: auto;
}
.m3-dialog-fullscreen.is-open { transform: translateY(0); }

.m3-bottom-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-xl) var(--md-sys-shape-corner-xl) 0 0;
  padding: 16px;
  max-height: 80vh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized-decelerate);
  z-index: 1001;
  box-shadow: var(--md-sys-elevation-level-3);
}
.m3-bottom-sheet.is-open { transform: translateY(0); }
.m3-bottom-sheet-handle {
  width: 32px; height: 4px;
  background: var(--md-sys-color-on-surface-variant);
  opacity: 0.4; border-radius: 2px;
  margin: 0 auto 16px;
}

/* --------- Snackbar ---------- */
.m3-snackbar {
  position: fixed;
  bottom: 16px; left: 50%;
  transform: translateX(-50%) translateY(120%);
  display: flex; align-items: center; gap: 8px;
  min-width: 288px; max-width: 568px;
  height: 48px; padding: 0 16px;
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  border-radius: var(--md-sys-shape-corner-xs);
  box-shadow: var(--md-sys-elevation-level-3);
  font: 400 14px/20px var(--md-sys-typescale-font); letter-spacing: 0.25px;
  transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  z-index: 1100;
}
.m3-snackbar.is-open { transform: translateX(-50%) translateY(0); }
.m3-snackbar-action {
  margin-left: auto;
  color: var(--md-sys-color-inverse-primary);
  background: transparent; border: none;
  font: 500 14px/20px var(--md-sys-typescale-font); letter-spacing: 0.1px;
  cursor: pointer; padding: 8px;
  border-radius: var(--md-sys-shape-corner-full);
}

/* --------- List ---------- */
.m3-list { padding: 8px 0; }
.m3-list-item {
  display: flex; align-items: center; gap: 16px;
  min-height: 56px; padding: 8px 16px;
  cursor: pointer; position: relative;
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  transition: background 100ms;
}
.m3-list-item:hover { background: rgb(from var(--md-sys-color-on-surface) r g b / 0.08); }
.m3-list-item.is-active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.m3-list-item-leading { width: 24px; flex-shrink: 0; color: var(--md-sys-color-on-surface-variant); }
.m3-list-item-content { flex: 1; }
.m3-list-item-headline { font: 400 16px/24px var(--md-sys-typescale-font); }
.m3-list-item-supporting { font: 400 14px/20px var(--md-sys-typescale-font); color: var(--md-sys-color-on-surface-variant); }
.m3-list-item-trailing { color: var(--md-sys-color-on-surface-variant); flex-shrink: 0; }

/* --------- Menu (dropdown / submenu) ---------- */
.m3-menu {
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-xs);
  box-shadow: var(--md-sys-elevation-level-2);
  padding: 8px 0;
  min-width: 112px;
  max-width: 280px;
}
.m3-menu-item {
  display: flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 12px;
  color: var(--md-sys-color-on-surface);
  font: 400 14px/20px var(--md-sys-typescale-font);
  cursor: pointer;
  transition: background 100ms;
  text-decoration: none;
}
.m3-menu-item:hover { background: rgb(from var(--md-sys-color-on-surface) r g b / 0.08); }
.m3-menu-divider {
  height: 1px;
  background: var(--md-sys-color-outline-variant);
  margin: 8px 0;
}

/* --------- Divider ---------- */
.m3-divider { height: 1px; background: var(--md-sys-color-outline-variant); border: none; }
.m3-divider-vertical { width: 1px; height: 100%; background: var(--md-sys-color-outline-variant); }

/* --------- Progress ---------- */
.m3-progress {
  width: 100%; height: 4px;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
  position: relative;
}
.m3-progress-bar {
  height: 100%;
  background: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  transition: width 250ms var(--md-sys-motion-easing-standard);
}
.m3-progress-circular {
  width: 48px; height: 48px;
  border: 4px solid var(--md-sys-color-surface-container-highest);
  border-top-color: var(--md-sys-color-primary);
  border-radius: 50%;
  animation: m3-spin 1.4s linear infinite;
}
@keyframes m3-spin {
  to { transform: rotate(360deg); }
}

/* --------- Color utility (M3) ---------- */
.m3-text-primary       { color: var(--md-sys-color-primary); }
.m3-text-secondary     { color: var(--md-sys-color-secondary); }
.m3-text-tertiary      { color: var(--md-sys-color-tertiary); }
.m3-text-error         { color: var(--md-sys-color-error); }
.m3-text-on-surface    { color: var(--md-sys-color-on-surface); }
.m3-text-on-surface-variant { color: var(--md-sys-color-on-surface-variant); }

.m3-bg-surface         { background: var(--md-sys-color-surface); }
.m3-bg-surface-container { background: var(--md-sys-color-surface-container); }
.m3-bg-surface-container-high { background: var(--md-sys-color-surface-container-high); }
.m3-bg-primary         { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.m3-bg-primary-container { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.m3-bg-tertiary-container { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }

.m3-shadow-1 { box-shadow: var(--md-sys-elevation-level-1); }
.m3-shadow-2 { box-shadow: var(--md-sys-elevation-level-2); }
.m3-shadow-3 { box-shadow: var(--md-sys-elevation-level-3); }
.m3-shadow-4 { box-shadow: var(--md-sys-elevation-level-4); }

.m3-radius-xs   { border-radius: var(--md-sys-shape-corner-xs); }
.m3-radius-sm   { border-radius: var(--md-sys-shape-corner-sm); }
.m3-radius-md   { border-radius: var(--md-sys-shape-corner-md); }
.m3-radius-lg   { border-radius: var(--md-sys-shape-corner-lg); }
.m3-radius-xl   { border-radius: var(--md-sys-shape-corner-xl); }
.m3-radius-full { border-radius: var(--md-sys-shape-corner-full); }

/* --------- Expressive utilities ---------- */
.m3-bg-mesh-hero {
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%,  rgb(from var(--md-sys-color-primary) r g b / 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 90%, rgb(from var(--md-ref-palette-tertiary-80) r g b / 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgb(from var(--md-sys-color-secondary-container) r g b / 0.4) 0%, transparent 70%),
    var(--md-sys-color-surface);
}

/* VIBRANT — gradient mạnh cho hero AI/marketing */
.m3-bg-mesh-vivid {
  background:
    radial-gradient(ellipse 70% 60% at 10% 10%, rgb(from var(--md-ref-palette-primary-40) r g b / 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 90% 90%, rgb(from var(--md-ref-palette-tertiary-60) r g b / 0.65) 0%, transparent 65%),
    radial-gradient(ellipse 60% 60% at 90% 10%, rgb(from var(--md-ref-palette-tertiary-80) r g b / 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 10% 90%, rgb(from var(--md-ref-palette-primary-60) r g b / 0.35) 0%, transparent 60%),
    var(--md-sys-color-surface);
  position: relative;
  overflow: hidden;
}
.m3-bg-mesh-vivid::before {
  content: '';
  position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 30% 30%, rgb(from var(--md-ref-palette-tertiary-90) r g b / 0.25) 0%, transparent 30%),
    radial-gradient(circle at 70% 70%, rgb(from var(--md-ref-palette-primary-90) r g b / 0.3) 0%, transparent 35%);
  filter: blur(40px);
  z-index: 0;
  animation: m3-mesh-drift 30s ease-in-out infinite;
  pointer-events: none;
}
.m3-bg-mesh-vivid > * { position: relative; z-index: 1; }

@keyframes m3-mesh-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(2%, -1%) rotate(2deg); }
  66% { transform: translate(-1%, 2%) rotate(-2deg); }
}

[data-theme="dark"] .m3-bg-mesh-vivid {
  background:
    radial-gradient(ellipse 70% 60% at 10% 10%, rgb(from var(--md-ref-palette-primary-30) r g b / 0.7) 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 90% 90%, rgb(from var(--md-ref-palette-tertiary-30) r g b / 0.7) 0%, transparent 65%),
    radial-gradient(ellipse 60% 60% at 90% 10%, rgb(from var(--md-ref-palette-tertiary-40) r g b / 0.5) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 10% 90%, rgb(from var(--md-ref-palette-primary-40) r g b / 0.4) 0%, transparent 60%),
    var(--md-sys-color-surface);
}

/* Vivid gradient text — heading bắt mắt */
.m3-text-gradient {
  background: linear-gradient(135deg,
    var(--md-sys-color-primary) 0%,
    var(--md-ref-palette-tertiary-60) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Color-pop chip dùng tertiary high-chroma */
.m3-chip-pop {
  background: var(--md-ref-palette-tertiary-90);
  color: var(--md-ref-palette-tertiary-10);
  border-color: transparent;
}
[data-theme="dark"] .m3-chip-pop {
  background: var(--md-ref-palette-tertiary-30);
  color: var(--md-ref-palette-tertiary-90);
}

/* Glow text shadow */
.m3-text-glow {
  text-shadow:
    0 0 20px rgb(from var(--md-sys-color-primary) r g b / 0.5),
    0 0 40px rgb(from var(--md-sys-color-tertiary) r g b / 0.3);
}

.m3-spring-press:active { animation: m3-spring 400ms var(--md-sys-motion-easing-emphasized); }

/* Pulse glow CTA */
@keyframes m3-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgb(from var(--md-sys-color-primary) r g b / 0.45), var(--md-sys-elevation-level-2); }
  50%      { box-shadow: 0 0 0 14px rgb(from var(--md-sys-color-primary) r g b / 0), var(--md-sys-elevation-level-3); }
}
.m3-pulse-glow { animation: m3-pulse-glow 2.4s ease-in-out infinite; }