/* Kho ứng dụng theo ngôn ngữ kính mờ của trang Thiết bị. Màu lấy từ biến trong /gmm-theme.css (đổi theo giao diện tài khoản,
   nút 🎨); giá trị mặc định = Champagne như trước. Bìa thẻ (màu do catalog.js đặt qua --cover-bg) giữ chữ trắng ở mọi giao diện.
   Lưu ý: catalog.js đặt --accent riêng trên từng thẻ (màu theo bìa), nên trong thẻ dùng rgb(var(--accent-rgb)) cho màu nhấn chung. */
:root {
  color-scheme: var(--scheme);
  --glass: var(--glass-bg);
  --button-fill: var(--btn-bg);
  color: var(--text);
  background: var(--html-bg);
  font-family: 'Be Vietnam Pro','Segoe UI',Arial,sans-serif;
}
html { background: var(--html-bg); }
body {
  min-height: 100vh;
  color: var(--text);
  background: var(--page-bg);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body,input,select,textarea,button { font-family:'Be Vietnam Pro','Segoe UI',Arial,sans-serif; }
body:before,body:after { content:'';position:fixed;border-radius:50%;filter:blur(12px);pointer-events:none;z-index:0;opacity:.75; }
body:before { width:320px;height:320px;left:-130px;top:22%;background:var(--blob-a); }
body:after { width:420px;height:420px;right:-180px;bottom:-120px;background:var(--blob-b); }
.stripes { position:relative;height:2px;background:linear-gradient(90deg,transparent,#e7be78 20%,#fff8e8 48%,#bcb7c9 76%,transparent);box-shadow:0 0 18px rgba(242,209,154,.75); }
.container { width:min(1020px,calc(100% - 28px));position:relative;z-index:1; }
/* Màn rộng (≥ 1280px, 02/10/2026): kho dàn ra hai bên như các trang khác (rộng tới 1700px) — thẻ giữ cỡ ~300px, thêm thẻ mỗi hàng (5 thẻ ở màn 1920). */
@media(min-width:1280px) { main.container,footer.container { width:min(1700px,calc(100% - 48px)); }.app-grid { grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); } }
.site-header,.site-nav,.app-card,.download-guide,.admin-bar,.empty-state,dialog {
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
.site-header { width:min(1080px,calc(100% - 28px));margin:18px auto 10px;padding:17px 20px;border-radius:26px;position:relative;z-index:2; }
.header-inner { width:100%;min-height:54px;gap:20px; }
.brand { gap:15px;letter-spacing:normal;min-width:0; }
.company-logo { display:block;height:auto;object-fit:contain;filter:drop-shadow(0 5px 13px rgba(24,17,15,.28)); }
.header-logo { width:128px;max-height:54px;padding-right:15px;border-right:1px solid rgba(var(--tint),.22);flex:none; }
.header-copy { min-width:0; }
.header-copy strong { display:flex;align-items:center;gap:9px;font-size:20px;font-weight:700;letter-spacing:-.25px;color:var(--text);text-shadow:var(--title-glow); }
.header-copy small { margin-top:5px;font-size:12.5px;line-height:1.6;font-weight:400;letter-spacing:normal;color:var(--text2); }
.dot { flex:none;width:10px;height:10px;border-radius:50%;background:linear-gradient(145deg,#ff7e8b,#ff3f62);box-shadow:inset 0 1px 1px rgba(255,255,255,.72),0 0 0 4px rgba(255,74,94,.2),0 0 18px rgba(255,64,93,.62); }
.site-nav { width:min(940px,calc(100% - 28px));margin:0 auto;position:sticky;top:10px;z-index:10;padding:6px;border-radius:20px;gap:6px;flex-wrap:nowrap;overflow-x:auto;background:var(--nav-bg); }
.site-nav a { flex:1;text-align:center;white-space:nowrap;border:1px solid transparent;border-radius:15px;padding:11px 9px;color:var(--muted);font-size:13px;font-weight:700; }
.site-nav a:hover { background:rgba(var(--tint),.09);color:var(--text); }
.site-nav a[aria-current] { color:var(--text);border-color:rgba(var(--tint),.32);background:linear-gradient(145deg,rgba(var(--accent-rgb),.25),rgba(var(--tint),.06));box-shadow:inset 0 1px 0 rgba(255,250,240,.42),0 7px 20px rgba(35,25,22,.27); }
.site-nav a[aria-current]:after { display:none; }
.intro { padding:30px 5px 25px; }
.eyebrow { color:var(--accent);font-size:10px;letter-spacing:1.5px; }
h1 { color:var(--text);font-size:28px;letter-spacing:-.6px; }
h1>span { color:var(--accent); }
.intro-copy { color:var(--muted);font-size:13px; }
.drive-note { color:var(--muted);font-size:11px; }
.drive-note strong { color:var(--text); }
.toolbar { border:1px solid var(--border);border-radius:20px;padding:12px;background:rgba(48,40,38,.32);gap:14px; }
.categories { gap:5px; }
.categories button { color:var(--muted);font-size:12px;border:1px solid transparent;border-radius:12px;padding:9px 11px; }
.categories button:hover { background:rgba(var(--tint),.09);color:var(--text); }
.categories button[aria-pressed=true] { color:var(--text);border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.17);box-shadow:inset 0 1px 0 rgba(255,250,240,.18); }
.search { background:linear-gradient(145deg,rgba(var(--tint),.12),rgba(var(--tint),.055));border-color:rgba(var(--tint),.2);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,250,239,.13); }
.search svg { stroke:var(--muted); }
.search input { color:var(--text);font-size:12px; }
input::placeholder,textarea::placeholder { color:var(--faint); }
.search:focus-within { outline:2px solid rgb(var(--accent-rgb));outline-offset:2px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid rgb(var(--accent-rgb));outline-offset:3px; }
.list-heading { font-size:12px;color:var(--muted);padding:0 4px; }
.list-heading span { font-size:11px; }
.app-grid { gap:20px; }
.app-card { border-radius:24px; }
.app-card:hover { box-shadow:var(--glass-shadow),0 8px 22px rgba(32,23,20,.18); }
.cover { margin:8px 8px 0;border-radius:18px;border:1px solid rgba(255,244,226,.18);background:var(--cover-bg,linear-gradient(125deg,#615144,#a58b6b));color:#fffaf2; }
.cover-code { border-color:rgba(255,244,226,.35);border-radius:18px;background:rgba(255,244,226,.1);text-shadow:0 2px 12px rgba(24,17,15,.15); }
.cover-label { font-size:16px; }
.cover-corner { opacity:.85;color:#fff5e8; }
.cover img { border-radius:inherit; }
.card-content { padding:18px; }
.card-meta { color:var(--muted);font-size:11px; }
.category-tag { color:var(--heading);background:rgba(var(--accent-rgb),.2);border:1px solid rgba(var(--accent-rgb),.2);border-radius:20px;font-size:10px;padding:4px 8px; }
.app-card h2 { color:var(--text);font-weight:700;font-size:15px; }
.description { color:var(--muted);font-size:12px;line-height:1.8; }
.card-footer { border-color:rgba(var(--tint),.16);color:var(--muted);margin-inline:18px;flex-wrap:wrap;font-size:11px; }
.pending { color:var(--muted);font-size:11px; }
.pending:before { background:var(--amber); }
.download-link,.primary-button,.empty-state button { background:var(--btn-bg);color:var(--btn-text);border:1px solid rgba(var(--tint),.4);border-radius:14px;font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 7px 18px rgba(37,27,24,.15); }
.download-link { font-size:11px; }
.download-link:hover,.primary-button:hover,.empty-state button:hover { background:var(--btn-bg);color:var(--btn-text);filter:brightness(1.08); }
.secondary-button,.card-admin button { background:linear-gradient(145deg,rgba(var(--tint),.17),rgba(var(--tint),.065));color:var(--text);border:1px solid rgba(var(--tint),.25);border-radius:12px; }
.secondary-button:hover,.card-admin button:hover { background:rgba(var(--tint),.2); }
.card-admin { padding-inline:18px; }
.card-admin button { font-size:11px; }
.card-admin button:last-child,.danger-button { background:rgba(178,54,60,.24);color:var(--err-text);border:1px solid rgba(255,125,128,.35);border-radius:12px; }
.admin-bar { border-radius:20px; }
.admin-bar #admin-name { color:var(--muted); }
.empty-state { border-radius:24px; }
.empty-state>span { color:var(--accent); }
.empty-state p { color:var(--muted); }
.download-guide { margin-top:30px;border-radius:26px;padding:25px;scroll-margin-top:85px; }
.download-guide .eyebrow { color:var(--accent);font-size:10px; }
.download-guide h2 { font-size:18px;color:var(--text); }
.download-guide li { font-size:12px;color:var(--text); }
.download-guide li b { color:var(--accent); }
.download-guide small,.guide-note { color:var(--muted);font-size:11px; }
.guide-note { border-color:rgba(var(--tint),.16); }
footer.container { color:var(--muted);font-size:11px;padding:25px 5px; }
footer strong,footer a:hover { color:var(--text); }
dialog { color:var(--text);border-radius:26px;background:linear-gradient(145deg,rgba(60,51,49,.97),rgba(65,58,60,.95)); }
dialog::backdrop { background:rgba(42,34,34,.58);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); }
.dialog-form { padding:25px; }
.dialog-form label { color:var(--muted);font-size:12px; }
.dialog-form input,.dialog-form textarea,.dialog-form select { color:var(--text);background:linear-gradient(145deg,rgba(var(--tint),.12),rgba(var(--tint),.055));border:1px solid rgba(var(--tint),.2);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,250,239,.13),0 7px 18px rgba(37,27,24,.13); }
.dialog-form select option { background:var(--menu-solid);color:var(--text); }
.dialog-form input[type=file]::file-selector-button { color:var(--btn-text);background:var(--btn-bg);border-radius:8px; }
.dialog-form input:focus,.dialog-form textarea:focus,.dialog-form select:focus { border-color:rgba(var(--accent-rgb),.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 3px rgba(var(--accent-rgb),.18); }
.form-help,.dialog-form small,.close-dialog { color:var(--muted); }
.required { color:var(--red); }
.form-error { background:var(--red2);color:var(--err-text);border-color:rgba(255,125,128,.4);border-radius:12px; }
.image-preview img { border-color:var(--border);border-radius:16px; }
.image-preview button { background:rgba(48,40,38,.88);color:#fffaf2;border-radius:10px; }
#login-dialog { width:min(390px,calc(100% - 28px));border-radius:30px; }
#login-dialog .dialog-form { padding:28px; }
.login-logo { width:min(220px,78%);max-height:100px;margin:0 auto 23px; }
#login-dialog .dialog-heading { gap:10px; }
#login-dialog .dialog-heading h2 { font-size:18px; }
.toast { background:var(--btn-bg);color:var(--btn-text);border:1px solid rgba(var(--tint),.4);border-radius:20px;box-shadow:0 16px 40px rgba(37,27,24,.25); }
.toast button { color:inherit;opacity:.85; }
.skip-link { background:var(--menu-solid);color:var(--text); }
@media(max-width:1000px) { .toolbar { align-items:stretch; }.search { width:100%; }.categories { gap:5px; } }
@media(max-width:780px) { .header-copy strong { font-size:17px; }.header-copy small { font-size:11px; }.header-logo { width:100px; }.app-grid { gap:16px; }.intro { padding:25px 4px 22px; } }
@media(max-width:600px) {
  .site-header { padding:16px;border-radius:24px; }
  .header-inner { flex-wrap:wrap;gap:14px;min-height:0;padding:0; }
  .brand { gap:10px; }
  .header-logo { width:90px;max-height:42px;padding-right:10px; }
  .header-copy strong { font-size:16px;gap:8px; }
  .header-copy small { font-size:10px; }
  .site-nav { gap:3px; }.site-nav a { font-size:11px;padding:11px 7px; }
  h1 { font-size:25px; }.intro-copy { font-size:12px; }
  .toolbar { padding:10px;border-radius:18px; }.categories button { font-size:11px;padding:9px; }
  .list-heading { gap:6px;align-items:flex-start;justify-content:center;flex-direction:column;padding:16px 4px; }
  .app-grid { gap:18px; }.app-card { border-radius:24px; }.cover-label { font-size:18px; }
  .download-guide { padding:22px; }.dialog-form { padding:22px; }
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) {
  .site-header,.site-nav,.app-card,.download-guide,.admin-bar,.empty-state,dialog { background:var(--menu-solid); }
}
#login-panel{width:min(390px,calc(100% - 28px));margin:clamp(30px,14vh,130px) auto;border:1px solid var(--glass-border);border-radius:30px;background:var(--glass-bg);box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
#login-panel .dialog-form{padding:28px}#login-panel .dialog-heading{justify-content:center}#login-panel h2{font-size:19px;text-align:center}#login-panel .form-help{text-align:center}.login-back{display:block;margin-top:20px;text-align:center;font-size:12px;color:var(--muted)}.session-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.session-actions>span{font-size:12px;color:var(--muted)}@media(max-width:600px){.session-actions{justify-content:center;width:100%}.session-actions>span{flex-basis:100%;text-align:center}}
.theme-button{padding:9px 11px;line-height:1}

/* ===== Bìa thẻ: màu nền giữ nguyên, logo hoặc biểu tượng chỉ nằm trong ô vuông (23/09/2026) ===== */
.m-icon{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:34px;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;display:inline-block;width:1em;height:1em;overflow:hidden;-webkit-font-smoothing:antialiased;font-feature-settings:'liga';font-variation-settings:'opsz' 48,'wght' 300,'FILL' 0,'GRAD' 0;user-select:none;text-shadow:none}
.cover-code{position:relative;z-index:1;overflow:hidden;color:#fffaf2}
.cover-code.has-logo{padding:6px;background:rgba(255,250,242,.14)}
.cover .cover-code img{position:static;inset:auto;z-index:auto;display:block;width:100%;height:100%;object-fit:contain;border-radius:12px}
@media(max-width:520px){.cover-code .m-icon{font-size:38px}}

/* ===== Mô tả: giữ xuống dòng, gạch đầu dòng, chữ đậm, link; thu gọn 5 dòng ===== */
.description .desc-line{display:block}
.description .desc-bullet{display:flex;gap:7px}
.description .desc-dot{flex:none;color:rgb(var(--accent-rgb))}
.description .desc-text{min-width:0}
.description .desc-gap{display:block;height:.55em}
.description strong{color:var(--text);font-weight:600}
.description em{font-style:italic;color:var(--text2)}
.description code{font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:.9em;padding:1px 5px;border-radius:5px;background:rgba(var(--tint),.1);border:1px solid rgba(var(--tint),.14);color:var(--text2);overflow-wrap:anywhere}
.description a.desc-link{color:var(--heading);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.description.is-clamped{max-height:calc(1.8em * 5);overflow:hidden}
.description.is-clamped.is-overflowing{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 2.4em),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 2.4em),transparent)}
.desc-toggle{display:inline-block;margin-top:6px;padding:4px 0;border:0;background:none;color:var(--heading);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
.desc-toggle:hover{text-decoration:underline;text-underline-offset:2px}

/* ===== Hộp thoại: xem trước bìa, chọn màu, chọn biểu tượng, logo ===== */
.cover-preview{margin:18px 0 2px}
.cover-preview .cover{margin:0;aspect-ratio:16/7}
.dialog-form .picker{border:0;padding:0;margin:17px 0 0;min-width:0}
.dialog-form .picker legend{padding:0;margin:0 0 8px;font-size:12px;font-weight:500;color:var(--muted)}
.theme-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:9px}
.swatch{aspect-ratio:1;min-width:0;padding:0;border-radius:50%;border:1px solid rgba(var(--tint),.3);background:var(--swatch);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);cursor:pointer;transition:transform .18s cubic-bezier(.2,0,0,1)}
.swatch:hover{transform:scale(1.08)}
.swatch[aria-checked=true]{outline:2px solid rgb(var(--accent-rgb));outline-offset:3px}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px;max-height:170px;overflow-y:auto;overscroll-behavior:contain;padding:3px}
.icon-choice{display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:0;border-radius:12px;border:1px solid rgba(var(--tint),.14);background:rgba(var(--tint),.06);color:var(--text);cursor:pointer}
.icon-choice .m-icon{font-size:24px}
.icon-choice:hover{background:rgba(var(--tint),.13)}
.icon-choice[aria-checked=true]{border-color:rgb(var(--accent-rgb));background:rgba(var(--accent-rgb),.22);color:var(--text)}
.icon-auto{grid-column:span 2;aspect-ratio:auto;grid-auto-flow:column;gap:6px;padding:0 10px}
.icon-auto-label{font-size:11px;font-weight:600;white-space:nowrap}
.logo-row{display:flex;align-items:center;gap:12px}
.logo-thumb{flex:none;width:64px;height:64px;padding:6px;border-radius:16px;border:1px solid rgba(var(--tint),.25);background:rgba(var(--tint),.08)}
.logo-thumb img{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px}
.logo-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0}
.logo-actions input[type=file]{flex:1 1 180px;margin-top:0}
@media(prefers-reduced-motion:reduce){.swatch{transition:none}.swatch:hover{transform:none}}

/* ===== Xem thêm: thẻ nổi lên tại chỗ (dialog .card-pop do catalog.js điều khiển) ===== */
.card-pop{position:fixed;inset:auto;margin:0;padding:0;border:0;border-radius:24px;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;max-width:none;max-height:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;transform-origin:50% 0;color:var(--text);transition:box-shadow .38s cubic-bezier(.2,0,0,1)}
.card-pop[open]{animation:none}
.card-pop::backdrop{background:rgba(28,22,20,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card-pop[open]::backdrop{animation:m-fade 300ms ease-out both}
.card-pop.is-closing::backdrop{animation:m-undim 360ms cubic-bezier(.4,0,1,1) both}
.card-pop.is-lifted{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.34),0 30px 80px rgba(18,13,11,.55),0 0 70px rgba(var(--accent-rgb),.2)}
.card-pop .app-card{position:relative;min-height:100%;transition:border-color .38s ease}
.card-pop .app-card:hover{transform:none;box-shadow:var(--glass-shadow)}
.card-pop.is-lifted .app-card{border-color:rgba(var(--accent-rgb),.45)}
.card-pop .card-close{position:absolute;top:16px;right:16px;z-index:3;display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid rgba(255,244,226,.3);background:rgba(40,32,30,.5);color:#fffaf2;font:inherit;font-size:20px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .18s ease,transform .24s cubic-bezier(.2,0,0,1)}
.card-pop .card-close:hover{background:rgba(64,52,48,.72)}
.card-pop .card-close:active{transform:scale(.92)}
@media(prefers-reduced-motion:reduce){.card-pop,.card-pop .app-card{transition:none}}

/* ===== Đổi giao diện theo tài khoản (02/10/2026): hình nền tự tải lên + chỉnh riêng cho giao diện khác Champagne ===== */
html.has-bg body{background:var(--html-bg)}
html.has-bg body:before{top:0;right:0;bottom:0;left:0;width:auto;height:auto;border-radius:0;filter:none;opacity:1;background:linear-gradient(rgba(var(--dim-rgb),var(--bg-dim,.35)),rgba(var(--dim-rgb),var(--bg-dim,.35))),var(--user-bg) center/cover no-repeat,var(--html-bg)}
html.has-bg body:after{display:none}
html.has-bg .toolbar{background:var(--solid-bg)}
html[data-theme=brand] dialog,html[data-theme=midnight] dialog,html[data-theme=light] dialog,html[data-theme=minimal] dialog{background:var(--modal-bg)}
html[data-theme=brand] .card-pop,html[data-theme=midnight] .card-pop,html[data-theme=light] .card-pop,html[data-theme=minimal] .card-pop{background:transparent}
html[data-theme=midnight] dialog::backdrop{background:rgba(6,8,16,.7)}html[data-theme=brand] dialog::backdrop{background:var(--overlay)}
html[data-theme=light] dialog::backdrop{background:rgba(40,30,20,.35)}
html[data-theme=minimal] dialog::backdrop{background:rgba(17,24,39,.4)}
html[data-theme=midnight] .toolbar{background:rgba(24,31,47,.45)}html[data-theme=brand] .toolbar{background:var(--surface)}
html[data-theme=light] .toolbar{background:rgba(255,255,255,.6)}
html[data-theme=minimal] .toolbar{background:#fff}
html[data-theme=light] .company-logo,html[data-theme=minimal] .company-logo{filter:brightness(0) opacity(.8)}
html[data-theme=light] .download-link,html[data-theme=minimal] .download-link,html[data-theme=light] .primary-button,html[data-theme=minimal] .primary-button,html[data-theme=light] .empty-state button,html[data-theme=minimal] .empty-state button{text-shadow:none}
html[data-theme=minimal] .stripes{display:none}
html[data-theme=minimal] .site-header,html[data-theme=minimal] .app-card,html[data-theme=minimal] .download-guide,html[data-theme=minimal] .empty-state,html[data-theme=minimal] #login-panel{border-radius:14px}
html[data-theme=minimal] .download-link,html[data-theme=minimal] .primary-button,html[data-theme=minimal] .secondary-button,html[data-theme=minimal] .dialog-form input,html[data-theme=minimal] .dialog-form textarea,html[data-theme=minimal] .dialog-form select{box-shadow:none}
html[data-theme=minimal] .secondary-button,html[data-theme=minimal] .card-admin button:not(:last-child){background:#fff;border-color:#d1d5db}
/* 12/10/2026: biểu tượng nút đầu trang (thay emoji 🎨 ⚙) — cùng font Material Symbols của bìa ứng dụng */
.m-icon.head-icon{font-size:20px;line-height:1;vertical-align:middle}
/* 20/10/2026: thanh đầu trang theo khung chung gmm-header.css — điện thoại cùng lề với các trang khác (cách mép 10px) */
@media(max-width:720px){.site-header{width:calc(100% - 20px);margin:10px auto 8px}}