/* ═══════════════════════════════════════════════════════════════════════════ NAVS · Cổng cộng tác viên — HỆ THIẾT KẾ "B+ Teal chồng lớp" Một file duy nhất cho toàn portal. Mọi class dùng tiền tố .pt- (tránh đụng .ctv-, .cop-, .be-, .btn, .form-control của trang cũ). Mọi màu dẫn xuất từ assets/css/design-tokens.css — KHÔNG hex cứng. Trang KHÔNG được sửa file này; CSS riêng của trang đặt ở ctv/assets/css/pages/.css (≤120 dòng, chỉ dùng token --pt-*). MỤC LỤC 1. Token 2. Nền tảng (font, focus, tiện ích) 3. Khung: sidebar · thanh trên · vùng nội dung · nav đáy · scrim 4. Dải đầu trang (band) + cơ chế chồng lớp 5. Nút · icon tile · badge · chip trạng thái 6. Thẻ · tiêu đề khu · dải số liệu · thẻ ví · key-value 7. Tiến độ · bậc hạng · biểu đồ 8. Tab · segmented · thanh lọc 9. Bảng dữ liệu · danh sách điện thoại · phân trang · rỗng 10. Thông báo: callout · alert · toast 11. Biểu mẫu 12. Lớp nổi: dialog/drawer/sheet · dropdown · tooltip 13. Linh tinh: avatar · timeline · notification · skeleton 14. Bố cục tiện ích 15. Điểm gãy (responsive) 16. In ấn ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────────── 1. TOKEN ─────────────────────────────────────────────────────────────────────────── */ :root { --pt-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Nền sáng */ --pt-bg: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg)); --pt-surface: var(--color-surface); --pt-sunken: color-mix(in srgb, var(--color-primary) 4%, var(--color-soft)); --pt-tint: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)); --pt-wash: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); --pt-border: color-mix(in srgb, var(--color-primary-deep) 9%, var(--color-border)); --pt-hair: color-mix(in srgb, var(--color-primary-deep) 5%, var(--color-line)); /* Chữ trên nền sáng — hai mức phụ đã ĐẬM LÊN để đạt AA (4.5:1) trên nền chìm, không chỉ trên trắng: #64748B chỉ được 4.18:1 trên --pt-sunken, #94A3B8 được 2.56:1. */ --pt-ink: var(--color-ink); --pt-text: var(--color-secondary-text); --pt-muted: color-mix(in srgb, var(--color-muted) 84%, var(--color-ink)); /* Ngay cả #64748B nguyên bản cũng chỉ được 4.2:1 trên nền chìm — mức "mờ" phải dẫn xuất từ --pt-muted, không phải từ #94A3B8. */ --pt-faint: color-mix(in srgb, var(--pt-muted) 90%, var(--color-mute2)); /* Xám nhạt CHỈ cho trang trí (viền, chấm, cột nền) — không bao giờ cho chữ. */ --pt-faint-dec: var(--color-mute2); /* Thương hiệu */ --pt-brand: var(--color-primary); --pt-brand-strong: var(--color-primary-hover); /* nền nút đặc — trắng trên nền này đạt 5.5:1 */ --pt-brand-deep: var(--color-primary-deep); --pt-accent: var(--color-accent); --pt-accent-deep: var(--color-accent-deep); --pt-warn: var(--color-warning); --pt-warn-deep: var(--color-warning-deep); /* Nền nút phá huỷ: --color-warning-deep (#92400E) đọc ra NÂU cạnh dải hổ phách. Pha sáng lên vừa đủ để trắng vẫn đạt ~4.8:1. */ --pt-warn-solid: color-mix(in srgb, var(--color-warning) 28%, var(--color-warning-deep)); --pt-ok: var(--color-secondary); --pt-ok-deep: var(--color-secondary-deep); --pt-locked: var(--color-locked); --pt-locked-deep: var(--color-locked-deep); /* Nền tối nhiều lớp (sidebar · band · thẻ ví · đầu drawer) */ --pt-night: color-mix(in srgb, var(--color-primary-deep) 52%, black); --pt-deep: color-mix(in srgb, var(--color-primary-deep) 74%, black); --pt-mid: color-mix(in srgb, var(--color-primary-deep) 78%, var(--color-primary-hover)); --pt-band-grad: linear-gradient(155deg, var(--pt-mid) 0%, var(--pt-deep) 54%, var(--pt-night) 100%); --pt-card-grad: linear-gradient(145deg, var(--pt-mid) 0%, var(--pt-deep) 58%, var(--pt-night) 100%); /* Chữ & kính trên nền tối. on-3 = 78%: ở 66% chữ trên thẻ KÍNH (nền sáng hơn dải) chỉ được 3.8–4.5:1 — đo trên .pt-glass của dải hero. */ --pt-on: var(--color-on-dark); --pt-on-2: color-mix(in srgb, var(--color-on-dark) 85%, transparent); --pt-on-3: color-mix(in srgb, var(--color-on-dark) 78%, transparent); --pt-glass: color-mix(in srgb, var(--color-on-dark) 8%, transparent); --pt-glass-2: color-mix(in srgb, var(--color-on-dark) 15%, transparent); --pt-line-d: color-mix(in srgb, var(--color-on-dark) 15%, transparent); --pt-mint: color-mix(in srgb, var(--color-primary) 45%, var(--color-on-dark)); /* Bóng nhuộm teal — 3 mức */ --pt-sh-1: 0 1px 2px color-mix(in srgb, var(--color-primary-deep) 12%, transparent); --pt-sh-2: 0 1px 2px color-mix(in srgb, var(--color-primary-deep) 9%, transparent), 0 10px 24px -14px color-mix(in srgb, var(--color-primary-deep) 30%, transparent); --pt-sh-3: 0 1px 0 color-mix(in srgb, var(--color-on-dark) 55%, transparent) inset, 0 2px 4px color-mix(in srgb, var(--color-primary-deep) 9%, transparent), 0 28px 56px -26px color-mix(in srgb, var(--color-primary-deep) 55%, transparent); --pt-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 32%, transparent); --pt-focus-d: 0 0 0 3px color-mix(in srgb, var(--color-on-dark) 45%, transparent); /* Bo góc */ --pt-r-sm: 8px; --pt-r-md: 11px; --pt-r-lg: 14px; --pt-r-xl: 18px; --pt-r-2xl: 22px; --pt-r-pill: 999px; /* Giãn cách (nối vào thang 4px của design-tokens) */ --pt-s-1: 4px; --pt-s-2: 8px; --pt-s-3: 12px; --pt-s-4: 16px; --pt-s-5: 20px; --pt-s-6: 24px; --pt-s-7: 32px; --pt-s-8: 40px; --pt-s-9: 56px; --pt-s-10: 72px; /* Chiều cao control */ --pt-h-sm: 34px; --pt-h-md: 42px; --pt-h-lg: 48px; /* Thang chữ */ --pt-fs-12: 12px; --pt-fs-13: 13px; --pt-fs-14: 14px; --pt-fs-15: 15px; --pt-fs-16: 16px; --pt-fs-18: 18px; --pt-fs-20: 20px; --pt-fs-24: 24px; --pt-fs-30: 30px; --pt-fs-36: 36px; /* Lớp chồng */ --pt-z-bnav: 30; --pt-z-sticky: 40; --pt-z-side: 50; --pt-z-scrim: 45; --pt-z-dropdown: 70; --pt-z-drawer: 80; --pt-z-modal: 90; --pt-z-toast: 200; /* Khung */ --pt-side-w: 268px; --pt-top-h: 64px; --pt-bnav-h: 62px; --pt-gutter: 40px; --pt-max: 1320px; /* Chồng lớp theo biến thể band (ghi đè ở .pt-main--*) */ --pt-band-pb: 100px; --pt-overlap: 64px; --pt-flow: var(--pt-s-7); --pt-ease: cubic-bezier(.4, 0, .2, 1); --pt-dur: 180ms; } /* ─────────────────────────────────────────────────────────────────────────── 2. NỀN TẢNG ─────────────────────────────────────────────────────────────────────────── */ .pt-body { margin: 0; background: var(--pt-bg); } .pt-body, .pt-shell, .pt-scope { font-family: var(--pt-font); font-size: var(--pt-fs-15); line-height: 1.5; color: var(--pt-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Reset bọc trong :where() → độ đặc hiệu 0 cho phần scope, nên MỌI class component (.pt-btn--primary, .pt-link…) luôn thắng. Không có :where(), `.pt-scope a` (0,1,1) sẽ đè màu chữ của nút-dạng-link. */ :where(.pt-shell, .pt-scope, .pt-dialog) * { box-sizing: border-box; } :where(.pt-shell, .pt-scope, .pt-dialog) a { color: inherit; text-decoration: none; } :where(.pt-shell, .pt-scope, .pt-dialog) svg { flex-shrink: 0; } /* Phần còn dùng của ctv.css cũ (đã gỡ khỏi khung 18/09): box-sizing cho popup dựng bằng JS nằm ngoài .pt-shell, biểu đồ vùng ctv_area_chart() và icon trong nút .btn của popup dùng chung. */ :where(.pt-body) *, :where(.pt-body) *::before, :where(.pt-body) *::after { box-sizing: border-box; } .cg { display: block; width: 100%; height: auto; max-height: 210px; } .cg-grid { stroke: var(--color-line); stroke-width: 1; } .cg-xl { fill: var(--color-muted); font-size: 11px; font-family: var(--font-sans); } :where(.pt-body) .btn svg { width: 16px; height: 16px; } :where(.pt-shell, .pt-scope, .pt-dialog) p { margin: 0; } :where(.pt-shell, .pt-scope, .pt-dialog) :is(button, input, select, textarea) { font-family: inherit; font-size: inherit; } /* Không dùng font mono ở bất cứ đâu trong portal — kể cả mã, số tài khoản, OTP. Trang CHƯA chuyển vẫn viết `font-family: var(--font-mono)` trong CSS riêng của nó; đặt lại chính BIẾN đó trong khung là tắt hết một lượt, không cần !important. */ .pt-shell, .pt-scope, .pt-dialog { --font-mono: var(--pt-font); } :where(.pt-shell, .pt-scope, .pt-dialog) :is(code, kbd, samp, pre) { font-family: var(--pt-font); font-size: .95em; font-variant-numeric: tabular-nums; background: var(--pt-sunken); border-radius: 4px; padding: 1px 5px; color: var(--pt-text); } /* Số cột phải thẳng hàng ở mọi nơi hiện tiền/đếm */ .pt-num, .pt-table .pt-t-num, .pt-stat__v, .pt-kv__v { font-variant-numeric: tabular-nums; } /* Tiện ích chữ — dùng thay cho style="color:…" trong trang */ .pt-t-ink { color: var(--pt-ink); } .pt-t-body { color: var(--pt-text); } .pt-t-muted { color: var(--pt-muted); } .pt-t-faint { color: var(--pt-faint); } .pt-t-brand { color: var(--pt-brand-deep); } .pt-t-warn { color: var(--pt-warn-deep); } .pt-t-on { color: var(--pt-on); } .pt-t-on-2 { color: var(--pt-on-2); } .pt-t-on-3 { color: var(--pt-on-3); } .pt-t-sm { font-size: var(--pt-fs-13); } .pt-t-lead { font-size: var(--pt-fs-15); line-height: 1.65; } .pt-t-bold { font-weight: 600; } /* Vòng focus: chỉ khi điều hướng bàn phím. Dùng OUTLINE chứ không box-shadow vì: (a) box-shadow teal-32% chỉ được 1.3:1 với nền → trượt WCAG 1.4.11; (b) trạng thái "đang chọn" (.pt-nav__item.is-active, .pt-seg__i.is-on…) cũng đặt box-shadow ở cùng độ đặc hiệu nhưng khai báo SAU → nuốt mất vòng focus; (c) chế độ tương phản ép buộc bỏ hết box-shadow, outline thì giữ. */ .pt-shell :focus-visible, .pt-scope :focus-visible, .pt-dialog :focus-visible { outline: 2px solid var(--pt-brand-strong); outline-offset: 2px; } .pt-band :focus-visible, .pt-side :focus-visible, .pt-wallet :focus-visible, .pt-dialog__head :focus-visible, .pt-top:not(.is-scrolled) :focus-visible { outline-color: var(--color-on-dark); } .pt-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .pt-hide { display: none !important; } /* Bỏ qua điều hướng: 17+ mục đứng trước nội dung chính */ .pt-skip { position: fixed; top: -100px; left: var(--pt-s-3); z-index: var(--pt-z-toast); display: inline-flex; align-items: center; height: var(--pt-h-md); padding: 0 var(--pt-s-4); border-radius: var(--pt-r-md); background: var(--pt-surface); color: var(--pt-brand-deep); font-size: var(--pt-fs-14); font-weight: 600; box-shadow: var(--pt-sh-3); } .pt-skip:focus { top: calc(var(--pt-s-2) + env(safe-area-inset-top, 0px)); } #ptMain:focus { outline: none; } @media (prefers-reduced-motion: reduce) { .pt-shell *, .pt-scope *, .pt-dialog * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ─────────────────────────────────────────────────────────────────────────── 3. KHUNG ─────────────────────────────────────────────────────────────────────────── */ .pt-shell { display: grid; grid-template-columns: var(--pt-side-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; } /* ── Sidebar teal tối ─────────────────────────────────────────────────────── */ .pt-side { position: sticky; top: 0; z-index: var(--pt-z-side); height: 100vh; height: 100dvh; display: flex; flex-direction: column; min-height: 0; color: var(--pt-on-2); background: radial-gradient(120% 38% at 0% 0%, color-mix(in srgb, var(--color-primary) 24%, transparent), transparent 70%), linear-gradient(180deg, var(--pt-deep) 0%, var(--pt-night) 100%); border-right: 1px solid var(--pt-line-d); } .pt-side__brand { display: flex; align-items: center; gap: var(--pt-s-3); padding: 16px 20px 12px; flex-shrink: 0; } .pt-side__mark { width: 38px; height: 38px; border-radius: var(--pt-r-md); display: grid; place-items: center; background: var(--color-primary-hover); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-on-dark) 20%, transparent) inset, 0 8px 18px -6px color-mix(in srgb, var(--color-primary) 65%, transparent); } .pt-side__mark img { display: block; width: 82%; height: auto; } .pt-side__names { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .pt-side__names strong { color: var(--pt-on); font-size: var(--pt-fs-15); font-weight: 700; letter-spacing: -.01em; } .pt-side__names span { color: var(--pt-on-3); font-size: var(--pt-fs-13); font-weight: 500; } .pt-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--pt-s-1) var(--pt-s-3) var(--pt-s-4); scrollbar-width: thin; scrollbar-color: var(--pt-glass-2) transparent; } .pt-nav::-webkit-scrollbar { width: 8px; } .pt-nav::-webkit-scrollbar-thumb { background: var(--pt-glass-2); border-radius: var(--pt-r-pill); border: 2px solid transparent; background-clip: content-box; } .pt-nav__group + .pt-nav__group { margin-top: var(--pt-s-3); } .pt-nav__label { padding: 0 var(--pt-s-3) var(--pt-s-1); font-size: var(--pt-fs-12); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--pt-on-3); } .pt-nav__item { position: relative; display: flex; align-items: center; gap: var(--pt-s-3); min-height: 38px; padding: 6px var(--pt-s-3); border-radius: var(--pt-r-md); font-size: var(--pt-fs-14); font-weight: 500; color: var(--pt-on-2); transition: background var(--pt-dur) var(--pt-ease), color var(--pt-dur) var(--pt-ease); } .pt-nav__item svg { color: var(--pt-on-3); transition: color var(--pt-dur) var(--pt-ease); } .pt-nav__item:hover { background: var(--pt-glass); color: var(--pt-on); } .pt-nav__item:hover svg { color: var(--pt-on-2); } .pt-nav__item.is-active { color: var(--pt-on); font-weight: 600; background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 32%, transparent), color-mix(in srgb, var(--color-primary) 8%, transparent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 32%, transparent) inset; } .pt-nav__item.is-active svg { color: var(--pt-mint); } .pt-nav__item.is-active::before { content: ""; position: absolute; left: calc(var(--pt-s-3) * -1); top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-primary); } .pt-nav__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-nav__tag { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pt-r-pill); display: inline-grid; place-items: center; font-size: var(--pt-fs-12); font-weight: 700; background: var(--pt-glass-2); color: var(--pt-on); font-variant-numeric: tabular-nums; } .pt-nav__tag--alert { background: var(--color-warning); color: var(--color-ink); } .pt-side__foot { position: relative; flex-shrink: 0; padding: var(--pt-s-2) var(--pt-s-3) var(--pt-s-3); border-top: 1px solid var(--pt-line-d); } /* Menu dài hơn khung nhìn thì cắt ngang không có dấu hiệu gì — thêm dải mờ ở mép cắt. Chỉ bật khi JS thấy nav thật sự cuộn được (.is-scrollable). */ .pt-nav.is-scrollable + .pt-side__foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--pt-night)); } .pt-side__tier { display: flex; align-items: center; gap: var(--pt-s-2); margin-bottom: var(--pt-s-2); padding: 7px var(--pt-s-3); border-radius: var(--pt-r-md); background: var(--pt-glass); font-size: var(--pt-fs-13); color: var(--pt-on-2); } .pt-side__tier svg { color: var(--color-warning); } .pt-side__tier strong { color: var(--pt-on); font-weight: 600; margin-left: auto; } .pt-side__acct { display: flex; align-items: center; gap: var(--pt-s-3); padding: var(--pt-s-2) 10px; border-radius: var(--pt-r-lg); background: var(--pt-glass); } .pt-side__who { min-width: 0; flex: 1; line-height: 1.25; } .pt-side__who strong { display: block; color: var(--pt-on); font-size: var(--pt-fs-14); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-side__who span { font-size: var(--pt-fs-13); color: var(--pt-on-3); letter-spacing: .03em; } .pt-side__out { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--pt-r-sm); color: var(--pt-on-3); } .pt-side__out:hover { background: var(--pt-glass-2); color: var(--pt-on); } /* ── Vùng chính + thanh trên ─────────────────────────────────────────────── */ .pt-main { min-width: 0; display: flex; flex-direction: column; } .pt-main--hero { --pt-band-pb: 128px; --pt-overlap: 88px; } .pt-main--standard{ --pt-band-pb: 100px; --pt-overlap: 64px; } .pt-main--compact { --pt-band-pb: 76px; --pt-overlap: 44px; } .pt-main--plain { --pt-band-pb: 0px; --pt-overlap: 0px; } .pt-top { position: sticky; top: 0; z-index: var(--pt-z-sticky); display: flex; align-items: center; gap: var(--pt-s-3); height: var(--pt-top-h); padding: 0 var(--pt-gutter); color: var(--pt-on); background: transparent; border-bottom: 1px solid transparent; transition: background var(--pt-dur) var(--pt-ease), color var(--pt-dur) var(--pt-ease), box-shadow var(--pt-dur) var(--pt-ease), border-color var(--pt-dur) var(--pt-ease); } .pt-top.is-scrolled { color: var(--pt-ink); background: var(--pt-surface); border-bottom-color: var(--pt-border); box-shadow: var(--pt-sh-1); } /* Tiêu đề trên thanh: CHỈ hiện khi đã cuộn qua dải — dải đã in tiêu đề rồi, in hai lần là lỗi thị giác (và hai

trùng chữ trên một trang). Với biến thể `plain` (không có dải) thì đây là tiêu đề DUY NHẤT nên luôn hiện. */ .pt-top__title { display: flex; align-items: baseline; gap: 10px; min-width: 0; transition: opacity var(--pt-dur) var(--pt-ease), transform var(--pt-dur) var(--pt-ease); } .pt-top__title h1, .pt-top__name { margin: 0; color: currentColor; font-size: var(--pt-fs-18); font-weight: 700; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .pt-top__title span { font-size: var(--pt-fs-13); color: currentColor; opacity: .68; white-space: nowrap; } .pt-main:not(.pt-main--plain) .pt-top:not(.is-scrolled) .pt-top__title { opacity: 0; transform: translateY(4px); pointer-events: none; } /* Không có dải ⇒ thanh trên nằm trên nền sáng: chữ trắng sẽ tàng hình. */ .pt-main--plain .pt-top { color: var(--pt-ink); background: var(--pt-surface); border-bottom-color: var(--pt-border); } .pt-top__tools { margin-left: auto; display: flex; align-items: center; gap: var(--pt-s-2); } .pt-top__burger, .pt-top__brand { display: none; } /* Nút icon tự đổi màu theo nền (dùng currentColor nên chạy cả trên band lẫn nền trắng) */ .pt-icbtn { position: relative; width: 40px; height: 40px; border-radius: var(--pt-r-md); display: inline-grid; place-items: center; color: inherit; cursor: pointer; background: color-mix(in srgb, currentColor 9%, transparent); border: 1px solid color-mix(in srgb, currentColor 16%, transparent); transition: background var(--pt-dur) var(--pt-ease); } .pt-icbtn:hover { background: color-mix(in srgb, currentColor 17%, transparent); } .pt-icbtn--sm { width: 34px; height: 34px; border-radius: var(--pt-r-sm); } .pt-icbtn__count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--pt-r-pill); display: grid; place-items: center; font-size: var(--pt-fs-12); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-ink); background: var(--color-warning); box-shadow: 0 0 0 2px var(--pt-deep); } .pt-top.is-scrolled .pt-icbtn__count { box-shadow: 0 0 0 2px var(--pt-surface); } /* Nút tài khoản trên thanh trên */ .pt-acct { position: relative; } .pt-acct__btn { display: flex; align-items: center; gap: var(--pt-s-2); height: 40px; padding: 0 10px 0 4px; border-radius: var(--pt-r-md); cursor: pointer; color: inherit; background: color-mix(in srgb, currentColor 9%, transparent); border: 1px solid color-mix(in srgb, currentColor 16%, transparent); } .pt-acct__btn:hover { background: color-mix(in srgb, currentColor 17%, transparent); } .pt-acct__who { display: flex; flex-direction: column; line-height: 1.2; text-align: left; } .pt-acct__who strong { font-size: var(--pt-fs-13); font-weight: 600; } .pt-acct__who span { font-size: var(--pt-fs-12); opacity: .7; } /* ── Vùng nội dung ───────────────────────────────────────────────────────── */ .pt-page { position: relative; width: 100%; max-width: calc(var(--pt-max) + 2 * var(--pt-gutter)); margin: 0 auto; padding: var(--pt-s-6) var(--pt-gutter) var(--pt-s-9); flex: 1; } .pt-main--hero > .pt-page, .pt-main--standard > .pt-page, .pt-main--compact > .pt-page { padding-top: 0; } /* Hàng đầu tiên chồng lên mép dải. Chặn cứng: không bao giờ kéo lên quá (đệm đáy dải − 12px), nếu không thẻ chồng lớp che mất dòng ngữ cảnh của dải khi trang thu đệm lại (ví dụ khuôn legacy). */ .pt-overlap { position: relative; margin-top: calc(-1 * min(var(--pt-overlap), max(0px, var(--pt-band-pb) - 12px))); } /* Biến thể `plain` không có dải nhưng vẫn có thể có nút hành động */ .pt-plain-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--pt-s-2); flex-wrap: wrap; max-width: calc(var(--pt-max) + 2 * var(--pt-gutter)); margin: 0 auto; padding: var(--pt-s-4) var(--pt-gutter) 0; } /* ── Nav đáy (điện thoại) + scrim ────────────────────────────────────────── */ .pt-bnav { display: none; } .pt-scrim { position: fixed; inset: 0; z-index: var(--pt-z-scrim); background: color-mix(in srgb, var(--pt-night) 62%, transparent); opacity: 0; visibility: hidden; transition: opacity var(--pt-dur) var(--pt-ease), visibility var(--pt-dur); } .pt-scrim.is-on { opacity: 1; visibility: visible; } body.pt-locked { overflow: hidden; } /* ─────────────────────────────────────────────────────────────────────────── 4. DẢI ĐẦU TRANG (BAND) ─────────────────────────────────────────────────────────────────────────── */ .pt-band { position: relative; isolation: isolate; overflow: hidden; color: var(--pt-on); margin-top: calc(var(--pt-top-h) * -1); padding: calc(var(--pt-top-h) + var(--pt-s-6)) var(--pt-gutter) var(--pt-band-pb); background: radial-gradient(58% 92% at 88% -12%, color-mix(in srgb, var(--color-primary) 48%, transparent), transparent 62%), radial-gradient(42% 72% at 26% 128%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%), var(--pt-band-grad); } /* Lưới chấm — cố ý rõ để dải không đọc thành gradient phẳng */ .pt-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9; background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-on-dark) 16%, transparent) 1px, transparent 1.5px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(118deg, transparent 12%, black 62%); mask-image: linear-gradient(118deg, transparent 12%, black 62%); } /* Hạt mịn — ảnh tĩnh, không blend-mode để iOS không dựng lớp compositing thừa */ .pt-band::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .16; background-image: url("data:image/svg+xml;utf8,"); } .pt-band__inner { max-width: var(--pt-max); margin: 0 auto; position: relative; } .pt-band--hero { --pt-band-pb: 128px; } .pt-band--standard{ --pt-band-pb: 100px; } .pt-band--compact { --pt-band-pb: 76px; padding-top: calc(var(--pt-top-h) + var(--pt-s-4)); } /* Nội dung trong dải — heading phải tự đặt màu sáng (design-tokens ép h1..h6 về ink) */ .pt-band h1, .pt-band h2, .pt-band h3, .pt-band h4 { color: var(--pt-on); margin: 0; } .pt-band__eyebrow { display: inline-flex; align-items: center; gap: var(--pt-s-2); font-size: var(--pt-fs-13); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--pt-mint); } .pt-band__title { font-size: var(--pt-fs-24); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; } .pt-band--compact .pt-band__title { font-size: var(--pt-fs-20); } /* Nhịp dọc trong dải: nhãn → tiêu đề → ngữ cảnh → chip → nút. Trước đây 4/6/16/0px nên cả khối dính thành một mảng; chủ site chê "sát vào nhau, rối". */ .pt-band__eyebrow + .pt-band__title, .pt-band__eyebrow + .pt-band__figure { margin-top: var(--pt-s-3); } .pt-band__context { margin-top: var(--pt-s-3); font-size: var(--pt-fs-14); line-height: 1.6; color: var(--pt-on-2); max-width: 62ch; } .pt-band__context strong { color: var(--pt-on); font-weight: 600; } .pt-band__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pt-s-5) var(--pt-s-7); flex-wrap: wrap; } .pt-band__row > div:first-child { flex: 1 1 420px; min-width: 0; } .pt-band__actions { display: flex; align-items: center; gap: var(--pt-s-3); flex-wrap: wrap; } .pt-band__hero .pt-band__actions { margin-top: var(--pt-s-6); } .pt-band__figure { margin: 10px 0 4px; font-size: var(--pt-fs-36); line-height: 1.05; font-weight: 800; letter-spacing: -.035em; color: var(--pt-on); font-variant-numeric: tabular-nums; } .pt-band__figure small { font-size: var(--pt-fs-24); font-weight: 700; color: var(--pt-on-2); margin-right: 4px; } .pt-band__hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--pt-s-9); align-items: center; } .pt-band__back { position: relative; display: flex; width: fit-content; align-items: center; gap: 6px; margin-bottom: var(--pt-s-4); font-size: var(--pt-fs-13); font-weight: 600; color: var(--pt-on-2); } .pt-band__back:hover { color: var(--pt-on); } .pt-band__chips { display: flex; flex-wrap: wrap; gap: var(--pt-s-3) var(--pt-s-2); margin-top: var(--pt-s-5); } .pt-chip-d { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 var(--pt-s-3); border-radius: var(--pt-r-pill); font-size: var(--pt-fs-13); color: var(--pt-on-2); background: var(--pt-glass); border: 1px solid var(--pt-line-d); } .pt-chip-d strong { color: var(--pt-on); font-weight: 600; } /* Thẻ kính đặt trong dải */ .pt-glass { padding: var(--pt-s-5) var(--pt-s-5); border-radius: var(--pt-r-xl); background: linear-gradient(160deg, var(--pt-glass-2), var(--pt-glass)); border: 1px solid var(--pt-line-d); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-on-dark) 10%, transparent) inset; } .pt-glass__head { display: flex; align-items: center; justify-content: space-between; gap: var(--pt-s-3); } .pt-glass__title { display: flex; align-items: center; gap: var(--pt-s-2); font-size: var(--pt-fs-14); font-weight: 600; color: var(--pt-on); } .pt-glass__note { margin-top: var(--pt-s-3); padding-top: var(--pt-s-3); border-top: 1px solid var(--pt-line-d); font-size: var(--pt-fs-13); color: var(--pt-on-2); line-height: 1.55; } .pt-glass__note strong { color: var(--pt-on); } /* ─────────────────────────────────────────────────────────────────────────── 5. NÚT · ICON TILE · BADGE · CHIP TRẠNG THÁI ─────────────────────────────────────────────────────────────────────────── */ .pt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--pt-s-2); height: var(--pt-h-md); padding: 0 var(--pt-s-5); border-radius: var(--pt-r-md); font-size: var(--pt-fs-14); font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid transparent; cursor: pointer; position: relative; min-width: 0; max-width: 100%; transition: background var(--pt-dur) var(--pt-ease), border-color var(--pt-dur) var(--pt-ease), color var(--pt-dur) var(--pt-ease), box-shadow var(--pt-dur) var(--pt-ease); } .pt-btn--primary { --pt-spin: var(--pt-on); background: var(--pt-brand-strong); color: var(--pt-on); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-on-dark) 20%, transparent) inset, 0 8px 18px -10px color-mix(in srgb, var(--color-primary-hover) 90%, transparent); } .pt-btn--primary:hover { background: color-mix(in srgb, var(--color-primary-hover) 80%, var(--color-primary-deep)); } .pt-btn--secondary { --pt-spin: var(--pt-brand-deep); background: color-mix(in srgb, var(--color-primary) 13%, var(--color-surface)); color: var(--pt-brand-deep); border-color: color-mix(in srgb, var(--color-primary) 38%, transparent); } .pt-btn--secondary:hover { background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface)); } .pt-btn--outline { --pt-spin: var(--pt-brand-strong); background: var(--pt-surface); color: var(--pt-ink); border-color: var(--pt-border); } .pt-btn--outline:hover { background: var(--pt-tint); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); } .pt-btn--ghost { --pt-spin: var(--pt-brand-strong); background: transparent; color: var(--pt-text); } .pt-btn--ghost:hover { background: var(--pt-sunken); color: var(--pt-ink); } .pt-btn--danger { --pt-spin: var(--pt-warn-deep); background: var(--pt-surface); color: var(--pt-warn-deep); border-color: color-mix(in srgb, var(--color-warning) 42%, var(--color-border)); } .pt-btn--danger:hover { background: var(--color-warning-soft); } .pt-btn--danger-solid { --pt-spin: var(--pt-on); background: var(--pt-warn-solid); color: var(--pt-on); } .pt-btn--danger-solid:hover { background: var(--pt-warn-deep); } /* Trên nền tối */ .pt-btn--white { --pt-spin: var(--pt-brand-strong); background: var(--pt-on); color: var(--pt-brand-deep); box-shadow: 0 10px 26px -12px color-mix(in srgb, black 60%, transparent); } .pt-btn--white:hover { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-on-dark)); } .pt-btn--glass { --pt-spin: var(--pt-on); background: var(--pt-glass-2); color: var(--pt-on); border-color: var(--pt-line-d); } .pt-btn--glass:hover { background: color-mix(in srgb, var(--color-on-dark) 24%, transparent); } .pt-btn--sm { height: var(--pt-h-sm); padding: 0 var(--pt-s-3); border-radius: var(--pt-r-sm); font-size: var(--pt-fs-13); } .pt-btn--lg { height: var(--pt-h-lg); padding: 0 var(--pt-s-6); border-radius: var(--pt-r-lg); font-size: var(--pt-fs-15); } .pt-btn--block { width: 100%; } .pt-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .pt-btn--icon { width: var(--pt-h-md); padding: 0; } .pt-btn--icon.pt-btn--sm { width: var(--pt-h-sm); } .pt-btn--icon.pt-btn--lg { width: var(--pt-h-lg); } .pt-btn[disabled], .pt-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; } .pt-btn.is-loading { color: transparent !important; pointer-events: none; } /* `color: transparent` làm mất luôn currentColor của vòng quay → nút TRỐNG TRƠN. Mỗi biến thể tự khai --pt-spin; mặc định là mực trang cho biến thể lạ. */ .pt-btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--pt-spin, var(--pt-ink)) 28%, transparent); border-top-color: var(--pt-spin, var(--pt-ink)); animation: pt-spin .7s linear infinite; } @keyframes pt-spin { to { transform: rotate(360deg); } } /* Liên kết dạng chữ */ .pt-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pt-fs-14); font-weight: 600; color: var(--pt-brand-strong); } .pt-link:hover { color: var(--pt-brand-deep); } .pt-link--muted { color: var(--pt-muted); font-weight: 500; } .pt-link--muted:hover { color: var(--pt-ink); } /* Ô icon */ .pt-tile { width: 40px; height: 40px; border-radius: var(--pt-r-md); display: inline-grid; place-items: center; flex-shrink: 0; background: var(--pt-wash); color: var(--pt-brand-strong); } .pt-tile--lg { width: 52px; height: 52px; border-radius: var(--pt-r-lg); } .pt-tile--sm { width: 32px; height: 32px; border-radius: var(--pt-r-sm); } .pt-tile--dark { background: var(--pt-card-grad); color: var(--pt-on); } .pt-tile--accent { background: var(--color-accent-soft); color: var(--pt-accent-deep); } .pt-tile--warn { background: var(--color-warning-soft); color: var(--pt-warn-deep); } .pt-tile--neutral { background: var(--pt-sunken); color: var(--pt-muted); } /* Badge & chip trạng thái */ .pt-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--pt-r-sm); font-size: var(--pt-fs-12); font-weight: 600; letter-spacing: .01em; white-space: nowrap; background: var(--pt-sunken); color: var(--pt-muted); } .pt-badge--brand { background: var(--pt-wash); color: var(--pt-brand-deep); } .pt-badge--success { background: var(--pill-success-bg); color: var(--pill-success-fg); } .pt-badge--info { background: var(--color-accent-soft); color: var(--pt-accent-deep); } .pt-badge--warning { background: var(--pill-warning-bg); color: var(--pill-warning-fg); } .pt-badge--danger { background: var(--pill-danger-bg); color: var(--pill-danger-fg); } .pt-badge--neutral { background: var(--color-locked-soft); color: var(--pt-locked-deep); } .pt-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--pt-r-pill); font-size: var(--pt-fs-13); font-weight: 600; white-space: nowrap; background: var(--color-locked-soft); color: var(--pt-locked-deep); } .pt-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .pt-pill--brand { background: var(--pt-wash); color: var(--pt-brand-deep); } .pt-pill--success { background: var(--pill-success-bg); color: var(--pill-success-fg); } .pt-pill--info { background: var(--color-accent-soft); color: var(--pt-accent-deep); } .pt-pill--warning { background: var(--pill-warning-bg); color: var(--pill-warning-fg); } .pt-pill--danger { background: var(--pill-danger-bg); color: var(--pill-danger-fg); } .pt-pill--neutral { background: var(--color-locked-soft); color: var(--pt-locked-deep); } .pt-pill--plain::before { display: none; } /* Nhãn web (đa site) */ .pt-site { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--pt-r-sm); font-size: var(--pt-fs-12); font-weight: 600; white-space: nowrap; background: var(--pt-wash); color: var(--pt-brand-deep); } .pt-site--ttkk { background: var(--color-accent-soft); color: var(--pt-accent-deep); } /* ─────────────────────────────────────────────────────────────────────────── 6. THẺ · TIÊU ĐỀ KHU · DẢI SỐ LIỆU · THẺ VÍ · KEY-VALUE ─────────────────────────────────────────────────────────────────────────── */ .pt-card { min-width: 0; background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-r-xl); box-shadow: var(--pt-sh-2); } .pt-card--lift { box-shadow: var(--pt-sh-3); } .pt-card--sunken { background: var(--pt-sunken); box-shadow: none; } .pt-card--accent { border-color: color-mix(in srgb, var(--color-accent) 32%, var(--color-border)); } .pt-card--accent .pt-card__head { border-bottom-color: color-mix(in srgb, var(--color-accent) 22%, var(--color-border)); } .pt-card--flat { box-shadow: none; } .pt-card--pad { padding: var(--pt-s-5) var(--pt-s-6); } .pt-card__head { display: flex; align-items: center; gap: var(--pt-s-3); padding: var(--pt-s-4) var(--pt-s-6); border-bottom: 1px solid var(--pt-hair); min-height: 56px; } .pt-card__head--plain { border-bottom: 0; padding-bottom: 0; } .pt-card__title { margin: 0; font-size: var(--pt-fs-16); font-weight: 700; letter-spacing: -.01em; color: var(--pt-ink); line-height: 1.3; } .pt-card__sub { margin: 2px 0 0; font-size: var(--pt-fs-13); color: var(--pt-muted); } .pt-card__meta { font-size: var(--pt-fs-13); color: var(--pt-muted); } .pt-card__tools { margin-left: auto; display: flex; align-items: center; gap: var(--pt-s-2); } .pt-card__body { padding: var(--pt-s-5) var(--pt-s-6); } .pt-card__body--tight { padding: var(--pt-s-3) var(--pt-s-4); } .pt-card__foot { display: flex; align-items: center; gap: var(--pt-s-3); flex-wrap: wrap; padding: var(--pt-s-3) var(--pt-s-6); border-top: 1px solid var(--pt-hair); background: var(--pt-sunken); border-radius: 0 0 var(--pt-r-xl) var(--pt-r-xl); font-size: var(--pt-fs-13); color: var(--pt-muted); } /* Tiêu đề khu (ngoài thẻ) */ .pt-sec { display: flex; align-items: baseline; gap: var(--pt-s-3); margin: var(--pt-s-7) 0 var(--pt-s-4); } .pt-sec:first-child { margin-top: 0; } .pt-sec__title { margin: 0; font-size: var(--pt-fs-18); font-weight: 700; letter-spacing: -.015em; color: var(--pt-ink); } .pt-sec__sub { font-size: var(--pt-fs-13); color: var(--pt-muted); } .pt-sec__tools { margin-left: auto; display: flex; align-items: center; gap: var(--pt-s-2); } /* Dải số liệu — MỘT thẻ chia bằng đường tóc, ô đầu có thể phủ gradient */ .pt-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-r-xl); box-shadow: var(--pt-sh-2); overflow: hidden; } .pt-strip__cell { padding: var(--pt-s-4) var(--pt-s-5); min-width: 0; } .pt-strip__cell + .pt-strip__cell { border-left: 1px solid var(--pt-hair); } .pt-strip__k { display: flex; align-items: center; gap: 6px; font-size: var(--pt-fs-13); color: var(--pt-muted); white-space: nowrap; } .pt-strip__k svg { color: var(--pt-faint-dec); } .pt-strip__v { margin-top: 4px; font-size: var(--pt-fs-20); font-weight: 700; letter-spacing: -.02em; color: var(--pt-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .pt-strip__s { margin-top: 4px; font-size: var(--pt-fs-13); color: var(--pt-muted); } .pt-strip__cell--lead { position: relative; isolation: isolate; color: var(--pt-on); background: var(--pt-card-grad); border-left: 0 !important; } .pt-strip__cell--lead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(color-mix(in srgb, var(--color-on-dark) 14%, transparent) 1px, transparent 1.4px) 0 0 / 12px 12px; -webkit-mask-image: linear-gradient(100deg, transparent 32%, black); mask-image: linear-gradient(100deg, transparent 32%, black); } .pt-strip__cell--lead .pt-strip__k { color: var(--pt-on-2); } .pt-strip__cell--lead .pt-strip__k svg { color: var(--pt-mint); } .pt-strip__cell--lead .pt-strip__v { color: var(--pt-on); } .pt-strip__cell--lead .pt-strip__s { color: var(--pt-on-2); } .pt-strip__note { margin-top: var(--pt-s-3); font-size: var(--pt-fs-13); color: var(--pt-muted); } /* Metric trong thẻ (dùng cho lưới "Hôm nay") */ .pt-metrics { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .pt-metric { padding: var(--pt-s-4) var(--pt-s-5); min-width: 0; } .pt-metric + .pt-metric { border-left: 1px solid var(--pt-hair); } .pt-metric__k { display: flex; align-items: center; gap: 6px; font-size: var(--pt-fs-13); font-weight: 500; color: var(--pt-muted); } .pt-metric__k svg { color: var(--pt-brand); } .pt-metric__v { margin: 6px 0 4px; font-size: var(--pt-fs-24); font-weight: 700; letter-spacing: -.025em; color: var(--pt-ink); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.15; } .pt-metric__v--money { font-size: var(--pt-fs-20); } .pt-metric__s { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--pt-fs-12); color: var(--pt-muted); font-variant-numeric: tabular-nums; } .pt-delta { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--pt-r-sm); font-size: var(--pt-fs-12); font-weight: 600; } .pt-delta--up { background: var(--pill-success-bg); color: var(--pill-success-fg); } .pt-delta--down { background: var(--pill-warning-bg); color: var(--pill-warning-fg); } /* Thẻ ví kiểu thẻ ngân hàng */ .pt-wallet { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; container-type: inline-size; padding: var(--pt-s-5) var(--pt-s-6); border-radius: var(--pt-r-2xl); color: var(--pt-on); background: var(--pt-card-grad); box-shadow: var(--pt-sh-3); min-height: 236px; } .pt-wallet::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 100% 0%, transparent 38%, var(--pt-line-d) 38.3%, transparent 38.8%, transparent 52%, color-mix(in srgb, var(--color-on-dark) 10%, transparent) 52.3%, transparent 52.8%), radial-gradient(color-mix(in srgb, var(--color-on-dark) 14%, transparent) 1px, transparent 1.4px) 0 0 / 12px 12px; -webkit-mask-image: linear-gradient(115deg, transparent 28%, black 86%); mask-image: linear-gradient(115deg, transparent 28%, black 86%); } .pt-wallet::after { content: ""; position: absolute; z-index: -1; width: 320px; height: 320px; left: -120px; bottom: -200px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 42%, transparent), transparent 66%); } .pt-wallet__top { display: flex; align-items: center; justify-content: space-between; gap: var(--pt-s-3); } .pt-wallet__lbl { display: flex; align-items: center; gap: var(--pt-s-2); font-size: var(--pt-fs-14); font-weight: 600; color: var(--pt-on); } .pt-wallet__chip { position: relative; width: 38px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, color-mix(in srgb, var(--color-on-dark) 55%, transparent), color-mix(in srgb, var(--color-on-dark) 18%, transparent)); } .pt-wallet__chip::before { content: ""; position: absolute; inset: 6px 10px; border: 1px solid color-mix(in srgb, var(--color-primary-deep) 40%, transparent); border-radius: 3px; } .pt-wallet__k { margin-top: var(--pt-s-5); font-size: var(--pt-fs-12); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--pt-on-2); } .pt-wallet__v { margin-top: 6px; font-size: var(--pt-fs-36); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: var(--pt-on); font-variant-numeric: tabular-nums; } .pt-wallet__hint { margin-top: var(--pt-s-2); font-size: var(--pt-fs-13); color: var(--pt-on-2); } .pt-wallet__facts { display: flex; margin-top: var(--pt-s-5); padding-top: var(--pt-s-4); border-top: 1px solid var(--pt-line-d); } .pt-wallet__facts > div { flex: 1; min-width: 0; } .pt-wallet__facts > div + div { padding-left: var(--pt-s-4); border-left: 1px solid var(--pt-line-d); } .pt-wallet__facts span { display: block; font-size: var(--pt-fs-12); color: var(--pt-on-2); } .pt-wallet__facts strong { display: block; margin-top: 4px; font-size: var(--pt-fs-14); font-weight: 600; color: var(--pt-on); font-variant-numeric: tabular-nums; white-space: nowrap; } .pt-wallet__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pt-s-4); margin-top: auto; padding-top: var(--pt-s-6); } .pt-wallet__holder { min-width: 0; } .pt-wallet__holder span { display: block; margin-bottom: 2px; white-space: nowrap; font-size: var(--pt-fs-12); letter-spacing: .14em; text-transform: uppercase; color: var(--pt-on-2); } .pt-wallet__holder strong { display: block; font-size: var(--pt-fs-14); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pt-on); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-wallet__code { display: flex; align-items: center; gap: var(--pt-s-2); min-width: 0; } .pt-wallet__code .pt-btn { flex: 0 0 auto; } .pt-wallet__code strong { min-width: 0; } .pt-wallet__btns { display: flex; gap: var(--pt-s-2); flex-shrink: 0; flex-wrap: wrap; } /* Thẻ hẹp (cột trái của hàng chồng dải): mã CTV + 2–3 nút không đủ chỗ trên một hàng — trước đây nhãn "Mã cộng tác viên" gãy 2 dòng và nút dính vào nhau. Tách thành 2 hàng. */ @container (max-width: 500px) { .pt-wallet__foot { flex-direction: column; align-items: stretch; gap: var(--pt-s-4); } .pt-wallet__btns { width: 100%; } .pt-wallet__btns .pt-btn { flex: 1 1 auto; } .pt-wallet__btns .pt-btn--icon { flex: 0 0 auto; } } /* Key-value */ .pt-kv { display: flex; flex-direction: column; border: 1px solid var(--pt-border); border-radius: var(--pt-r-lg); background: var(--pt-sunken); overflow: hidden; } .pt-kv__row { display: flex; align-items: baseline; gap: var(--pt-s-4); padding: 10px var(--pt-s-4); min-width: 0; } .pt-kv__row + .pt-kv__row { border-top: 1px solid var(--pt-hair); } .pt-kv__k { font-size: var(--pt-fs-13); color: var(--pt-muted); flex: 0 0 auto; min-width: 128px; } .pt-kv__v { margin-left: auto; font-size: var(--pt-fs-14); font-weight: 600; color: var(--pt-ink); text-align: right; min-width: 0; overflow-wrap: anywhere; } .pt-kv--plain { border: 0; background: transparent; } .pt-kv--plain .pt-kv__row { padding-left: 0; padding-right: 0; } /* Bảng tiền: nhãn dài xuống dòng thay vì bẻ đôi con số (điện thoại 390px: "+289,91 / 0₫") */ .pt-kv--money .pt-kv__k { flex: 1 1 auto; min-width: 0; } .pt-kv--money .pt-kv__v { flex: 0 0 auto; white-space: nowrap; overflow-wrap: normal; } /* ─────────────────────────────────────────────────────────────────────────── 7. TIẾN ĐỘ · BẬC HẠNG · BIỂU ĐỒ ─────────────────────────────────────────────────────────────────────────── */ .pt-prog { position: relative; height: 8px; border-radius: var(--pt-r-pill); overflow: hidden; background: color-mix(in srgb, var(--color-primary-deep) 9%, var(--color-soft)); } .pt-prog > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; min-width: 6px; background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, var(--color-on-dark))); } .pt-prog--lg { height: 12px; } .pt-prog--on-dark { background: color-mix(in srgb, var(--color-on-dark) 15%, transparent); } .pt-prog--on-dark > span { box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 60%, transparent); } .pt-prog__cap { display: flex; justify-content: space-between; gap: var(--pt-s-3); margin-top: 8px; font-size: var(--pt-fs-13); color: var(--pt-muted); font-variant-numeric: tabular-nums; } .pt-prog__cap strong { color: var(--pt-ink); font-weight: 600; } .pt-band .pt-prog__cap, .pt-glass .pt-prog__cap { color: var(--pt-on-3); } .pt-band .pt-prog__cap strong, .pt-glass .pt-prog__cap strong { color: var(--pt-on-2); } /* Chấm/đoạn bước */ .pt-segs { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--pt-s-1); } .pt-segs > span { height: 6px; border-radius: var(--pt-r-pill); background: color-mix(in srgb, var(--color-primary-deep) 9%, var(--color-soft)); } .pt-segs > span.is-done { background: var(--color-primary); } .pt-segs > span.is-next { background: repeating-linear-gradient(90deg, var(--color-primary-hover) 0 4px, color-mix(in srgb, var(--color-primary) 28%, transparent) 4px 7px); } .pt-dots { display: flex; gap: 6px; align-items: center; } .pt-dots > span { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--color-primary-deep) 14%, var(--color-soft)); } .pt-dots > span.is-done { background: var(--color-primary); } .pt-dots > span.is-cur { background: var(--pt-brand-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); } /* Vòng tiến độ */ .pt-ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: conic-gradient(var(--pt-brand-strong) calc(var(--p) * 1%), color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)) 0); } .pt-ring > span { width: 50px; height: 50px; border-radius: 50%; background: var(--pt-surface); display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; justify-content: center; gap: 1px; font-size: var(--pt-fs-15); font-weight: 700; color: var(--pt-ink); font-variant-numeric: tabular-nums; } .pt-ring > span small { font-size: var(--pt-fs-12); color: var(--pt-muted); font-weight: 500; } /* Bậc hạng — các đoạn bằng nhau, có nhãn dưới mỗi đoạn */ .pt-ladder { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: var(--pt-s-1); } .pt-ladder__step { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pt-ladder__bar { position: relative; height: 8px; border-radius: var(--pt-r-pill); overflow: hidden; margin-bottom: 8px; background: color-mix(in srgb, var(--color-primary-deep) 9%, var(--color-surface)); } .pt-ladder__bar > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--color-primary); } .pt-ladder__step.is-past .pt-ladder__bar { background: color-mix(in srgb, var(--color-primary) 45%, var(--color-surface)); } .pt-ladder__step.is-cur .pt-ladder__bar { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 45%, transparent); } .pt-ladder__step b { font-size: var(--pt-fs-12); font-weight: 600; color: var(--pt-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Nhãn mốc ("Từ 500k · +1%") dài hơn ô ⇒ xuống dòng, KHÔNG cắt bằng "…" — mốc bị cắt là mất đúng thông tin người ta cần ở bậc hạng. */ .pt-ladder__step small { font-size: var(--pt-fs-12); color: var(--pt-muted); white-space: normal; line-height: 1.3; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .pt-ladder__step.is-cur b { color: var(--pt-brand-deep); } /* Trên nền tối (trong thẻ kính) */ .pt-glass .pt-ladder__bar, .pt-band .pt-ladder__bar { background: color-mix(in srgb, var(--color-on-dark) 14%, transparent); } .pt-glass .pt-ladder__step.is-past .pt-ladder__bar, .pt-band .pt-ladder__step.is-past .pt-ladder__bar { background: color-mix(in srgb, var(--color-primary) 62%, transparent); } .pt-glass .pt-ladder__step b, .pt-band .pt-ladder__step b { color: var(--pt-on-2); } .pt-glass .pt-ladder__step small, .pt-band .pt-ladder__step small { color: var(--pt-on-3); } .pt-glass .pt-ladder__step.is-cur b, .pt-band .pt-ladder__step.is-cur b { color: var(--pt-on); } /* Cột 14 ngày */ .pt-bars { padding: var(--pt-s-3) var(--pt-s-4) var(--pt-s-2); border-radius: var(--pt-r-lg); background: var(--pt-sunken); border: 1px solid var(--pt-hair); } .pt-bars__head { display: flex; justify-content: space-between; gap: var(--pt-s-3); font-size: var(--pt-fs-12); color: var(--pt-muted); } .pt-bars__head strong { color: var(--pt-ink); font-weight: 600; font-variant-numeric: tabular-nums; } .pt-bars__plot { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; height: 64px; padding-top: 16px; margin-top: var(--pt-s-2); } .pt-bars__plot > span { position: relative; display: block; border-radius: 3px 3px 1px 1px; min-height: 3px; background: color-mix(in srgb, var(--color-primary-deep) 10%, transparent); } .pt-bars__plot > span.is-on { background: linear-gradient(180deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, var(--color-surface))); } .pt-bars__plot > span.is-now { box-shadow: 0 0 0 1.5px var(--pt-brand-strong); } .pt-bars__plot > span em { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 3px; font-style: normal; font-size: var(--pt-fs-12); font-weight: 600; color: var(--pt-brand-deep); font-variant-numeric: tabular-nums; } .pt-bars__axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--pt-fs-12); color: var(--pt-faint); font-variant-numeric: tabular-nums; } /* Biểu đồ vùng SVG dựng ở server (ctv_area_chart) — bọc trong .pt-chart */ .pt-chart { padding: var(--pt-s-2) 0 0; } .pt-chart .cg { display: block; width: 100%; height: auto; max-height: 220px; } .pt-chart .cg-grid { stroke: var(--pt-hair); stroke-width: 1; } .pt-chart .cg-xl { fill: var(--pt-muted); font-size: 11px; font-family: var(--pt-font); } /* ─────────────────────────────────────────────────────────────────────────── 8. TAB · SEGMENTED · THANH LỌC ─────────────────────────────────────────────────────────────────────────── */ .pt-tabs { display: flex; gap: var(--pt-s-5); border-bottom: 1px solid var(--pt-border); overflow-x: auto; scrollbar-width: none; } .pt-tabs::-webkit-scrollbar { display: none; } .pt-tabs__t { position: relative; display: inline-flex; align-items: center; gap: var(--pt-s-2); padding: var(--pt-s-3) 2px; font-size: var(--pt-fs-14); font-weight: 600; color: var(--pt-muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0; } .pt-tabs__t:hover { color: var(--pt-ink); } .pt-tabs__t.is-on { color: var(--pt-brand-deep); border-bottom-color: var(--pt-brand-strong); } .pt-tabs__t b { font-weight: 600; font-size: var(--pt-fs-12); min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pt-r-pill); display: inline-grid; place-items: center; background: var(--pt-sunken); color: var(--pt-muted); font-variant-numeric: tabular-nums; } .pt-tabs__t.is-on b { background: var(--pt-wash); color: var(--pt-brand-deep); } .pt-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--pt-r-md); background: var(--pt-sunken); border: 1px solid var(--pt-hair); max-width: 100%; flex-wrap: wrap; } .pt-seg__i { display: inline-flex; align-items: center; gap: 7px; height: var(--pt-h-sm); padding: 0 var(--pt-s-3); border-radius: var(--pt-r-sm); font-size: var(--pt-fs-13); font-weight: 500; color: var(--pt-text); white-space: nowrap; cursor: pointer; border: 0; background: none; } .pt-seg__i:hover { color: var(--pt-ink); background: color-mix(in srgb, var(--color-surface) 70%, transparent); } .pt-seg__i b { font-weight: 600; font-size: var(--pt-fs-12); min-width: 20px; height: 19px; padding: 0 5px; border-radius: var(--pt-r-pill); display: inline-grid; place-items: center; background: color-mix(in srgb, var(--color-primary-deep) 7%, var(--color-surface)); color: var(--pt-muted); font-variant-numeric: tabular-nums; } .pt-seg__i.is-on { background: var(--pt-surface); color: var(--pt-ink); font-weight: 600; box-shadow: var(--pt-sh-1); } .pt-seg__i.is-on b { background: var(--pt-brand-strong); color: var(--pt-on); } .pt-seg__i.is-zero { color: var(--pt-faint); } /* Thanh lọc */ .pt-fbar { display: flex; align-items: center; gap: var(--pt-s-3); flex-wrap: wrap; padding: var(--pt-s-3) var(--pt-s-4); border-bottom: 1px solid var(--pt-border); } .pt-fbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--pt-s-2); flex-wrap: wrap; } .pt-search { position: relative; display: inline-flex; align-items: center; min-width: 220px; } .pt-search > svg { position: absolute; left: 12px; color: var(--pt-muted); pointer-events: none; } .pt-search input { width: 100%; height: var(--pt-h-md); padding: 0 var(--pt-s-3) 0 38px; /* 38px = 12 lề + 20 icon + 6 hở → chữ không bao giờ đè icon */ border-radius: var(--pt-r-md); border: 1px solid var(--pt-border); background: var(--pt-surface); color: var(--pt-ink); font-size: var(--pt-fs-14); } .pt-search input::placeholder { color: var(--pt-faint); } .pt-select { position: relative; display: inline-flex; align-items: center; } .pt-select > svg { position: absolute; pointer-events: none; color: var(--pt-muted); } .pt-select > svg:first-child { left: 11px; } .pt-select > svg:last-child { right: 10px; } .pt-select select { appearance: none; -webkit-appearance: none; height: var(--pt-h-md); padding: 0 32px 0 var(--pt-s-3); border-radius: var(--pt-r-md); border: 1px solid var(--pt-border); background: var(--pt-surface); font-size: var(--pt-fs-14); font-weight: 500; color: var(--pt-ink); cursor: pointer; min-width: 0; max-width: 100%; /* select lấy option dài nhất làm min-content → phải chặn */ text-overflow: ellipsis; } .pt-select--icon select { padding-left: 36px; } .pt-select--block { display: flex; width: 100%; min-width: 0; } .pt-select--block select { width: 100%; } .pt-select select:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--pt-focus); } .pt-daterange { display: inline-flex; align-items: center; gap: 6px; height: var(--pt-h-md); padding: 0 var(--pt-s-3); border-radius: var(--pt-r-md); border: 1px solid var(--pt-border); background: var(--pt-surface); } .pt-daterange input { border: 0; background: none; color: var(--pt-ink); font-size: var(--pt-fs-13); width: 112px; padding: 0; } .pt-daterange input:focus { outline: none; } .pt-daterange span { color: var(--pt-faint); } .pt-reset { position: relative; font-size: var(--pt-fs-13); font-weight: 600; color: var(--pt-brand-strong); padding: 0 6px; background: none; border: 0; cursor: pointer; } .pt-reset:hover { color: var(--pt-brand-deep); } /* ─────────────────────────────────────────────────────────────────────────── 9. BẢNG · DANH SÁCH ĐIỆN THOẠI · PHÂN TRANG · RỖNG ─────────────────────────────────────────────────────────────────────────── */ /* KHÔNG đặt overflow ở đây: `overflow-x:auto` biến khối này thành vùng cuộn, nên `position:sticky` của neo vào vùng cuộn đó — vùng đó không bao giờ cuộn dọc ⇒ đầu bảng dính CHẾT (đo được: cuộn 120px thì th ở -56px). Bảng rộng dùng cột ưu tiên (.pt-p2/.pt-p3) để vừa khung; chỉ bảng CỐ Ý cuộn ngang mới thêm --keep. */ .pt-tablewrap { min-width: 0; } .pt-tablewrap--keep { overflow-x: auto; } /* Bóng cuộn: chỉ hiện khi còn nội dung bị khuất (kỹ thuật local/scroll background) */ .pt-tablewrap--keep { background: linear-gradient(90deg, var(--pt-surface) 40%, transparent) left / 32px 100% no-repeat local, linear-gradient(90deg, transparent, var(--pt-surface) 60%) right / 32px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--color-primary-deep) 22%, transparent), transparent) left / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--color-primary-deep) 22%, transparent), transparent) right / 14px 100% no-repeat scroll; } .pt-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--pt-fs-14); } .pt-table th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: var(--pt-fs-12); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pt-muted); padding: var(--pt-s-3) var(--pt-s-4); background: var(--pt-sunken); border-top: 1px solid var(--pt-hair); border-bottom: 1px solid var(--pt-border); white-space: nowrap; } /* Trong khung portal, đầu bảng dính NGAY DƯỚI thanh trên (thanh trên đặc khi cuộn) */ .pt-shell .pt-table th { top: var(--pt-top-h); } .pt-table td { padding: var(--pt-s-3) var(--pt-s-4); border-bottom: 1px solid var(--pt-hair); vertical-align: middle; color: var(--pt-text); } .pt-table tbody tr:last-child td { border-bottom: 0; } .pt-table tbody tr:hover td { background: color-mix(in srgb, var(--color-primary) 3.5%, var(--color-surface)); } .pt-table th:first-child, .pt-table td:first-child { padding-left: var(--pt-s-6); } .pt-table th:last-child, .pt-table td:last-child { padding-right: var(--pt-s-6); } .pt-table .pt-t-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .pt-t-strong { font-weight: 700; color: var(--pt-ink); } .pt-t-sub { margin-top: 3px; font-size: var(--pt-fs-13); color: var(--pt-muted); } .pt-t-clip { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-t-none { color: var(--pt-faint); } .pt-t-actions { display: flex; justify-content: flex-end; gap: 6px; } .pt-table--fixed { table-layout: fixed; } /* Cột ưu tiên: p3 rụng trước (≤1280), rồi p2 (≤1100) — xem SYSTEM.md */ .pt-foot { display: flex; align-items: center; gap: var(--pt-s-3); flex-wrap: wrap; padding: var(--pt-s-3) var(--pt-s-6); border-top: 1px solid var(--pt-border); background: var(--pt-sunken); font-size: var(--pt-fs-13); color: var(--pt-muted); border-radius: 0 0 var(--pt-r-xl) var(--pt-r-xl); } /* Danh sách 2 dòng cho điện thoại */ .pt-list { display: none; list-style: none; margin: 0; padding: 0; } .pt-list__row > a, .pt-list__row > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px var(--pt-s-3); padding: var(--pt-s-3) var(--pt-s-4); border-bottom: 1px solid var(--pt-hair); align-items: center; } .pt-list__row:last-child > a, .pt-list__row:last-child > div { border-bottom: 0; } .pt-list__t { font-weight: 700; font-size: var(--pt-fs-14); color: var(--pt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-list__amt { font-weight: 700; font-size: var(--pt-fs-14); color: var(--pt-ink); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .pt-list__meta { font-size: var(--pt-fs-13); color: var(--pt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-list__st { justify-self: end; } /* Phân trang */ .pt-pager { margin-left: auto; display: flex; gap: 6px; align-items: center; } .pt-pager__b { min-width: 34px; height: 34px; padding: 0 10px; border-radius: var(--pt-r-sm); display: inline-grid; place-items: center; font-size: var(--pt-fs-13); font-weight: 600; border: 1px solid var(--pt-border); background: var(--pt-surface); color: var(--pt-text); font-variant-numeric: tabular-nums; } .pt-pager__b:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); color: var(--pt-ink); } .pt-pager__b.is-on { background: var(--pt-brand-strong); border-color: var(--pt-brand-strong); color: var(--pt-on); } .pt-pager__b.is-off { color: var(--pt-faint); background: transparent; pointer-events: none; } .pt-pager__gap { color: var(--pt-faint); padding: 0 2px; } /* Trạng thái rỗng */ .pt-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--pt-s-8) var(--pt-s-6); color: var(--pt-muted); } .pt-empty__ic { width: 56px; height: 56px; border-radius: var(--pt-r-lg); display: grid; place-items: center; margin-bottom: var(--pt-s-3); color: var(--pt-brand-strong); background: linear-gradient(145deg, var(--pt-tint), var(--pt-wash)); } .pt-empty__t { font-size: var(--pt-fs-16); font-weight: 700; color: var(--pt-ink); margin-bottom: 4px; } .pt-empty p { margin: 0 0 var(--pt-s-4); max-width: 42ch; font-size: var(--pt-fs-14); } .pt-empty p:last-child { margin-bottom: 0; } .pt-empty__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--pt-s-3); } .pt-empty--table { padding: var(--pt-s-7) var(--pt-s-5); } .pt-table td.pt-empty-cell { padding: 0; background: var(--pt-surface); } .pt-table tbody tr:hover td.pt-empty-cell { background: var(--pt-surface); } /* ─────────────────────────────────────────────────────────────────────────── 10. CALLOUT · ALERT · TOAST ─────────────────────────────────────────────────────────────────────────── */ .pt-callout { display: flex; gap: var(--pt-s-3); padding: var(--pt-s-4); border-radius: var(--pt-r-lg); border: 1px solid var(--pt-border); background: var(--pt-sunken); font-size: var(--pt-fs-14); color: var(--pt-text); line-height: 1.55; } .pt-callout > svg { flex-shrink: 0; margin-top: 1px; color: var(--pt-muted); } .pt-callout strong { color: var(--pt-ink); } .pt-callout--info { background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-accent) 26%, var(--color-border)); } .pt-callout--info > svg { color: var(--pt-accent-deep); } .pt-callout--success { background: color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-secondary) 26%, var(--color-border)); } .pt-callout--success > svg { color: var(--pt-ok-deep); } .pt-callout--warning { background: color-mix(in srgb, var(--color-warning) 9%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-warning) 32%, var(--color-border)); } .pt-callout--warning > svg { color: var(--pt-warn-deep); } .pt-callout--brand { background: var(--pt-tint); border-color: color-mix(in srgb, var(--color-primary) 26%, var(--color-border)); } .pt-callout--brand > svg { color: var(--pt-brand-strong); } .pt-callout__body { min-width: 0; flex: 1; } .pt-callout__act { margin-top: var(--pt-s-3); display: flex; gap: var(--pt-s-2); flex-wrap: wrap; } .pt-alert { display: flex; align-items: flex-start; gap: var(--pt-s-3); padding: var(--pt-s-3) var(--pt-s-4); border-radius: var(--pt-r-md); font-size: var(--pt-fs-14); font-weight: 500; margin-bottom: var(--pt-s-4); border: 1px solid transparent; } .pt-alert--success { background: var(--pill-success-bg); color: var(--pill-success-fg); border-color: color-mix(in srgb, var(--color-secondary) 28%, transparent); } .pt-alert--warning { background: var(--pill-warning-bg); color: var(--pill-warning-fg); border-color: color-mix(in srgb, var(--color-warning) 32%, transparent); } .pt-alert--danger { background: var(--pill-danger-bg); color: var(--pill-danger-fg); border-color: color-mix(in srgb, var(--color-warning) 38%, transparent); } .pt-alert--info { background: var(--color-accent-soft); color: var(--pt-accent-deep); border-color: color-mix(in srgb, var(--color-accent) 28%, transparent); } .pt-alert__x { position: relative; margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; opacity: .65; padding: 0; } .pt-alert__x:hover { opacity: 1; } .pt-toasts { position: fixed; right: var(--pt-s-5); bottom: var(--pt-s-5); z-index: var(--pt-z-toast); display: flex; flex-direction: column; gap: var(--pt-s-2); pointer-events: none; max-width: min(380px, calc(100vw - 32px)); } .pt-toast { display: flex; align-items: center; gap: var(--pt-s-3); padding: var(--pt-s-3) var(--pt-s-4); border-radius: var(--pt-r-md); background: var(--color-snackbar); color: var(--color-on-dark); font-size: var(--pt-fs-14); font-weight: 500; box-shadow: var(--pt-sh-3); pointer-events: auto; animation: pt-toast-in 220ms var(--pt-ease); } .pt-toast--success { background: var(--pt-ok-deep); } .pt-toast--warning { background: var(--pt-warn-deep); } .pt-toast svg { color: currentColor; } .pt-toast.is-out { opacity: 0; transform: translateY(6px); transition: opacity 180ms var(--pt-ease), transform 180ms var(--pt-ease); } @keyframes pt-toast-in { from { opacity: 0; transform: translateY(8px); } } /* ─────────────────────────────────────────────────────────────────────────── 11. BIỂU MẪU ─────────────────────────────────────────────────────────────────────────── */ .pt-field { min-width: 0; margin-bottom: var(--pt-s-4); } .pt-field:last-child { margin-bottom: 0; } .pt-label { display: flex; align-items: baseline; gap: 6px; font-size: var(--pt-fs-14); font-weight: 600; color: var(--pt-ink); margin-bottom: 6px; } .pt-req { color: var(--pt-warn-deep); font-style: normal; } .pt-label__count { margin-left: auto; font-size: var(--pt-fs-12); font-weight: 500; color: var(--pt-muted); font-variant-numeric: tabular-nums; } .pt-hint { display: block; margin-top: 5px; font-size: var(--pt-fs-13); color: var(--pt-muted); } .pt-err { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: var(--pt-fs-13); font-weight: 500; color: var(--pt-warn-deep); } .pt-input, .pt-textarea, .pt-field select { width: 100%; min-width: 0; height: var(--pt-h-md); padding: 0 var(--pt-s-3); border-radius: var(--pt-r-md); border: 1px solid var(--pt-border); background: var(--pt-surface); color: var(--pt-ink); font-size: var(--pt-fs-14); } .pt-textarea { height: auto; min-height: 84px; padding: 10px var(--pt-s-3); resize: vertical; line-height: 1.55; } .pt-input:focus, .pt-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--pt-focus); } .pt-input::placeholder, .pt-textarea::placeholder { color: var(--pt-faint); } .pt-input[disabled], .pt-textarea[disabled] { background: var(--pt-sunken); color: var(--pt-muted); cursor: not-allowed; } .pt-field.is-invalid .pt-input, .pt-field.is-invalid .pt-textarea { border-color: var(--color-warning); } .pt-input--num { font-variant-numeric: tabular-nums; } /* Checkbox / radio / switch */ .pt-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--pt-fs-14); color: var(--pt-text); cursor: pointer; } .pt-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--pt-brand-strong); flex-shrink: 0; cursor: pointer; } .pt-check strong { display: block; color: var(--pt-ink); font-weight: 600; } .pt-check small { display: block; color: var(--pt-muted); font-size: var(--pt-fs-13); } .pt-choice { display: grid; gap: var(--pt-s-2); } .pt-choice__i { display: flex; align-items: flex-start; gap: 10px; padding: var(--pt-s-3) var(--pt-s-4); border: 1px solid var(--pt-border); border-radius: var(--pt-r-md); background: var(--pt-surface); cursor: pointer; transition: border-color var(--pt-dur) var(--pt-ease), background var(--pt-dur) var(--pt-ease); } .pt-choice__i:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); } .pt-choice__i input { margin: 0; accent-color: var(--pt-brand-strong); flex-shrink: 0; } .pt-choice__i input[type="radio"], .pt-choice__i input[type="checkbox"] { width: 20px; height: 20px; } .pt-choice__i:has(input:checked) { border-color: var(--color-primary); background: var(--pt-tint); box-shadow: 0 0 0 1px var(--color-primary) inset; } .pt-choice__t { display: block; font-size: var(--pt-fs-14); font-weight: 600; color: var(--pt-ink); } .pt-choice__d { display: block; font-size: var(--pt-fs-13); color: var(--pt-muted); margin-top: 2px; line-height: 1.45; } .pt-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--pt-fs-14); color: var(--pt-text); } .pt-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .pt-switch__t { position: relative; width: 42px; height: 24px; border-radius: var(--pt-r-pill); flex-shrink: 0; background: color-mix(in srgb, var(--color-locked) 45%, var(--color-soft)); transition: background var(--pt-dur) var(--pt-ease); } .pt-switch__t::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--pt-surface); box-shadow: var(--pt-sh-1); transition: transform var(--pt-dur) var(--pt-ease); } .pt-switch input:checked + .pt-switch__t { background: var(--pt-brand-strong); } .pt-switch input:checked + .pt-switch__t::after { transform: translateX(18px); } .pt-switch input:focus-visible + .pt-switch__t { box-shadow: var(--pt-focus); } /* Mật khẩu có nút hiện/ẩn */ .pt-pass { position: relative; display: flex; align-items: center; } .pt-pass .pt-input { padding-right: 46px; } .pt-pass__t { position: absolute; right: 6px; width: 32px; height: 32px; border-radius: var(--pt-r-sm); display: grid; place-items: center; border: 0; background: none; color: var(--pt-muted); cursor: pointer; } .pt-pass__t:hover { background: var(--pt-sunken); color: var(--pt-ink); } /* Ô nhập mã OTP — KHÔNG dùng font mono, giãn chữ thay thế */ .pt-otp { display: flex; gap: var(--pt-s-2); } .pt-otp input { width: 48px; height: 56px; text-align: center; border-radius: var(--pt-r-md); border: 1px solid var(--pt-border); background: var(--pt-surface); color: var(--pt-ink); font-size: var(--pt-fs-24); font-weight: 700; font-variant-numeric: tabular-nums; padding: 0; } .pt-otp input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--pt-focus); } .pt-otp--single input { width: 100%; height: 56px; letter-spacing: .5em; text-indent: .5em; } /* Trường sao chép */ .pt-copy { display: flex; align-items: stretch; gap: var(--pt-s-2); } .pt-copy__v { flex: 1; min-width: 0; display: flex; align-items: center; height: var(--pt-h-md); padding: 0 var(--pt-s-3); border-radius: var(--pt-r-md); border: 1px solid var(--pt-border); background: var(--pt-sunken); color: var(--pt-ink); font-size: var(--pt-fs-14); font-weight: 500; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-copy__v--code { font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .pt-copy .pt-btn.is-copied { background: var(--pill-success-bg); color: var(--pill-success-fg); border-color: transparent; } /* Kéo thả tệp */ .pt-drop { display: flex; flex-direction: column; align-items: center; gap: var(--pt-s-2); text-align: center; padding: var(--pt-s-6); border-radius: var(--pt-r-lg); background: var(--pt-sunken); border: 1px dashed color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); color: var(--pt-muted); font-size: var(--pt-fs-14); cursor: pointer; } .pt-drop:hover, .pt-drop.is-over { background: var(--pt-tint); border-style: solid; color: var(--pt-text); } /* Input file bị co còn 1×1 (.pt-sr) nên vòng focus của nó vô hình — chuyển lên vùng thả */ .pt-drop:focus-within { border-style: solid; outline: 2px solid var(--pt-brand-strong); outline-offset: 2px; } .pt-drop strong { color: var(--pt-ink); font-weight: 600; } /* ─────────────────────────────────────────────────────────────────────────── 12. LỚP NỔI: DIALOG/DRAWER/SHEET · DROPDOWN · TOOLTIP ─────────────────────────────────────────────────────────────────────────── */ dialog.pt-dialog { padding: 0; border: 0; background: var(--pt-surface); color: var(--pt-text); border-radius: var(--pt-r-2xl); box-shadow: var(--pt-sh-3); z-index: var(--pt-z-drawer); width: min(560px, calc(100vw - 32px)); max-width: 100%; max-height: min(88dvh, 860px); } dialog.pt-dialog::backdrop { background: color-mix(in srgb, var(--pt-night) 66%, transparent); } dialog.pt-dialog[open] { display: flex; flex-direction: column; } /* Ngăn kéo: phải màn hình trên máy tính, tấm trượt đáy trên điện thoại */ dialog.pt-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(480px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; } .pt-dialog__form, .pt-dialog__inner { display: flex; flex-direction: column; min-height: 0; flex: 1; } .pt-dialog__head { position: relative; isolation: isolate; overflow: hidden; flex-shrink: 0; padding: var(--pt-s-5) 68px var(--pt-s-5) var(--pt-s-6); background: var(--pt-card-grad); color: var(--pt-on); } .pt-dialog__head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(color-mix(in srgb, var(--color-on-dark) 14%, transparent) 1px, transparent 1.4px) 0 0 / 12px 12px; -webkit-mask-image: linear-gradient(110deg, transparent 38%, black); mask-image: linear-gradient(110deg, transparent 38%, black); } .pt-dialog__head h2 { margin: 0; color: var(--pt-on); font-size: var(--pt-fs-18); font-weight: 700; } .pt-dialog__head p { margin: 6px 0 0; font-size: var(--pt-fs-14); color: var(--pt-on-2); max-width: 46ch; } .pt-dialog__x { position: absolute; top: 14px; right: 14px; } .pt-dialog__steps { display: flex; gap: var(--pt-s-4); margin-top: var(--pt-s-3); font-size: var(--pt-fs-13); color: var(--pt-on-2); flex-wrap: wrap; } .pt-dialog__steps span { display: inline-flex; align-items: center; gap: 6px; } .pt-dialog__steps i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--pt-glass-2); color: var(--pt-on); font-size: var(--pt-fs-12); font-weight: 700; } .pt-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--pt-s-5) var(--pt-s-6); } .pt-dialog__foot { flex-shrink: 0; display: flex; gap: var(--pt-s-2); align-items: center; justify-content: flex-end; padding: var(--pt-s-4) var(--pt-s-6) calc(var(--pt-s-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pt-border); background: var(--pt-surface); } .pt-dialog__foot--stack { flex-direction: column; align-items: stretch; } .pt-dialog__foot--stack .pt-btn { width: 100%; } .pt-dialog__foot small { font-size: var(--pt-fs-13); color: var(--pt-muted); text-align: center; } /* Hộp xác nhận */ dialog.pt-confirm { width: min(420px, calc(100vw - 32px)); } .pt-confirm__body { padding: var(--pt-s-6) var(--pt-s-6) var(--pt-s-4); display: flex; gap: var(--pt-s-4); } .pt-confirm__t { font-size: var(--pt-fs-16); font-weight: 700; color: var(--pt-ink); } .pt-confirm__d { margin-top: 4px; font-size: var(--pt-fs-14); color: var(--pt-muted); line-height: 1.55; } /* Menu thả xuống (bell, tài khoản, hành động dòng) */ .pt-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: var(--pt-z-dropdown); min-width: 260px; padding: 6px; border-radius: var(--pt-r-lg); background: var(--pt-surface); color: var(--pt-text); border: 1px solid var(--pt-border); box-shadow: var(--pt-sh-3); } .pt-pop[hidden] { display: none !important; } .pt-pop--left { right: auto; left: 0; } .pt-pop--wide { min-width: 340px; } .pt-pop__head { padding: 10px 10px 12px; border-bottom: 1px solid var(--pt-hair); margin-bottom: 6px; } .pt-pop__head strong { display: block; font-size: var(--pt-fs-14); color: var(--pt-ink); } .pt-pop__head span { font-size: var(--pt-fs-13); color: var(--pt-muted); } .pt-pop__title { display: flex; align-items: center; gap: var(--pt-s-2); padding: 8px 10px; font-size: var(--pt-fs-13); font-weight: 600; color: var(--pt-muted); } .pt-pop__title a { margin-left: auto; font-weight: 600; color: var(--pt-brand-strong); } .pt-pop__i { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--pt-r-sm); font-size: var(--pt-fs-14); color: var(--pt-text); width: 100%; border: 0; background: none; cursor: pointer; text-align: left; } .pt-pop__i svg { color: var(--pt-muted); } .pt-pop__i:hover { background: var(--pt-tint); color: var(--pt-ink); } .pt-pop__i--danger { color: var(--pt-warn-deep); } .pt-pop__i--danger svg { color: var(--color-warning); } .pt-pop__sep { height: 1px; background: var(--pt-hair); margin: 6px 4px; } .pt-pop__empty { padding: var(--pt-s-5) var(--pt-s-4); text-align: center; font-size: var(--pt-fs-13); color: var(--pt-muted); } .pt-pop__list { max-height: 340px; overflow-y: auto; } /* Tooltip + disclosure */ .pt-tip { position: relative; display: inline-flex; } .pt-tip__b { position: relative; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; border: 0; padding: 0; background: var(--pt-sunken); color: var(--pt-muted); font-size: var(--pt-fs-12); font-weight: 700; cursor: help; } .pt-tip__c { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 180px; max-width: 260px; padding: 8px 10px; border-radius: var(--pt-r-sm); background: var(--color-snackbar); color: var(--color-on-dark); font-size: var(--pt-fs-13); font-weight: 400; line-height: 1.45; box-shadow: var(--pt-sh-2); opacity: 0; visibility: hidden; transition: opacity var(--pt-dur) var(--pt-ease); z-index: var(--pt-z-dropdown); } .pt-tip:hover .pt-tip__c, .pt-tip:focus-within .pt-tip__c { opacity: 1; visibility: visible; } .pt-disc { border-top: 1px solid var(--pt-hair); } .pt-disc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--pt-s-2); padding: var(--pt-s-3) 0; font-size: var(--pt-fs-14); font-weight: 600; color: var(--pt-brand-strong); } .pt-disc > summary::-webkit-details-marker { display: none; } .pt-disc > summary svg { transition: transform var(--pt-dur) var(--pt-ease); } .pt-disc[open] > summary svg { transform: rotate(180deg); } .pt-disc__body { padding-bottom: var(--pt-s-3); font-size: var(--pt-fs-14); color: var(--pt-text); line-height: 1.6; } /* ─────────────────────────────────────────────────────────────────────────── 13. AVATAR · TIMELINE · NOTIFICATION · SKELETON ─────────────────────────────────────────────────────────────────────────── */ .pt-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: inline-grid; place-items: center; font-weight: 700; font-size: var(--pt-fs-14); color: var(--color-on-dark); background: linear-gradient(145deg, var(--color-primary), var(--color-accent-hover)); } .pt-avatar--sm { width: 30px; height: 30px; font-size: var(--pt-fs-13); } .pt-avatar--lg { width: 48px; height: 48px; font-size: var(--pt-fs-18); border-radius: var(--pt-r-lg); } .pt-avatar--xl { width: 80px; height: 80px; font-size: var(--pt-fs-30); } .pt-avatar--img { background: var(--pt-sunken); overflow: hidden; } .pt-avatar--img img { display: block; width: 100%; height: 100%; object-fit: cover; } .pt-timeline { list-style: none; margin: 0; padding: 0; } .pt-timeline__i { position: relative; display: flex; gap: var(--pt-s-3); padding: 0 0 var(--pt-s-4) var(--pt-s-6); } .pt-timeline__i::before { content: ""; position: absolute; left: 7px; top: 20px; bottom: -2px; width: 2px; background: var(--pt-border); } .pt-timeline__i:last-child { padding-bottom: 0; } .pt-timeline__i:last-child::before { display: none; } .pt-timeline__dot { position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--pt-surface); border: 2px solid color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); } .pt-timeline__i.is-done .pt-timeline__dot { background: var(--color-primary); border-color: var(--color-primary); } .pt-timeline__i.is-warn .pt-timeline__dot { background: var(--color-warning); border-color: var(--color-warning); } .pt-timeline__b { min-width: 0; flex: 1; } .pt-timeline__t { font-size: var(--pt-fs-14); font-weight: 600; color: var(--pt-ink); } .pt-timeline__m { font-size: var(--pt-fs-13); color: var(--pt-muted); margin-top: 2px; } .pt-notif { display: flex; gap: var(--pt-s-3); padding: var(--pt-s-3) var(--pt-s-4); border-radius: var(--pt-r-md); } .pt-notif + .pt-notif { border-top: 1px solid var(--pt-hair); border-radius: 0; } .pt-notif:hover { background: var(--pt-tint); } .pt-notif.is-unread { background: color-mix(in srgb, var(--pt-tint) 55%, transparent); } .pt-notif__b { min-width: 0; flex: 1; } .pt-notif__t { font-size: var(--pt-fs-14); font-weight: 600; color: var(--pt-ink); } .pt-notif__d { font-size: var(--pt-fs-14); color: var(--pt-text); margin-top: 4px; line-height: 1.5; } .pt-notif__m { font-size: var(--pt-fs-13); color: var(--pt-muted); margin-top: 6px; } .pt-notif__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; margin-top: 7px; } .pt-skel { border-radius: var(--pt-r-sm); background: linear-gradient(90deg, var(--pt-sunken) 25%, var(--pt-tint) 37%, var(--pt-sunken) 63%); background-size: 400% 100%; animation: pt-skel 1.3s ease infinite; height: 14px; } .pt-skel--line { height: 14px; margin-bottom: 8px; } .pt-skel--title { height: 22px; width: 42%; margin-bottom: 12px; } .pt-skel--block { height: 92px; border-radius: var(--pt-r-lg); } @keyframes pt-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ─────────────────────────────────────────────────────────────────────────── 14. BỐ CỤC TIỆN ÍCH ─────────────────────────────────────────────────────────────────────────── */ .pt-stack { display: flex; flex-direction: column; gap: var(--pt-s-5); } .pt-stack--sm { gap: var(--pt-s-3); } .pt-stack--lg { gap: var(--pt-s-7); } .pt-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pt-s-2); } .pt-cluster--between { justify-content: space-between; } .pt-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pt-s-6); } .pt-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pt-s-6); } /* Lưới lệch — không bao giờ 3 cột bằng nhau */ .pt-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--pt-s-6); align-items: start; } .pt-split--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } .pt-split--wide{ grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); } .pt-row-lift { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--pt-s-6); align-items: stretch; } .pt-gap-top { margin-top: var(--pt-s-5); } /* Thuộc tính hidden luôn thắng — .pt-alert{display:flex} từng làm hộp rỗng hiện ra dù đã hidden */ [hidden] { display: none !important; } /* Ô nhập đặt cạnh nhau trong lưới: khoảng cách do lưới lo (row-gap + đáy lưới), không do margin của ô — trước đây ô cuối mỗi hàng mất margin nên hàng sau dính sát, và dialog còn ép row-gap về 0. */ .pt-grid-2 > .pt-field, .pt-grid-3 > .pt-field { margin-bottom: 0; } .pt-grid-2:has(> .pt-field), .pt-grid-3:has(> .pt-field) { row-gap: var(--pt-s-4); margin-bottom: var(--pt-s-4); } .pt-grid-2:has(> .pt-field):last-child, .pt-grid-3:has(> .pt-field):last-child { margin-bottom: 0; } /* Nhãn chỉ số có định nghĩa (ctv_m_label() ở includes/ctv_metrics.php) — rê chuột xem cách tính */ .m-def { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); } /* Nhịp cấp trang: các khối con trực tiếp của vùng nội dung luôn cách nhau --pt-flow. Trước đây trang tự lo khoảng cách nên nhiều trang để thẻ dính sát nhau (0px). Bọc trọn trong :where() ⇒ độ ưu tiên 0: mọi margin trang tự đặt (kể cả .pt-overlap âm) vẫn thắng. Bỏ qua phần tử vô hình đứng đầu (script, input ẩn…) để khối đầu tiên không bị đẩy xuống. */ :where(.pt-page > :not(script, style, template, link, meta, input, dialog, [hidden]) ~ :not(script, style, template, link, meta, input, dialog)) { margin-top: var(--pt-flow); } /* Tiêu đề khu và thanh tab ôm lấy khối ngay dưới nó */ :where(.pt-page > .pt-sec + *) { margin-top: 0; } :where(.pt-page > .pt-tabs + *, .pt-page > .pt-seg + *, .pt-page > .pt-filter + *) { margin-top: var(--pt-s-5); } /* ─────────────────────────────────────────────────────────────────────────── 15. ĐIỂM GÃY ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 1280px) { .pt-table .pt-p3 { display: none; } } @media (max-width: 1180px) { .pt-band__hero { grid-template-columns: minmax(0, 1fr); gap: var(--pt-s-5); } .pt-split, .pt-split--rev, .pt-split--wide, .pt-row-lift, .pt-grid-3 { grid-template-columns: minmax(0, 1fr); } .pt-table .pt-p2 { display: none; } } @media (max-width: 1024px) { :root { --pt-gutter: 24px; } .pt-shell { grid-template-columns: minmax(0, 1fr); } /* visibility (không chỉ transform): translateX(-100%) chỉ giấu bằng mắt — 17 link vẫn nhận Tab. Ở ≤768px nút mở còn bị ẩn nên chúng là bẫy tiêu điểm vĩnh viễn. Trễ visibility đúng 1 nhịp để hoạt ảnh trượt vẫn thấy được. */ .pt-side { position: fixed; left: 0; top: 0; bottom: 0; width: 288px; height: 100dvh; transform: translateX(-100%); z-index: calc(var(--pt-z-scrim) + 1); visibility: hidden; transition: transform var(--pt-dur) var(--pt-ease), visibility 0s linear var(--pt-dur); } .pt-side.is-open { transform: none; visibility: visible; transition-delay: 0s; } .pt-top__burger { display: inline-grid; } .pt-grid-2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 768px) { :root { --pt-gutter: 16px; --pt-top-h: 58px; --pt-flow: var(--pt-s-6); } .pt-band__chips { margin-top: var(--pt-s-4); } .pt-band__hero .pt-band__actions { margin-top: var(--pt-s-5); } .pt-main--hero { --pt-band-pb: 96px; --pt-overlap: 62px; } .pt-main--standard{ --pt-band-pb: 84px; --pt-overlap: 56px; } .pt-main--compact { --pt-band-pb: 64px; --pt-overlap: 38px; } /* Dải tự đặt --pt-band-pb trên chính nó nên phải hạ ở cả đây — nếu không đệm đáy giữ 128px trong khi thẻ chỉ chồng 62px ⇒ khoảng trống ~66px giữa dải và thẻ đầu trên điện thoại. */ .pt-band--hero { --pt-band-pb: 96px; } .pt-band--standard{ --pt-band-pb: 84px; } .pt-band--compact { --pt-band-pb: 64px; } .pt-band { padding-top: calc(var(--pt-top-h) + var(--pt-s-4)); } .pt-band__figure { font-size: var(--pt-fs-30); } .pt-band__title { font-size: var(--pt-fs-20); } .pt-band__hero { gap: var(--pt-s-4); } .pt-glass { padding: var(--pt-s-4); } .pt-page { padding-bottom: calc(var(--pt-bnav-h) + var(--pt-s-6) + env(safe-area-inset-bottom, 0px)); } .pt-top__burger { display: none; } .pt-top__title span { display: none; } /* giữ TIÊU ĐỀ, bỏ dòng phụ — bar hẹp thì tiêu đề mới không bị cắt */ .pt-acct__who { display: none; } .pt-acct__btn { padding: 0 4px; } .pt-card__head, .pt-card__body { padding-left: var(--pt-s-4); padding-right: var(--pt-s-4); } .pt-card__foot { padding-left: var(--pt-s-4); padding-right: var(--pt-s-4); } .pt-card--pad { padding: var(--pt-s-4); } .pt-wallet { padding: var(--pt-s-4); } .pt-wallet__v { font-size: var(--pt-fs-30); } .pt-wallet__foot { flex-direction: column; align-items: stretch; gap: var(--pt-s-3); } .pt-wallet__btns { width: 100%; } .pt-wallet__btns .pt-btn { flex: 1 1 auto; } .pt-wallet__btns .pt-btn--icon { flex: 0 0 auto; } /* Dải số liệu và metric xuống 2 cột, đường tóc đổi chiều */ .pt-strip, .pt-metrics { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; } .pt-strip__cell + .pt-strip__cell, .pt-metric + .pt-metric { border-left: 0; } .pt-strip__cell:nth-child(even), .pt-metric:nth-child(even) { border-left: 1px solid var(--pt-hair); } .pt-strip__cell:nth-child(n + 3), .pt-metric:nth-child(n + 3) { border-top: 1px solid var(--pt-hair); } .pt-strip__cell--lead { grid-column: 1 / -1; } .pt-strip__k, .pt-metric__k { white-space: normal; } /* Ô lẻ cuối trải cả hàng — không để một ô mồ côi nửa hàng */ .pt-strip:not(:has(> .pt-strip__cell--lead)) > .pt-strip__cell:last-child:nth-child(odd), .pt-metrics > .pt-metric:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; } /* Có ô dẫn đầu trải hàng đầu ⇒ chẵn/lẻ của các ô sau đảo cột: ô chẵn nằm cột trái. Độ ưu tiên thấp (:where) để trang tự dựng lưới riêng cho dải (vd 3 cột) vẫn thắng. */ :where(.pt-strip:has(> .pt-strip__cell--lead:first-child)) > .pt-strip__cell:nth-child(even) { border-left: 0; } :where(.pt-strip:has(> .pt-strip__cell--lead:first-child)) > .pt-strip__cell:nth-child(odd):not(:first-child) { border-left: 1px solid var(--pt-hair); } :where(.pt-strip:has(> .pt-strip__cell--lead:first-child)) > .pt-strip__cell:nth-child(n + 2) { border-top: 1px solid var(--pt-hair); } :where(.pt-strip:has(> .pt-strip__cell--lead:first-child) > .pt-strip__cell:last-child:nth-child(even)) { grid-column: 1 / -1; } .pt-sec { flex-wrap: wrap; row-gap: var(--pt-s-2); } .pt-strip__v { font-size: var(--pt-fs-18); } .pt-metric__v { font-size: var(--pt-fs-20); } .pt-metric__v--money { font-size: var(--pt-fs-18); } /* Chip trạng thái XUỐNG DÒNG, không cuộn ngang giấu bớt */ .pt-seg { display: flex; flex-wrap: wrap; width: 100%; } .pt-seg__i { flex: 1 1 auto; justify-content: center; } .pt-fbar { padding: var(--pt-s-3); gap: var(--pt-s-2); } .pt-fbar__right { margin-left: 0; width: 100%; } /* Mỗi điều khiển lọc chiếm trọn một dòng — nhồi chung một dòng thì select bị bóp còn 46px */ .pt-fbar__right { flex-wrap: wrap; } .pt-fbar > .pt-search, .pt-fbar__right > .pt-search, .pt-fbar__right > .pt-select, .pt-fbar__right > .pt-daterange { flex: 1 1 100%; width: 100%; min-width: 0; } .pt-select select, .pt-daterange input { width: 100%; min-width: 0; } .pt-daterange { justify-content: space-between; } /* Bảng → danh sách 2 dòng */ .pt-tablewrap { display: none; } .pt-list { display: block; } .pt-tablewrap--keep { display: block; } .pt-tablewrap--keep + .pt-list { display: none; } .pt-foot { padding: var(--pt-s-3) var(--pt-s-4); } .pt-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pt-s-2) var(--pt-s-3); } .pt-kv__k { min-width: 96px; } .pt-otp input { width: 44px; height: 52px; font-size: var(--pt-fs-20); } .pt-toasts { left: var(--pt-s-4); right: var(--pt-s-4); bottom: calc(var(--pt-bnav-h) + var(--pt-s-3) + env(safe-area-inset-bottom, 0px)); max-width: none; } /* Ngăn kéo thành tấm trượt đáy — luôn nằm TRÊN nav đáy (dialog ở top layer) */ dialog.pt-drawer, dialog.pt-dialog { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; height: auto; max-height: 92dvh; border-radius: var(--pt-r-2xl) var(--pt-r-2xl) 0 0; margin: 0; } .pt-dialog__head { padding: var(--pt-s-4) 60px var(--pt-s-4) var(--pt-s-4); } .pt-dialog__body { padding: var(--pt-s-4); } .pt-dialog__foot { padding: var(--pt-s-3) var(--pt-s-4) calc(var(--pt-s-3) + env(safe-area-inset-bottom, 0px)); align-items: stretch; } /* Nút chính lên trên (trong tầm ngón cái) — trừ khuôn --stack vốn đã xếp sẵn đúng thứ tự */ .pt-dialog__foot:not(.pt-dialog__foot--stack) { flex-direction: column-reverse; } .pt-dialog__foot .pt-btn { width: 100%; } /* Nav đáy */ .pt-bnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--pt-z-bnav); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--pt-surface); border-top: 1px solid var(--pt-border); box-shadow: 0 -10px 30px -14px color-mix(in srgb, var(--color-primary-deep) 30%, transparent); } .pt-bnav__i { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; border: 0; background: none; border-radius: var(--pt-r-md); cursor: pointer; font-size: var(--pt-fs-12); font-weight: 500; color: var(--pt-muted); } .pt-bnav__ic { position: relative; width: 48px; height: 26px; border-radius: var(--pt-r-pill); display: grid; place-items: center; } .pt-bnav__i.is-active { color: var(--pt-brand-deep); font-weight: 600; } .pt-bnav__i.is-active .pt-bnav__ic { background: var(--pt-wash); } .pt-bnav__i.is-active svg { color: var(--pt-brand-strong); } } @media (max-width: 420px) { .pt-band__figure { font-size: var(--pt-fs-24); } .pt-wallet__v { font-size: var(--pt-fs-24); } .pt-otp input { width: 100%; height: 48px; font-size: var(--pt-fs-18); } .pt-btn { padding: 0 var(--pt-s-4); } } /* ─────────────────────────────────────────────────────────────────────────── 16. KHUNG BỔ SUNG (gộp từ shell-extra.css — phải đứng SAU phần 15) ─────────────────────────────────────────────────────────────────────────── */ /* Nút mở ngăn kéo: .pt-icbtn{display:inline-grid} đứng SAU .pt-top__burger{display:none} ở cùng độ đặc hiệu ⇒ nút hiện ở mọi bề rộng. Ghim: chỉ 769–1024px. */ .pt-top .pt-top__burger { display: none; } @media (max-width: 1024px) { .pt-top .pt-top__burger { display: inline-grid; } } @media (max-width: 768px) { .pt-top .pt-top__burger { display: none; } } /* Dấu * bắt buộc của ui-components.css là hổ phách sáng trên trắng (2.15:1). File đó dùng chung toàn site nên không sửa được — chỉnh trong phạm vi portal. */ .pt-shell .form-required, .pt-scope .form-required { color: var(--pt-warn-deep); } /* Ô ngày gốc của trình duyệt đứng cạnh select tuỳ biến → hai kiểu control trong một thanh. Kéo về cùng chiều cao/viền và làm dịu nút lịch. */ .pt-shell input[type="date"]::-webkit-calendar-picker-indicator, .pt-scope input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; } .pt-shell input[type="date"]:hover::-webkit-calendar-picker-indicator, .pt-scope input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; } .pt-input[type="date"] { padding-right: var(--pt-s-2); } /* Mục menu đang mở trong popover / tấm trượt "Thêm" */ .pt-pop__i[aria-current="page"] { background: var(--pt-wash); color: var(--pt-brand-deep); font-weight: 600; } .pt-pop__i[aria-current="page"] svg { color: var(--pt-brand-strong); } /* Chân popover (ví dụ "Xem tất cả" dưới danh sách chuông) */ .pt-pop__foot { border-top: 1px solid var(--pt-hair); margin-top: 6px; padding-top: 6px; } .pt-pop__foot .pt-pop__i { justify-content: center; font-weight: 600; color: var(--pt-brand-strong); } /* Đầu menu chuông: tiêu đề + số mới bên trái, "Đánh dấu đã đọc tất cả" bên phải (xuống dòng khi màn quá hẹp). */ .pt-bell__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pt-s-1) var(--pt-s-3); padding: 4px 4px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--pt-hair); container-type: inline-size; } /* Hẹp (điện thoại) thì bỏ viên "N mới" — số đã hiện trên chuông ngay phía trên — để tiêu đề và nút vẫn chung một hàng. */ @container (max-width: 345px) { .pt-bell__n { display: none; } } .pt-bell__t { display: inline-flex; align-items: center; gap: var(--pt-s-2); min-height: 32px; font-size: var(--pt-fs-15); font-weight: 700; color: var(--pt-ink); } .pt-bell__n { padding: 2px 8px; border-radius: 999px; background: var(--pt-wash); color: var(--pt-brand-deep); font-size: var(--pt-fs-12); font-weight: 600; font-variant-numeric: tabular-nums; } .pt-bell__all { margin: 0 0 0 auto; } .pt-bell__btn, .pt-bell__done { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: var(--pt-r-sm); font-size: var(--pt-fs-13); font-weight: 600; white-space: nowrap; } .pt-bell__btn { border: 0; background: none; font-family: inherit; color: var(--pt-brand-strong); cursor: pointer; transition: background var(--pt-dur) var(--pt-ease), color var(--pt-dur) var(--pt-ease); } .pt-bell__btn:hover { background: var(--pt-wash); color: var(--pt-brand-deep); } .pt-bell__btn[aria-busy="true"] { opacity: .55; pointer-events: none; } .pt-bell__done { margin-left: auto; color: var(--pt-muted); font-weight: 500; } .pt-bell__done svg { color: var(--color-secondary); } /* Đủ rộng để tiêu đề + "99+ mới" + nút "Đánh dấu đã đọc tất cả" nằm một hàng (điện thoại ghim theo khung nhìn, xem @media dưới). */ #ptBell { min-width: 380px; } /* Danh sách chuông: 5 thông báo phải đọc hết; mép dưới có dải mờ báo còn nội dung. */ #ptBell .pt-pop__list { max-height: min(62dvh, 440px); } /* .is-scrollable do portal.js gắn khi nội dung thật sự dài hơn khung */ .pt-pop__list.is-scrollable { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 20px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 20px), transparent); } /* Ô thông báo kết quả do khung dựng: là khối ĐẦU TIÊN của trang nên nó phải nhận phần chồng lớp, và khối .pt-overlap kế tiếp trả lề về 0. */ .pt-flash-slot { position: relative; z-index: 1; margin-bottom: var(--pt-s-5); margin-top: calc(-1 * min(var(--pt-overlap), max(0px, var(--pt-band-pb) - 12px))); } .pt-flash-slot + .pt-overlap, .pt-flash-slot ~ .pt-overlap { margin-top: 0; } .pt-gap-bottom { margin-bottom: var(--pt-s-5); } /* Popup của Lịch đăng bài (content-ops.css dùng chung với admin, không sửa được): khi trình duyệt không có showModal(), mở dạng thường sẽ nằm DƯỚI thanh trên dính và nav đáy. Ghim vào thang lớp của portal. */ dialog.cop-dialog { z-index: var(--pt-z-modal); } @media (max-width: 768px) { /* Vùng chạm ≥40px trên điện thoại (WCAG 2.5.8 đòi ≥24px, ta lấy 40px cho ngón tay) */ :root { --pt-h-sm: 40px; } .pt-icbtn--sm { width: 40px; height: 40px; } .pt-pager__b { min-width: 40px; height: 40px; } .pt-pass__t { width: 40px; height: 40px; } .pt-nav__item { min-height: 44px; } .pt-side__out { width: 40px; height: 40px; } /* Điều khiển chỉ-có-chữ: nới vùng chạm bằng lớp phủ trong suốt, không đổi bố cục */ .pt-reset::after, .pt-band__back::after, .pt-alert__x::after, .pt-tip__b::after { content: ""; position: absolute; inset: -11px; } #ptBell .pt-pop__list { max-height: min(62dvh, 420px); } .pt-bell__btn { min-height: 40px; } /* Menu chuông rộng 340px mở từ nút chuông (không phải mép phải) nên tràn khỏi mép trái màn hình → ghim theo khung nhìn, hai bên chừa gutter. */ #ptBell { position: fixed; left: var(--pt-gutter); right: var(--pt-gutter); width: auto; min-width: 0; top: calc(var(--pt-top-h) + env(safe-area-inset-top, 0px) + 6px); } } /* ─────────────────────────────────────────────────────────────────────────── 18. MÀN XÁC THỰC (gộp từ auth-extra.css) — login · register · google-finish · màn chờ duyệt. Chỉ layout-glue; component vẫn là .pt-* ở trên. ─────────────────────────────────────────────────────────────────────────── */ .auth-body { min-height: 100dvh; } .auth { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); min-height: 100dvh; background: var(--pt-bg); } /* Dải teal bên trái (nền/hạt/lưới chấm của .pt-band). Nhãn thương hiệu ghim trên cùng; cụm "câu giới thiệu + vật thể" canh giữa phần còn lại để ngang tầm thẻ biểu mẫu bên phải. */ .auth__side { position: sticky; top: 0; align-self: start; min-height: 100dvh; margin-top: 0; padding: var(--pt-s-8); display: flex; } .auth__side-in { width: 100%; max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--pt-s-8); } .auth__story { margin-block: auto; display: flex; flex-direction: column; gap: var(--pt-s-7); } .auth-lock { display: flex; align-items: center; gap: var(--pt-s-3); } .auth-lock__logo { display: block; width: 76px; height: auto; flex-shrink: 0; } .auth-lock__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .auth-lock__txt strong { color: var(--pt-on); font-size: var(--pt-fs-16); font-weight: 700; letter-spacing: -.01em; } .auth-lock__txt span { color: var(--pt-on-3); font-size: var(--pt-fs-13); } /* Câu giới thiệu: KHÔNG dùng

