:root{ /* ============================================================ SYSTEM WINDOW — he thiet ke lay cam hung tu bang trang thai "He Thong" cua Sung Jin-Woo (Solo Leveling): nen den-xanh navy sau, vien/glow xanh cyan neon, diem nhan tim "Monarch". Toan bo ten bien CU giu nguyen 100%, chi doi gia tri mau. ============================================================ */ /* TỐI ƯU HIỆU NĂNG: toàn bộ backdrop-filter:blur(...) trong file này đều dùng chung biến --blur-amt (thay vì số cứng 18px từng chỗ) để có thể HẠ độ blur trên điện thoại/máy yếu (xem @media max-width:760px ở cuối file) — backdrop-filter là 1 trong những hiệu ứng CSS tốn GPU nhất, nhất là khi có nhiều lớp chồng nhau (nav, header, card, popup) cùng lúc hiển thị trên màn hình nhỏ. */ --blur-amt: 18px; --c-red: #FF4D6D; --c-red-rgb: 255,77,109; --c-orange: #FF8A4D; --c-orange-rgb: 255,138,77; --c-yellow: #FFB84D; --c-yellow-rgb: 255,184,77; --c-green: #2EE6A6; --c-green-rgb: 46,230,166; --c-blue: #4DA8FF; --c-blue-rgb: 77,168,255; --c-indigo: #6C7CFF; --c-indigo-rgb: 108,124,255; --c-violet: #7B5CFF; --c-violet-rgb: 123,92,255; --rgb-gradient: linear-gradient(90deg, #37D6FF, #7B5CFF); --rgb-gradient-diag: linear-gradient(135deg, #37D6FF, #7B5CFF); --rgb-gradient-2: linear-gradient(120deg, #37D6FF, #7B5CFF); --premium-gradient: linear-gradient(135deg, #37D6FF 0%, #7B5CFF 100%); --premium-gradient-soft: linear-gradient(135deg, rgba(55,214,255,.10), rgba(123,92,255,.05)); /* ===== Nen he thong (System Background) ===== */ --bg-0: #05070C; --bg-1: #080C16; --bg-2: #0B0F1C; --bg-3: #131A2E; --bg-line: rgba(55,214,255,.16); /* ===== Be mat kinh he thong (System Glass) ===== */ --glass: rgba(55,214,255,.05); --glass-strong: rgba(55,214,255,.09); --glass-border: rgba(55,214,255,.22); --glass-blur: 18px; /* ===== Glow neon he thong ===== */ --glow-red: 0 0 24px rgba(255,77,109,.35); --glow-orange: 0 0 24px rgba(255,138,77,.35); --glow-yellow: 0 0 24px rgba(255,184,77,.35); --glow-green: 0 0 24px rgba(46,230,166,.35); --glow-blue: 0 0 24px rgba(77,168,255,.35); --glow-indigo: 0 0 24px rgba(108,124,255,.35); --glow-violet: 0 0 24px rgba(123,92,255,.35); --glow-soft: 0 0 36px rgba(55,214,255,.22); /* ===== He bong do (van giu den thuan de tao chieu sau) ===== */ --shadow-sm: 0 1px 2px rgba(0,0,0,.30), 0 3px 10px rgba(0,0,0,.25); --shadow-md: 0 2px 5px rgba(0,0,0,.32), 0 12px 26px -10px rgba(0,0,0,.45); --shadow-lg: 0 4px 10px rgba(0,0,0,.36), 0 26px 48px -20px rgba(0,0,0,.55); --shadow-xl: 0 6px 18px rgba(0,0,0,.40), 0 38px 68px -26px rgba(0,0,0,.6); --shadow-glow: 0 10px 26px -8px rgba(55,214,255,.35); --border-gradient: linear-gradient(135deg,#37D6FF,#7B5CFF); --border-gradient-soft: linear-gradient(135deg, rgba(55,214,255,.4), rgba(123,92,255,.4)); --ease: cubic-bezier(.22,1,.36,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); /* ===== ALIAS — anh xa bien cu sang he System Window ===== */ --ink: #050A14; --ink-2: #0B0F1C; --crate: #0C1120; --crate-line: rgba(55,214,255,.16); --kraft: #0A0E18; --kraft-dark: #1B2540; --amber: #37D6FF; --amber-soft: #1F8FD1; --stamp: #37D6FF; --violet: #7B5CFF; --text-dark: #04101A; --text-light: #D9F3FF; --muted: #6F89AD; --glow-gold: rgba(55,214,255,.30); /* ===== PRODUCT CARD TOKENS ===== */ --card-surface: linear-gradient(165deg, #0D1424, #070A13); --card-border: rgba(55,214,255,.18); --card-border-hover: rgba(55,214,255,.75); --card-text: #D9F3FF; --card-text-dim: #7D93B5; /* ===== DEDUP COLORS ===== */ --white: #EAF7FF; --black: #05070C; --violet-deep: #201040; --text-muted-brown: #7D93B5; --pink-danger: #FF4D6D; --amber-deep: #0D84B8; --mint-success: #2EE6A6; --text-faint-brown: #7D93B5; --coral-danger: #FF4D6D; --gold-warning: #FFB84D; --tan-border: #1B2540; --panel-dark: #0B0F1C; --violet-light: #3D2F77; --kraft-light: #131A2E; --green-success: #2EE6A6; --void-bg: #05070C; --void-bg-2: #080C16; --panel-darker: #070A13; --pink-accent: #B565FF; /* ===== SYSTEM EFFECTS (circuit border, decrypt, iris, boot...) ===== Bien rieng cho bo hieu ung "System Window" moi (xem cuoi file, muc "===== SYSTEM EFFECTS SHOWCASE INTEGRATION ====="). Dat ten theo dung quy uoc --c-*/--glow-* dang dung trong file, KHONG doi bien cu. */ --c-cyan: #37D6FF; --c-cyan-rgb: 55,214,255; --c-violet-rgb: 123,92,255; } *{box-sizing:border-box;} ::selection{background:var(--amber);color:var(--text-dark);} html{scroll-behavior:smooth;} html,body{overflow-x:hidden;} /* ============================================================ PREMIUM BACKGROUND — aurora nhiều lớp (blur, glow, di chuyển rất chậm) + noise texture tinh tế, thay cho nền phẳng trước đây. Toàn bộ nằm ở body::before/::after -> không cần sửa HTML. ============================================================ */ body{ position:relative; margin:0; background: var(--bg-0); color:var(--text-light); font-family:'Plus Jakarta Sans',sans-serif; min-height:100vh; min-height:100dvh; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; } body::before{ content:'';position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(560px 380px at 18% 22%, rgba(55,214,255,.10), transparent 68%), radial-gradient(620px 420px at 84% 16%, rgba(55,214,255,.08), transparent 70%), radial-gradient(560px 460px at 70% 88%, rgba(55,214,255,.07), transparent 70%); filter:blur(30px); animation:auroraDrift 30s ease-in-out infinite alternate; } body::after{ /* Noise cực nhẹ để nền có "chất liệu" thay vì phẳng lì, kiểu Stripe/Linear */ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } a{color:inherit;} .label{ font-family:'JetBrains Mono',monospace; letter-spacing:.16em; text-transform:uppercase; font-size:11px; color:var(--amber); font-weight:700; } h1,h2,h3{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:650; margin:0; letter-spacing:-.015em; line-height:1.12; text-wrap:balance; } p{color:var(--text-light);} button{font-family:inherit;} button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--amber);outline-offset:2px; box-shadow:0 0 0 5px rgba(var(--c-yellow-rgb),.18); border-radius:6px; } /* ---------- CUSTOM SCROLLBAR — bo góc, gradient tinh tế ---------- */ *{scrollbar-width:thin;scrollbar-color:rgba(var(--c-indigo-rgb),.55) transparent;} ::-webkit-scrollbar{width:9px;height:9px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(var(--c-indigo-rgb),.7), rgba(var(--c-violet-rgb),.55)); border-radius:20px;border:2px solid transparent;background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, rgba(var(--c-indigo-rgb),.95), rgba(var(--c-violet-rgb),.8)); background-clip:padding-box; } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;} /* Đĩa nhạc xoay là hiệu ứng trang trí chính, không phải hiệu ứng gây khó chịu cần tắt vì lý do trợ năng -> loại trừ riêng để nó luôn quay bình thường, kể cả khi trình duyệt/hệ điều hành đang bật "giảm chuyển động". */ .player-disc{animation-duration:3.2s !important;animation-iteration-count:infinite !important;} } /* ---------- HEADER ---------- */ header{ position:sticky;top:0;z-index:30; padding:20px 32px; background:rgba(5,7,12,.68); backdrop-filter:blur(var(--blur-amt)) saturate(140%); -webkit-backdrop-filter:blur(var(--blur-amt)) saturate(140%); border-bottom:1px solid var(--glass-border); box-shadow:0 1px 0 rgba(55,214,255,.08), 0 20px 50px -30px rgba(55,214,255,.25); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; } .brand-title{ font-family:'Noto Serif Display',serif; font-size:clamp(20px,3vw,28px); font-weight:600; font-style:italic; letter-spacing:-.01em; color:var(--text-light); display:flex;align-items:center;gap:11px; animation:inkRise 1.4s var(--ease) both; } .brand-title span{ color:var(--amber); text-shadow:0 0 20px rgba(55,214,255,.5); } .brand-logo{ width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto; border:2px solid var(--amber);box-shadow:0 0 0 3px rgba(55,214,255,.14); } @keyframes signOn{ 0%{opacity:0;filter:blur(18px);} 8%{opacity:1;filter:blur(0);} 16%{opacity:.3;} 22%{opacity:1;} 100%{opacity:1;} } .header-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} nav{display:flex;flex-wrap:wrap;gap:3px;background:rgba(55,214,255,.035);backdrop-filter:blur(var(--blur-amt));padding:5px;border-radius:14px;border:1px solid var(--glass-border);} nav button{ font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; background:none; border:none; color:var(--muted); padding:9px 17px; cursor:pointer; border-radius:10px; transition:color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } nav button.active{ background:linear-gradient(135deg,var(--amber),var(--amber-soft)); color:var(--text-dark); font-weight:700; box-shadow:0 0 22px -4px rgba(55,214,255,.75), inset 0 1px 0 rgba(55,214,255,.45); transform:translateY(-1px); } nav button:not(.active):hover{ color:var(--text-light); background:rgba(55,214,255,.08); transform:translateY(-1px); } nav button:not(.active):active{transform:translateY(0) scale(.97);} .user-auth-box{display:flex;align-items:center;gap:8px;} .user-auth-btn{ font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700; background:rgba(55,214,255,.14);border:1px solid rgba(55,214,255,.4);color:var(--violet); padding:9px 16px;border-radius:10px;cursor:pointer;transition:.18s var(--ease); } .user-auth-btn:hover{background:var(--violet);color:var(--white);} .user-badge{ display:flex;align-items:center;gap:8px; background:rgba(55,214,255,.05);border:1px solid rgba(55,214,255,.1); padding:6px 8px 6px 12px;border-radius:50px; } .user-badge-name{font-size:12.5px;font-weight:600;color:var(--text-light);white-space:nowrap;} .user-badge-logout{ font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase; background:rgba(55,214,255,.08);border:none;color:var(--muted); padding:6px 10px;border-radius:50px;cursor:pointer;transition:.15s; } .user-badge-logout:hover{background:var(--stamp);color:var(--white);} main{max-width:1140px;margin:0 auto;padding:44px 32px 100px;} .view{display:none;} .view.active{display:block;animation:fadein .45s var(--ease);} @keyframes fadein{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}} @keyframes popin{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}} /* ---------- DESKTOP: THANH ĐIỀU HƯỚNG DỌC KIỂU "BOUTIQUE GALLERY" ---------- Trên desktop, toàn bộ
(vốn chỉ là 1 thanh ngang) được biến thành 1 sidebar dọc cố định bên trái. Vì các nút menu, ví, chat, đăng nhập đều là con/cháu trực tiếp của header nên chỉ cần đổi flex-direction là chúng tự xếp thành cột — không cần đổi HTML/JS. */ @media (min-width:901px){ body{--sidebar-w:252px;} header.sys-circuit-border{ position:fixed;left:0;top:0;bottom:0;height:100dvh;width:var(--sidebar-w); padding:30px 22px 26px; display:flex;flex-direction:column;align-items:flex-start; gap:30px; /* Không dùng backdrop-filter ở đây: sidebar cố định, luôn hiển thị và phủ toàn bộ chiều cao màn hình -> trình duyệt phải tính lại lớp kính mờ này mỗi khung hình khi nội dung bên phải cuộn qua, đây là nguyên nhân chính gây giật/lag khi cuộn trên PC (đã đo bằng Chrome trace: chiếm ~60% chi phí dựng hình lúc cuộn). Thay bằng nền gradient đặc hơn (không cần blur) để vẫn tối/đồng bộ màu mà không tốn GPU liên tục. */ background:linear-gradient(180deg, rgba(6,8,13,.97), rgba(5,7,12,.99)); border-bottom:none; border-right:1px solid var(--glass-border); box-shadow:none; overflow-y:auto; z-index:30; } header::after{ content:'';position:absolute;top:0;right:-1px;bottom:0;width:1px; background:linear-gradient(180deg, transparent, rgba(55,214,255,.5) 30%, rgba(55,214,255,.4) 70%, transparent); } .brand-title{font-size:21px;line-height:1.2;} .header-right{ display:flex;flex-direction:column;align-items:stretch; width:100%;flex:1;min-height:0;gap:20px; } .wallet-badge-group{order:0;width:100%;justify-content:space-between;} .wallet-dropdown-wrap{flex:1;min-width:0;} .wallet-toggle-btn{width:100%;justify-content:space-between;} .mobile-menu-toggle{display:none !important;} nav#mainNav{ order:1; display:flex;flex-direction:column;align-items:stretch; width:100%;gap:2px; background:none;border:none;padding:0; flex:1;min-height:0; overflow-y:auto; } nav#mainNav button{ width:100%;justify-content:flex-start;text-align:left; padding:12px 14px;border-radius:11px; position:relative; } nav#mainNav button.active{ background:rgba(55,214,255,.1); color:var(--amber-soft); box-shadow:none; padding-left:20px; } nav#mainNav button.active::before{ content:'';position:absolute;left:2px;top:9px;bottom:9px;width:3px;border-radius:3px; background:linear-gradient(180deg,var(--amber-soft),var(--amber)); box-shadow:0 0 10px 1px rgba(55,214,255,.7); } nav#mainNav .social-fab-list{ order:2;margin:auto 0 14px;padding-top:14px; border-top:1px solid var(--glass-border); justify-content:center;width:100%; } .admin-lock-btn{order:3;width:100%;margin-top:0;justify-content:center;max-width:none;} /* Đẩy khoảng chừa cho sidebar ra body, để main được tự do margin:0 auto và canh giữa đúng trong phần không gian còn lại (thay vì dính sát trái với max-width cố định + không có margin-right:auto, gây trống mảng lớn bên phải trên màn hình rộng). max-width cũng tăng lên để đỡ chật trên màn hình to. */ body{padding-left:var(--sidebar-w);} main{margin-left:0;margin-right:0;margin-inline:auto;max-width:1400px;padding:52px 48px 100px;} } /* ---------- HOME / TOOLBAR ---------- */ .home-top{ display:flex;justify-content:space-between;align-items:center; margin-bottom:32px;flex-wrap:wrap;gap:14px; } .home-top .label{font-size:12px;color:var(--muted);} .home-top .label b{color:var(--amber);font-style:normal;} .add-btn{ position:relative;overflow:hidden;isolation:isolate; font-family:'JetBrains Mono',monospace; font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700; background:linear-gradient(135deg,var(--stamp),#0F6FA3); color:var(--white);border:none; padding:13px 22px;border-radius:12px;cursor:pointer; box-shadow:0 8px 20px -6px rgba(55,214,255,.55); transition:transform .28s var(--ease-spring), box-shadow .28s var(--ease); } .add-btn::before{ content:'';position:absolute;inset:0;z-index:-1; background:linear-gradient(115deg,transparent 35%,rgba(55,214,255,.5) 48%,transparent 62%); transform:translateX(-130%);transition:transform .6s var(--ease); } .add-btn:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 16px 34px -8px rgba(55,214,255,.75);} .add-btn:hover::before{transform:translateX(130%);} .add-btn:active{transform:translateY(0) scale(.96);} /* ---------- SEARCH + COLLECTION CHIPS ---------- */ .search-row{margin-bottom:18px;} .search-wrap{ position:relative; display:flex;align-items:center; background:rgba(55,214,255,.045); border:1.5px solid var(--crate-line); border-radius:15px; padding:0 14px; transition:border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease); } .search-wrap.focused{ border-color:var(--amber); background:rgba(55,214,255,.075); box-shadow:0 0 0 4px rgba(55,214,255,.16), 0 0 26px -6px rgba(55,214,255,.5), 0 14px 30px -16px rgba(0,0,0,.5); } .search-icon{flex:0 0 auto;color:var(--muted);transition:color .2s var(--ease);} .search-wrap.focused .search-icon{color:var(--amber);} .search-input{ flex:1;min-width:0; background:none;border:none;outline:none; color:var(--text-light); padding:14px 10px; font-family:'Plus Jakarta Sans',sans-serif;font-size:14.5px; } .search-input::placeholder{color:var(--muted);} .search-clear-btn{ flex:0 0 auto; width:24px;height:24px;border-radius:50%; background:rgba(55,214,255,.08);border:none;color:var(--muted); display:none;align-items:center;justify-content:center; cursor:pointer;font-size:11px;line-height:1; transition:.15s;margin-right:6px; } .search-clear-btn:hover{background:var(--stamp);color:var(--white);} .search-shortcut-hint{ flex:0 0 auto; font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--muted); background:rgba(55,214,255,.06);border:1px solid rgba(55,214,255,.12); padding:3px 8px;border-radius:6px; } .search-wrap.focused .search-shortcut-hint{display:none;} .search-suggestions{ position:absolute;top:calc(100% + 10px);left:0;right:0; background:var(--kraft);color:var(--text-light); border-radius:16px; box-shadow:0 24px 50px -16px rgba(0,0,0,.55); max-height:0;opacity:0;pointer-events:none; transform:translateY(-6px); overflow:hidden; transition:max-height .28s var(--ease), opacity .2s var(--ease), transform .24s var(--ease); z-index:20; } .search-suggestions.open{ max-height:420px;opacity:1;pointer-events:auto;transform:translateY(0); overflow-y:auto; } .search-suggestion-item{ display:flex;align-items:center;gap:12px; padding:11px 14px;cursor:pointer; border-bottom:1px solid rgba(0,0,0,.06); transition:background .15s; } .search-suggestion-item:last-child{border-bottom:none;} .search-suggestion-item:hover{background:rgba(55,214,255,.14);} .search-suggestion-thumb{ width:40px;height:40px;border-radius:9px;flex:0 0 40px; overflow:hidden;background:linear-gradient(135deg,var(--kraft-dark),var(--kraft-light)); } .search-suggestion-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .search-suggestion-info{flex:1;min-width:0;} .search-suggestion-title{ font-size:13.5px;font-weight:600;color:var(--text-light); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .search-suggestion-tag{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.05em;text-transform:uppercase; color:var(--stamp);margin-top:2px; } .search-suggestion-arrow{flex:0 0 auto;color:#6F89AD;font-size:14px;} .search-suggestion-empty{padding:20px 16px;text-align:center;color:var(--text-faint-brown);font-size:13px;} .collection-chips{ display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px; } .chip{ font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:700; background:rgba(55,214,255,.045);border:1.5px solid rgba(55,214,255,.1);color:var(--muted); padding:9px 16px;border-radius:50px;cursor:pointer; display:flex;align-items:center;gap:8px; transition:.18s var(--ease); } .chip:hover{color:var(--text-light);border-color:rgba(55,214,255,.3);background:rgba(55,214,255,.08);transform:translateY(-1px);} .chip.active{background:var(--amber);color:var(--text-dark);border-color:var(--amber);box-shadow:0 4px 18px -3px rgba(55,214,255,.65);transform:translateY(-1px);} .chip:active{transform:translateY(0) scale(.96);} .chip-count{opacity:.7;font-weight:400;} .chip-remove{ opacity:.5;font-size:12px;line-height:1;padding:2px 4px;border-radius:50%; transition:.15s; } .chip-remove:hover{opacity:1;background:rgba(0,0,0,.18);} .chip-add{ border-style:dashed;color:var(--amber-soft);background:none; } .chip-add:hover{border-color:var(--amber);color:var(--amber);background:rgba(55,214,255,.06);} .type-toggle-row{display:flex;gap:6px;background:rgba(0,0,0,.22);padding:5px;border-radius:12px;margin:2px 0 14px;width:max-content;border:1px solid rgba(55,214,255,.06);} .type-toggle-btn{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.04em;font-weight:700;background:none;border:none;color:var(--muted);padding:9px 22px;border-radius:9px;cursor:pointer;transition:.18s;} .type-toggle-btn:hover{color:var(--text-light);} .type-toggle-btn.active{background:var(--amber);color:var(--text-dark);box-shadow:0 2px 10px -2px rgba(55,214,255,.55);} .type-radio-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;} .type-radio-pill{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;border:1px solid var(--kraft-dark);cursor:pointer;font-size:13.5px;font-weight:500;} .type-radio-pill input{width:auto;margin:0;} .modal-keytypes-section .task-claim-btn{margin:0 6px 6px 0;} .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); align-items:stretch; gap:24px; } .empty-state{ text-align:center;padding:70px 20px;color:var(--muted); border:1.5px dashed rgba(55,214,255,.14);border-radius:16px; background:rgba(55,214,255,.02); } /* ---------- PRODUCT CARD — "GALLERY PIECE" (thẻ trưng bày dọc) ---------- */ .parcel{ background:linear-gradient(160deg,var(--kraft),var(--kraft-dark)); color:var(--text-light); border-radius:22px; position:relative; border:1px solid rgba(55,214,255,.5); box-shadow:0 1px 2px rgba(0,0,0,.2), 0 16px 34px -16px rgba(0,0,0,.55); display:flex;flex-direction:column; overflow:hidden; transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease); animation:popin .45s var(--ease) both; } .parcel:hover{ transform:translateY(-6px); border-color:rgba(55,214,255,.6); box-shadow:0 1px 2px rgba(0,0,0,.2), 0 28px 48px -18px rgba(0,0,0,.65), 0 0 0 5px rgba(55,214,255,.12), 0 0 38px -4px rgba(55,214,255,.5); } /* Goc bracket hologram 4 goc mau cyan — chi hien khi hover. NANG CAP tu 2 goc (::before/::after) thanh du 4 goc bang ky thuat multi-background tren cung 2 pseudo-element (moi pseudo ve 2 goc doi dien bang 2 lop linear-gradient), khong can them phan tu HTML nao. Mau doi tu var(--amber) sang var(--c-cyan). Sweep anh (.parcel-img-wrap::after) giu nguyen, khong dong cham. */ .parcel::before{ content:'';position:absolute;inset:0;z-index:3;pointer-events:none; opacity:0;transition:opacity .3s var(--ease); background-repeat:no-repeat; background-image: linear-gradient(var(--c-cyan),var(--c-cyan)), linear-gradient(var(--c-cyan),var(--c-cyan)), linear-gradient(var(--c-cyan),var(--c-cyan)), linear-gradient(var(--c-cyan),var(--c-cyan)); background-size:2px 20px, 20px 2px, 2px 20px, 20px 2px; background-position: 10px 10px, 10px 10px, calc(100% - 12px) 10px, calc(100% - 30px) 10px; } .parcel::after{ content:'';position:absolute;inset:0;z-index:3;pointer-events:none; opacity:0;transition:opacity .3s var(--ease); background-repeat:no-repeat; background-image: linear-gradient(var(--c-cyan),var(--c-cyan)), linear-gradient(var(--c-cyan),var(--c-cyan)), linear-gradient(var(--c-cyan),var(--c-cyan)), linear-gradient(var(--c-cyan),var(--c-cyan)); background-size:2px 20px, 20px 2px, 2px 20px, 20px 2px; background-position: 10px calc(100% - 30px), 10px calc(100% - 12px), calc(100% - 12px) calc(100% - 30px), calc(100% - 30px) calc(100% - 12px); } .parcel:hover::before, .parcel:hover::after{opacity:1;filter:drop-shadow(0 0 4px rgba(var(--c-cyan-rgb),.7));} .parcel-img-wrap{width:100%;flex:none;aspect-ratio:5/4;overflow:hidden;background:linear-gradient(135deg,var(--kraft-dark),var(--kraft-light));position:relative;} .parcel-img-wrap::before{ content:'';position:absolute;inset:auto 0 0 0;height:60%;z-index:1;pointer-events:none; background:linear-gradient(to top, rgba(5,7,12,.62), transparent); } .parcel-img{ width:100%;height:100%;object-fit:cover; transition:transform .5s var(--ease); display:block; } .parcel:hover .parcel-img{transform:scale(1.06);} .parcel-img-wrap::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:2; background:linear-gradient(115deg,transparent 40%,rgba(55,214,255,.55) 50%,transparent 60%); transform:translateX(-120%); } .parcel:hover .parcel-img-wrap::after{transform:translateX(120%);transition:transform .85s var(--ease);} .parcel-tape{ position:absolute;left:14px;bottom:14px;top:auto;z-index:2; background:rgba(5,7,12,.55);backdrop-filter:blur(var(--blur-amt));-webkit-backdrop-filter:blur(var(--blur-amt)); color:var(--amber-soft); font-family:'JetBrains Mono',monospace; font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700; padding:5px 14px; border:1px solid rgba(55,214,255,.4); border-radius:50px; transform:none; max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .parcel-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;justify-content:flex-start;} .parcel-body h3{font-size:17px;color:var(--text-dark);line-height:1.25;font-weight:600;} .parcel-desc{font-size:13px;color:var(--text-muted-brown);line-height:1.45;flex:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .parcel-desc a, .product-modal-desc a{ color:var(--stamp);text-decoration:underline;font-weight:600; word-break:break-all; } .parcel-desc a:hover, .product-modal-desc a:hover{color:var(--pink-danger);} .stamp-btn{ margin-top:10px; align-self:stretch;justify-content:center; font-family:'JetBrains Mono',monospace; font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700; background:var(--ink);color:var(--text-light); border:none; padding:12px 20px;border-radius:11px; cursor:pointer; display:flex;align-items:center;gap:8px; transition:background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease-spring), box-shadow .22s var(--ease); } .stamp-btn::after{content:'→';transition:transform .18s var(--ease);} .stamp-btn:hover{background:var(--stamp);color:var(--white);box-shadow:0 12px 28px -6px rgba(55,214,255,.7);transform:translateY(-1px) scale(1.02);} .stamp-btn:hover::after{transform:translateX(3px);} .stamp-btn:active{transform:scale(.96);} .card-admin-row{display:none;gap:8px;margin-top:10px;opacity:1;transition:opacity .2s;flex-wrap:wrap;} @media (hover:hover) and (pointer:fine){ .card-admin-row{opacity:.55;} .parcel:hover .card-admin-row{opacity:1;} } .admin-only{display:none !important;} body.admin-mode .admin-only{display:revert !important;} /* Form thêm/sửa sản phẩm Cày thuê: phải ẩn được kể cả khi đang ở admin-mode. LƯU Ý: rule hiện admin-only là "body.admin-mode .admin-only" (1 phần tử + 2 class) -> muốn thắng được rule đó thì rule ẩn cũng phải có ĐỦ "body.admin-mode" ở trước, không thể chỉ thêm class suông như ".admin-only.combo-form-hidden" (2 class, thiếu phần tử "body" nên độ ưu tiên vẫn THẤP hơn, đây chính là lý do form cứ hiện sẵn dù đã gắn class combo-form-hidden). */ body.admin-mode .admin-only.combo-form-hidden{display:none !important;} .admin-only.combo-form-hidden{display:none !important;} body.admin-mode .card-admin-row{display:flex;} .user-only{display:none !important;} body.user-mode .user-only{display:revert !important;} /* filemgr-mode: dành riêng cho quyền quản lý sản phẩm (thêm/sửa/xoá/ghim), áp dụng cho cả Admin thật lẫn user thường được cấp quyền canManageFiles. Chỉ mở .filemgr-only và .card-admin-row, KHÔNG mở toàn bộ .admin-only (dashboard, playlist, showcase... vẫn chỉ dành riêng cho Admin thật). */ .filemgr-only{display:none !important;} body.filemgr-mode .filemgr-only{display:revert !important;} body.filemgr-mode .card-admin-row{display:flex;} /* ---------- VÍ TRÊN HEADER: NÚT "SỐ DƯ" + PANEL XỔ XUỐNG NGAY TẠI CHỖ ---------- */ /* Cụm Ví: nút dropdown "Số dư" + nút "+" nạp nhanh. align-items:flex-start để nút "+" không bị kéo lệch giữa khi panel bên dưới xổ ra làm cụm cao lên. */ .wallet-badge-group{display:flex;align-items:flex-start;gap:6px;} .wallet-badge-add{ width:30px;height:30px;flex:none; border-radius:50%; background:var(--amber); color:var(--text-dark); border:none; font-weight:900;font-size:16px;line-height:1; cursor:pointer; display:flex;align-items:center;justify-content:center; transition:.2s var(--ease); box-shadow:0 2px 8px rgba(55,214,255,.35); } .wallet-badge-add:hover{transform:scale(1.14) rotate(90deg);box-shadow:0 4px 14px rgba(55,214,255,.55);} .wallet-badge-add:active{transform:scale(.94) rotate(90deg);} /* Nút trigger "🪙 Số dư ⌄" — bấm để xổ ra panel nhỏ NGAY BÊN DƯỚI nó (không còn nổi đè lên nội dung khác nữa — trước đây dùng position:absolute nên trên sidebar desktop (có overflow-y:auto) bị khung sidebar cắt mất 1 phần, trông như lỗi vỡ giao diện). Giờ panel nằm trong luồng bình thường (đẩy các phần tử phía dưới xuống khi mở), y hệt kiểu "accordion" nên không bao giờ bị cắt hình dù ở sidebar desktop hay thanh ngang mobile. */ .wallet-dropdown-wrap{width:100%;min-width:0;} .wallet-toggle-btn{ appearance:none;-webkit-appearance:none;width:100%; font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.03em; background:rgba(55,214,255,.14);border:1px solid rgba(55,214,255,.4);color:var(--amber-soft); padding:7px 12px;border-radius:50px;display:flex;align-items:center;gap:6px; cursor:pointer;transition:.18s var(--ease); } .wallet-toggle-btn:hover{background:rgba(55,214,255,.22);} .wallet-toggle-icon{font-size:12px;line-height:1;display:inline-block;animation:floatY 2.6s ease-in-out infinite;} .wallet-toggle-arrow{display:inline-flex;transition:transform .2s var(--ease);font-size:13px;line-height:1;margin-left:auto;} .wallet-toggle-btn[aria-expanded="true"] .wallet-toggle-arrow{transform:rotate(180deg);} /* Panel: mặc định cao 0 + ẩn nội dung tràn (overflow:hidden), khi có class "open" thì xổ xuống bằng cách tăng max-height — không dùng position:absolute nên không thể bị cắt hình hay đè lên chỗ khác, chỉ đơn giản đẩy các nút bên dưới (Chat, avatar...) xuống thấp hơn 1 chút. */ .wallet-dropdown-panel{ overflow:hidden;max-height:0;opacity:0; background:linear-gradient(160deg, rgba(55,214,255,.06), rgba(55,214,255,.015)), var(--crate); border:1px solid transparent;border-radius:14px; transition:max-height .25s var(--ease), opacity .2s var(--ease), margin-top .25s var(--ease), border-color .2s var(--ease); } .wallet-dropdown-panel.open{ max-height:280px;opacity:1;margin-top:8px; border-color:rgba(55,214,255,.1); box-shadow:0 14px 32px -18px rgba(0,0,0,.6); } .wallet-dropdown-title{ font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);font-weight:700;padding:10px 12px 4px; } .wallet-dropdown-row{display:flex;align-items:center;gap:9px;padding:5px 12px;border-radius:10px;} .wallet-dropdown-icon{ width:28px;height:28px;flex:none;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:13px; box-shadow:0 4px 10px -4px rgba(0,0,0,.5); color:var(--white); } .wallet-dropdown-icon-vcoin{background:linear-gradient(135deg,#0A3550,#37D6FF);} .wallet-dropdown-icon-vipcoin{background:linear-gradient(135deg,#B78CFF,var(--violet-deep));} .wallet-dropdown-info{min-width:0;} .wallet-dropdown-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.06em;color:var(--muted);font-weight:700;text-transform:uppercase;} .wallet-dropdown-num{ font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;color:var(--text-light); margin-top:1px;line-height:1.1;letter-spacing:.01em;word-break:break-all; } .wallet-dropdown-divider{height:1px;background:rgba(55,214,255,.08);margin:4px 12px;} .wallet-dropdown-topup-btn{ display:block;margin:10px 12px 12px;width:calc(100% - 24px); font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.03em; background:linear-gradient(155deg,var(--amber-soft),var(--amber) 60%,var(--amber-deep)); color:var(--text-dark);border:none;padding:8px 12px;border-radius:10px;cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease); box-shadow:0 8px 18px -10px rgba(55,214,255,.7); } .wallet-dropdown-topup-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 30px -10px rgba(55,214,255,.95);} .wallet-dropdown-topup-btn:active{transform:translateY(0) scale(.97);} /* Nút hamburger cho mobile — ẩn mặc định trên desktop */ .mobile-menu-toggle{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:36px;height:36px;flex:none; background:rgba(55,214,255,.04); border:1px solid rgba(55,214,255,.08); border-radius:9px; cursor:pointer; padding:0; } .mobile-menu-toggle span{ display:block;width:16px;height:2px; background:var(--text-light); border-radius:2px; transition:.2s var(--ease); } .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);} .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;} .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} .vcoin-card{ background:linear-gradient(135deg,rgba(55,214,255,.12),rgba(55,214,255,.08)); border:1px solid rgba(55,214,255,.3);border-radius:22px;padding:28px 32px; max-width:640px;margin:0 auto 24px;text-align:center; box-shadow:var(--shadow-lg); transition:box-shadow .3s var(--ease), border-color .3s var(--ease); } .vcoin-card:hover{box-shadow:var(--shadow-lg), 0 0 40px -12px rgba(55,214,255,.5);border-color:rgba(55,214,255,.5);} .vcoin-card h3{font-size:17px;margin-bottom:6px;} .vcoin-balance-num{ font-family:'JetBrains Mono',monospace;font-size:40px;font-weight:700;color:var(--amber);line-height:1; text-shadow:0 0 30px rgba(55,214,255,.35); } .wallet-profile-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:10px;} .wallet-profile-col{flex:1 1 140px;} /* ---------- TÀI KHOẢN CỦA TÔI (thẻ hiện avatar + coin + đăng xuất, đầu trang Hồ sơ) ---------- */ .account-card{ background:linear-gradient(160deg, rgba(55,214,255,.055), rgba(55,214,255,.02)), var(--crate); border:1px solid var(--glass-border); border-radius:24px;padding:32px;max-width:640px;margin:0 auto 24px; backdrop-filter:blur(var(--blur-amt)); box-shadow:var(--shadow-xl), inset 0 1px 0 rgba(55,214,255,.05); transition:box-shadow .3s var(--ease), border-color .3s var(--ease); } .account-card:hover{border-color:rgba(var(--c-indigo-rgb),.35);} .account-card-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;} .account-avatar-wrap{position:relative;flex:0 0 auto;width:76px;height:76px;} .account-avatar{ width:76px;height:76px;border-radius:50%;object-fit:cover;display:block; border:3px solid var(--amber);background:var(--crate-line); box-shadow:0 0 0 5px rgba(55,214,255,.14), 0 0 30px -6px rgba(55,214,255,.35); } .account-avatar-edit{ position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--amber-soft),var(--amber));color:var(--text-dark); border:2px solid var(--crate);cursor:pointer;transition:transform .18s var(--ease); } .account-avatar-edit:hover{transform:scale(1.1);} .account-info{min-width:0;flex:1 1 auto;} .account-name{font-size:20px;font-weight:600;color:var(--text-light);word-break:break-word;} .account-role-tag{ display:inline-block;margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:10px; letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--white); background:linear-gradient(135deg,var(--violet),var(--violet-deep));padding:4px 10px;border-radius:8px; } .account-coin-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;} .account-coin-item{ flex:1 1 140px;display:flex;align-items:center;gap:10px; background:rgba(55,214,255,.04);border:1px solid var(--glass-border); border-radius:14px;padding:12px 14px; } .account-coin-icon{font-size:20px;line-height:1;} .account-coin-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--muted);} .account-coin-num{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:700;color:var(--amber);} body.admin-mode .account-coin-row{display:none;} .account-logout-btn{ display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:22px; background:rgba(55,214,255,.03);border:1.5px solid var(--glass-border);color:var(--muted); font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-size:12px;letter-spacing:.05em;font-weight:700; padding:12px 18px;border-radius:12px;cursor:pointer;transition:.18s; } .account-logout-btn:hover{border-color:var(--coral-danger);color:var(--coral-danger);background:rgba(55,214,255,.08);} .price-badge{ display:inline-flex;align-items:center;gap:5px; font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.04em; background:linear-gradient(155deg,var(--amber-soft),var(--amber) 60%,var(--amber-deep)); color:var(--text-dark); padding:4px 11px;border-radius:50px;margin-top:6px;align-self:flex-start; box-shadow:inset 0 1px 0 rgba(55,214,255,.6), inset 0 -2px 3px rgba(0,0,0,.18), 0 3px 8px -3px rgba(55,214,255,.6); } .admin-lock-btn{ --lock-accent: var(--muted); font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:600; display:inline-flex;align-items:center;gap:9px; background:rgba(55,214,255,.04);border:1px solid var(--glass-border);color:var(--muted); padding:5px 14px 5px 5px;border-radius:50px;cursor:pointer; white-space:nowrap;max-width:190px; transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), transform .18s var(--ease); } .admin-lock-btn:hover{ transform:translateY(-1px); border-color:rgba(55,214,255,.5); background:rgba(55,214,255,.07); box-shadow:0 8px 20px -10px rgba(0,0,0,.5); } .admin-lock-btn:active{transform:translateY(0) scale(.97);} .lock-avatar{ flex:0 0 auto;width:26px;height:26px;border-radius:50%; display:flex;align-items:center;justify-content:center;overflow:hidden; font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700; background:rgba(55,214,255,.08);color:var(--muted); box-shadow:inset 0 0 0 1px rgba(55,214,255,.08); transition:background .25s var(--ease), box-shadow .3s var(--ease), color .25s var(--ease); } .lock-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;} .lock-info{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;} .lock-label{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%; transition:color .2s var(--ease); } .lock-coin{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%; font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;color:var(--amber-soft); } /* Trạng thái khách (chưa đăng nhập): icon khoá, nhịp thở nhẹ mời gọi bấm */ .admin-lock-btn.is-guest .lock-avatar{ background:rgba(55,214,255,.14);color:var(--amber-soft); animation:lockBreathe 2.8s ease-in-out infinite; } @keyframes lockBreathe{ 0%,100%{box-shadow:inset 0 0 0 1px rgba(55,214,255,.25), 0 0 0 0 rgba(55,214,255,.35);} 50%{box-shadow:inset 0 0 0 1px rgba(55,214,255,.5), 0 0 0 5px rgba(55,214,255,0);} } /* Trạng thái khách hàng đã đăng nhập: avatar chữ cái đầu, gradient vàng */ .admin-lock-btn.is-user{border-color:rgba(55,214,255,.3);} .admin-lock-btn.is-user .lock-avatar{ background:linear-gradient(135deg,var(--amber-soft),var(--amber)); color:var(--text-dark); box-shadow:0 0 0 2px rgba(55,214,255,.18); } .admin-lock-btn.is-user:hover{box-shadow:0 8px 22px -10px rgba(55,214,255,.5);} /* Trạng thái Admin: avatar gradient tím-vàng + viền phát sáng xoay nhẹ, cảm giác "quyền lực" */ .admin-lock-btn.is-admin{ border-color:rgba(55,214,255,.4); background:linear-gradient(135deg, rgba(55,214,255,.12), rgba(55,214,255,.08)); } .admin-lock-btn.is-admin .lock-avatar{ background:conic-gradient(from 0deg, var(--violet), var(--amber), var(--violet)); color:var(--white); animation:lockSpin 5s linear infinite; box-shadow:0 0 0 2px rgba(55,214,255,.22), 0 0 14px -2px rgba(55,214,255,.6); } .admin-lock-btn.is-admin .lock-label{color:var(--text-light);} @keyframes lockSpin{from{filter:hue-rotate(0deg);}to{filter:hue-rotate(360deg);}} .admin-lock-btn.is-admin:hover{box-shadow:0 8px 24px -10px rgba(55,214,255,.6);} .mini-btn{ font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600; background:rgba(55,214,255,.05);border:1.5px solid var(--glass-border);color:var(--text-light); padding:6px 12px;border-radius:8px;cursor:pointer;transition:.15s; } .mini-btn:hover{background:rgba(55,214,255,.16);border-color:rgba(55,214,255,.5);color:var(--amber-soft);transform:translateY(-1px);} .mini-btn:active{transform:translateY(0) scale(.96);} /* ---------- FORM (add/edit product) ---------- */ .form-card{ background:linear-gradient(160deg, rgba(55,214,255,.055), rgba(55,214,255,.02)), var(--crate); border:1px solid var(--glass-border); border-radius:22px; padding:32px; max-width:540px; margin:0 auto; backdrop-filter:blur(var(--blur-amt)); box-shadow:var(--shadow-xl), inset 0 1px 0 rgba(55,214,255,.05); animation:cardEnter .45s var(--ease) both; } .form-card h2{font-size:23px;} #advancedSettingsDetails summary{list-style:none;display:flex;align-items:center;justify-content:space-between;} #advancedSettingsDetails summary::-webkit-details-marker{display:none;} #advancedSettingsDetails summary::after{content:'▾';transition:transform .18s var(--ease);color:var(--amber);} #advancedSettingsDetails[open] summary::after{transform:rotate(180deg);} #advancedSettingsDetails h3, #advancedSettingsDetails h4{color:var(--text-light);} .form-card label{ display:block;font-family:'JetBrains Mono',monospace;font-size:11px; text-transform:uppercase;letter-spacing:.1em;color:var(--amber);font-weight:700; margin:18px 0 7px; } .form-card input[type=text], .form-card input[type=url], .form-card input[type=password], .form-card textarea, .form-card select{ width:100%;background:rgba(0,0,0,.22);border:1.5px solid var(--crate-line); color:var(--text-light);padding:11px 14px;border-radius:10px;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px; transition:border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease); } .form-card select{cursor:pointer;} .form-card select option{background:var(--crate);color:var(--text-light);} .form-card input::placeholder, .form-card textarea::placeholder{color:var(--card-text-dim);opacity:.75;} .form-card input:focus, .form-card textarea:focus, .form-card select:focus{ outline:none;border-color:var(--amber);background:rgba(0,0,0,.32); box-shadow:0 0 0 4px rgba(55,214,255,.14), 0 0 22px -6px rgba(55,214,255,.5); } .form-card textarea{min-height:78px;resize:vertical;} .file-drop{ border:1.5px dashed var(--crate-line);border-radius:14px; padding:22px;text-align:center;cursor:pointer;color:var(--muted); font-size:13px;transition:.18s; } .file-drop:hover{border-color:var(--amber);color:var(--amber-soft);background:rgba(55,214,255,.05);} .file-drop img{max-height:130px;border-radius:10px;margin-top:8px;display:block;margin-left:auto;margin-right:auto;} .form-actions{display:flex;gap:10px;margin-top:26px;} .primary-btn{ position:relative;overflow:hidden;isolation:isolate; background:linear-gradient(135deg,var(--amber-soft),var(--amber) 55%,var(--amber-deep));color:var(--text-dark);border:none; font-family:'JetBrains Mono',monospace;font-weight:700;letter-spacing:.05em;text-transform:uppercase; padding:12px 22px;border-radius:12px;cursor:pointer;font-size:13px; box-shadow:0 10px 26px -8px rgba(55,214,255,.65), inset 0 1px 0 rgba(55,214,255,.35); transition:transform .28s var(--ease-spring), box-shadow .28s var(--ease); } .primary-btn::before{ content:'';position:absolute;inset:0;z-index:-1; background:linear-gradient(115deg,transparent 35%,rgba(55,214,255,.55) 48%,transparent 62%); transform:translateX(-130%);transition:transform .6s var(--ease); } .primary-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 18px 38px -8px rgba(55,214,255,.85), inset 0 1px 0 rgba(55,214,255,.35);} .primary-btn:hover::before{transform:translateX(130%);} .primary-btn:active{transform:translateY(0) scale(.96);} .primary-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;} .ghost-btn{ background:rgba(55,214,255,.03);border:1.5px solid var(--glass-border);color:var(--muted); font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-size:12.5px;letter-spacing:.05em;font-weight:700; padding:12px 22px;border-radius:12px;cursor:pointer; transition:border-color .22s var(--ease), color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease); } .ghost-btn:hover{ border-color:var(--amber);color:var(--text-light);background:rgba(55,214,255,.09); transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(55,214,255,.5); } .ghost-btn:active{transform:translateY(0) scale(.97);} /* ---------- PROFILE ---------- */ .profile-card{ background:linear-gradient(160deg, rgba(55,214,255,.055), rgba(55,214,255,.02)), var(--crate); border:1px solid var(--glass-border); border-radius:24px;padding:40px;max-width:640px;margin:0 auto; position:relative;backdrop-filter:blur(var(--blur-amt)); box-shadow:var(--shadow-xl), inset 0 1px 0 rgba(55,214,255,.05); } .id-tag{ position:absolute;top:-13px;right:28px; background:linear-gradient(135deg,var(--violet),var(--violet-deep));color:var(--white);font-family:'JetBrains Mono',monospace; font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:6px 14px;border-radius:8px; box-shadow:0 6px 18px -4px var(--glow-violet); } .profile-top{display:flex;gap:22px;align-items:center;flex-wrap:wrap;} .avatar{ width:92px;height:92px;border-radius:50%;object-fit:cover; border:3px solid var(--amber);background:var(--crate-line); box-shadow:0 0 0 5px rgba(55,214,255,.14), 0 0 30px -6px rgba(55,214,255,.35); } .profile-name{font-size:27px;font-weight:600;} .profile-bio{margin-top:18px;color:var(--muted);line-height:1.65;font-size:14.5px;white-space:pre-wrap;} .social-list{margin-top:20px;display:flex;flex-direction:column;gap:2px;} .social-list a{ color:var(--text-light);text-decoration:none;font-size:14px;font-weight:500; border-bottom:1px solid rgba(55,214,255,.08);padding:12px 4px; display:flex;justify-content:space-between;align-items:center; transition:.15s; } .social-list a span{opacity:.4;transition:.15s;} .social-list a:hover{color:var(--amber);padding-left:8px;} .social-list a:hover span{opacity:1;transform:translateX(2px);} .edit-profile-btn{margin-top:26px;} /* ---------- WELCOME MODAL ---------- */ .overlay{ position:fixed;inset:0;background:rgba(5,7,12,.75); backdrop-filter:blur(var(--blur-amt)) saturate(140%);-webkit-backdrop-filter:blur(var(--blur-amt)) saturate(140%); display:flex;align-items:center;justify-content:center;z-index:50; animation:fadein .35s var(--ease); } .welcome-box{ background:linear-gradient(160deg,var(--kraft),var(--kraft-dark)); color:var(--text-light); padding:40px 36px;border-radius:26px;max-width:390px;text-align:center; box-shadow:0 50px 110px -20px rgba(0,0,0,.7), 0 0 90px -16px rgba(55,214,255,.4); border:1px solid rgba(55,214,255,.6); position:relative; animation:modalPop .5s var(--ease-spring); } .welcome-box::before, .confirm-box::before{ content:''; position:absolute;top:0;left:26px;right:26px;height:1px; background-image:radial-gradient(circle,rgba(5,7,12,.22) 1.4px,transparent 1.6px); background-size:10px 1px;background-repeat:repeat-x;background-position:top; } .welcome-box h2{font-size:28px;margin-bottom:12px;} .welcome-box p{font-size:14.5px;color:var(--text-muted-brown);line-height:1.6;} .welcome-close{ margin-top:22px;background:var(--ink);color:var(--text-light);border:none; font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-size:12px;letter-spacing:.06em;font-weight:700; padding:12px 26px;border-radius:50px;cursor:pointer;transition:.18s var(--ease); } .welcome-close:hover{background:var(--stamp);color:var(--text-dark);transform:translateY(-2px) scale(1.04);box-shadow:0 14px 28px -8px rgba(55,214,255,.55);} .welcome-close:active{transform:translateY(0) scale(.96);} /* ---------- NẠP V-COIN (SEPAY VIETQR) ---------- */ .topup-box{max-width:400px;position:relative;text-align:center;} .topup-close-x{ position:absolute;top:14px;right:14px;background:none;border:none;cursor:pointer; font-size:16px;color:var(--text-faint-brown);line-height:1;padding:4px; } .topup-close-x:hover{color:var(--stamp);} .topup-amount-grid{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:16px; } .topup-amount-chip{ background:rgba(0,0,0,.05);border:1.5px solid var(--kraft-dark);color:var(--text-light); font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700; padding:10px 4px;border-radius:10px;cursor:pointer;transition:.15s; } .topup-amount-chip:hover{border-color:var(--stamp);} .topup-amount-chip.active{background:var(--stamp);border-color:var(--stamp);color:var(--white);} .topup-qr-img{ width:220px;height:220px;object-fit:contain;background:var(--white);border-radius:14px; margin:14px auto 4px;display:block;border:1px solid var(--kraft-dark);padding:8px; } .topup-info-row{ display:flex;justify-content:space-between;align-items:center;gap:10px; font-size:13px;color:var(--text-muted-brown);padding:7px 2px;border-bottom:1px solid rgba(0,0,0,.08);text-align:left; } .topup-info-row b{color:var(--text-light);font-family:'JetBrains Mono',monospace;font-size:12.5px;text-align:right;word-break:break-all;} .topup-note{font-size:12px;color:var(--text-faint-brown);margin-top:10px;line-height:1.5;text-align:left;} .topup-status{ margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700; color:var(--text-muted-brown);display:flex;align-items:center;justify-content:center;gap:8px; } .topup-status-dot{ width:9px;height:9px;border-radius:50%;background:var(--amber); animation:topupPulse 1.1s ease-in-out infinite; } .topup-status.paid .topup-status-dot{background:var(--green-success);animation:none;} .topup-status.paid{color:#2EE6A6;font-weight:700;} @keyframes topupPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.7);}} .topup-success-icon{ width:64px;height:64px;border-radius:50%;background:var(--green-success);color:var(--white); font-size:32px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px; } /* ---------- TRANG "NẠP COIN" (tab riêng, thay cho modal cũ) ---------- */ .topup-page-balance{ display:flex;align-items:center;gap:16px; background:linear-gradient(135deg,rgba(55,214,255,.14),rgba(55,214,255,.08)); border:1px solid rgba(55,214,255,.3);border-radius:18px;padding:20px 26px; max-width:920px;margin:0 auto 22px; } .topup-page-balance-icon{font-size:34px;line-height:1;} .topup-page-balance-label{ font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);font-weight:700; } .topup-page-balance-num{ font-family:'JetBrains Mono',monospace;font-size:32px;font-weight:700;color:var(--amber);line-height:1.25; } .topup-page-grid{ display:grid;grid-template-columns:400px 1fr;gap:22px; max-width:920px;margin:0 auto;align-items:start; } .topup-page-card{margin:0;max-width:none;} /* huỷ max-width/canh giữa mặc định của .welcome-box vì giờ nằm trong grid, không phải modal nổi giữa màn hình */ .topup-history-card{ background:rgba(55,214,255,.03);border:1px solid rgba(55,214,255,.08); border-radius:20px;padding:22px 24px; } .topup-history-card h3{font-size:16px;margin-bottom:14px;} .topup-history-list{display:flex;flex-direction:column;gap:10px;max-height:560px;overflow-y:auto;} .topup-history-empty{color:var(--muted);font-size:13px;text-align:center;padding:34px 10px;} .topup-history-item{ display:flex;justify-content:space-between;align-items:center;gap:10px; padding:12px 14px;border-radius:12px;background:rgba(55,214,255,.03);border:1px solid rgba(55,214,255,.06); } .topup-history-item-left{display:flex;flex-direction:column;gap:3px;} .topup-history-code{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);} .topup-history-amount{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:var(--text-light);} .topup-history-date{font-size:11.5px;color:var(--muted);} .topup-history-badge{ font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;padding:4px 10px; border-radius:50px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;flex:0 0 auto; } .topup-history-badge.success{background:rgba(55,214,255,.18);color:var(--mint-success);} .topup-history-badge.pending{background:rgba(55,214,255,.18);color:var(--amber-soft);} .topup-history-badge.underpaid{background:rgba(55,214,255,.18);color:var(--gold-warning);} .topup-history-badge.expired{background:rgba(55,214,255,.08);color:var(--muted);} /* Badge phân biệt nguồn đơn trong khối "Lịch sử mua hàng" hợp nhất ở trang Hồ sơ */ .topup-history-badge.src-carethue{background:rgba(55,214,255,.18);color:#D9F3FF;} .topup-history-badge.src-premium{background:rgba(55,214,255,.18);color:var(--amber-soft);} .topup-history-badge.src-product{background:rgba(55,214,255,.18);color:var(--mint-success);} .topup-history-badge.src-claim{background:rgba(55,214,255,.18);color:var(--gold-warning);} /* Nút "Mở Form" trong lịch sử mua Cày thuê dùng thẻ (không phải