— nó đứng trước

của thẻ biểu mẫu, đảo bậc tiêu đề. */ .auth__pitch-t { font-size: var(--pt-fs-24); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: var(--pt-on); text-wrap: balance; } .auth__pitch-d { margin-top: var(--pt-s-3); max-width: 46ch; font-size: var(--pt-fs-15); color: var(--pt-on-2); line-height: 1.6; } /* Vật thể sản phẩm: ví là tiêu điểm, thẻ link phụ cách 20px, chú thích "minh hoạ" sát dưới 12px. Ví dùng đúng đệm hệ thống — không thu nhỏ (bản cũ ép 16/20 làm dãy số và mã CTV dính nhau). */ .auth__objects { margin: 0; display: flex; flex-direction: column; gap: var(--pt-s-5); } .auth__objects-note { margin-top: calc(var(--pt-s-2) * -1); font-size: var(--pt-fs-12); color: var(--pt-on-3); } .auth-obj__link { margin-top: var(--pt-s-4); display: flex; align-items: center; gap: 2px; min-width: 0; padding: 0 var(--pt-s-4); height: var(--pt-h-md); border-radius: var(--pt-r-md); background: var(--pt-glass); border: 1px solid var(--pt-line-d); font-size: var(--pt-fs-14); color: var(--pt-on-2); white-space: nowrap; overflow: hidden; } .auth-obj__link b { color: var(--pt-on); font-weight: 700; letter-spacing: .06em; } .auth-obj__note { margin-top: var(--pt-s-3); font-size: var(--pt-fs-13); color: var(--pt-on-3); line-height: 1.5; } /* Cột biểu mẫu — position+z-index: dải teal có isolation nên nếu cột này tĩnh, nó bị dải vẽ đè lên khi chồng lớp. */ .auth__main { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding: var(--pt-s-9) var(--pt-s-7); background: radial-gradient(62% 52% at 82% 0%, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent 70%); } .auth__col { width: 100%; max-width: 440px; } .auth__col:has(.auth__card--wide) { max-width: 540px; } .auth .auth__card { padding: var(--pt-s-7); } .auth__head { margin-bottom: var(--pt-s-6); } .auth__head-top { display: flex; align-items: center; justify-content: space-between; gap: var(--pt-s-3); margin-bottom: var(--pt-s-2); } .auth__eyebrow { font-size: var(--pt-fs-12); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--pt-brand-deep); } .auth__title { margin: 0; font-size: var(--pt-fs-24); font-weight: 700; letter-spacing: -.02em; color: var(--pt-ink); line-height: 1.25; } .auth__sub { margin-top: var(--pt-s-2); max-width: 52ch; font-size: var(--pt-fs-14); color: var(--pt-muted); line-height: 1.55; text-wrap: pretty; } .auth__icon { margin-bottom: var(--pt-s-4); } .auth__card > .pt-alert { margin-bottom: var(--pt-s-5); } .auth__foot { margin-top: var(--pt-s-6); text-align: center; font-size: var(--pt-fs-14); color: var(--pt-muted); } /* Biểu mẫu: 20px giữa các ô, 24px trước nút gửi; nhãn↔ô 6px và gợi ý 5px do .pt-field lo */ .auth-form { display: flex; flex-direction: column; gap: var(--pt-s-5); } .auth-form .pt-field { margin-bottom: 0; } .auth-form > .pt-btn--primary { margin-top: var(--pt-s-1); } .auth-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pt-s-5) var(--pt-s-4); align-items: start; } .auth-sep { display: flex; align-items: center; gap: var(--pt-s-3); margin: var(--pt-s-6) 0 var(--pt-s-5); color: var(--pt-muted); font-size: var(--pt-fs-13); } .auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--pt-hair); } .auth-google { gap: 10px; } .auth-note { margin: var(--pt-s-3) auto 0; max-width: 42ch; font-size: var(--pt-fs-13); color: var(--pt-muted); line-height: 1.55; text-align: center; text-wrap: balance; } /* OTP: nhãn · ô mã · hạn dùng là một cụm 8px; hai nút phụ tách khỏi nút chính bằng đường tóc */ .auth-otp { display: flex; flex-direction: column; gap: var(--pt-s-2); } .auth-otp-to { font-size: var(--pt-fs-14); color: var(--pt-muted); } .auth-otp-to strong { display: block; margin-top: 2px; color: var(--pt-ink); font-weight: 600; overflow-wrap: anywhere; } .auth-otp-left { font-size: var(--pt-fs-13); color: var(--pt-muted); font-variant-numeric: tabular-nums; } .auth-otp-acts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--pt-s-3); padding-top: var(--pt-s-4); border-top: 1px solid var(--pt-hair); } /* Điện thoại: dải teal thu thành thanh đầu trang, thẻ chồng lên mép */ @media (max-width: 880px) { /* auto 1fr: dải ôm sát nội dung, phần trống dồn xuống cột biểu mẫu — nếu để hàng tự giãn, .auth__side (align-self:start) đứng yên còn thẻ bị đẩy xuống, mất chồng lớp. */ .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } .auth__side { position: static; min-height: 0; display: block; padding: var(--pt-s-6) var(--pt-s-4) calc(var(--pt-s-6) + 40px); } .auth__side-in { max-width: 520px; gap: var(--pt-s-4); } .auth__story { margin: 0; gap: 0; } .auth__objects, .auth__pitch-d { display: none; } .auth__pitch-t { font-size: var(--pt-fs-15); font-weight: 600; line-height: 1.5; color: var(--pt-on-2); } .auth__main { display: block; margin-top: -40px; padding: 0 var(--pt-s-4) var(--pt-s-8); background: none; } .auth__col, .auth__col:has(.auth__card--wide) { max-width: 520px; margin: 0 auto; } } @media (max-width: 520px) { .auth .auth__card { padding: var(--pt-s-6) var(--pt-s-5); } /* Họ + Tên vẫn đứng cạnh nhau (ngắn); ngày sinh/tỉnh và hai ô mật khẩu xuống một cột */ .auth-pair:not(.auth-pair--keep) { grid-template-columns: minmax(0, 1fr); } } /* Laptop màn thấp (1280×800…): khép bớt khoảng trước, rồi mới bỏ thẻ link, cuối cùng bỏ câu mô tả */ @media (min-width: 881px) and (max-height: 840px) { .auth__side { padding-block: var(--pt-s-7); } .auth__side-in, .auth__story { gap: var(--pt-s-6); } } @media (min-width: 881px) and (max-height: 760px) { .auth-obj { display: none; } } @media (min-width: 881px) and (max-height: 640px) { .auth__pitch-d { display: none; } } /* ─────────────────────────────────────────────────────────────────────────── 19. IN ẤN — bỏ khung, giữ nội dung đọc được không cần nền ─────────────────────────────────────────────────────────────────────────── */ @media print { .pt-side, .pt-top, .pt-bnav, .pt-scrim, .pt-toasts, .pt-skip, .pt-btn, .pt-icbtn, .pt-band::before, .pt-band::after, .pt-pager, .pt-fbar { display: none !important; } .pt-flash-slot { margin-top: 0 !important; } .pt-shell { display: block; } .pt-band { margin-top: 0; padding: 0 0 var(--pt-s-4); background: none !important; color: var(--color-ink) !important; border-bottom: 1px solid var(--color-border); } .pt-band h1, .pt-band h2, .pt-band__title, .pt-band__figure { color: var(--color-ink) !important; } .pt-band__eyebrow, .pt-band__context, .pt-band__back { color: var(--color-muted) !important; } .pt-band__actions { display: none !important; } .pt-page { max-width: none; margin: 0; padding: 0; } .pt-overlap { margin-top: var(--pt-s-4) !important; } .pt-card, .pt-strip, .pt-kv, .pt-glass, .pt-wallet { box-shadow: none !important; background: none !important; color: var(--color-ink) !important; border: 1px solid var(--color-border) !important; break-inside: avoid; } .pt-wallet::before, .pt-wallet::after, .pt-strip__cell--lead::before { display: none !important; } .pt-wallet__v, .pt-wallet__lbl, .pt-wallet__k, .pt-wallet__hint, .pt-wallet__facts span, .pt-wallet__facts strong, .pt-wallet__holder span, .pt-wallet__holder strong, .pt-glass__title, .pt-glass__note, .pt-strip__cell--lead, .pt-strip__cell--lead * { color: var(--color-ink) !important; } .pt-table th { position: static; background: none; } .pt-tablewrap { display: block !important; overflow: visible; } .pt-list { display: none !important; } a[href]::after { content: ""; } }