/* ===================================================================== moats.css — token + nền tảng dùng chung cho moats.vn (Agent C sở hữu) D và E: link file này TRƯỚC css riêng. Đừng sửa — cần thêm gì thì viết trong lists.css / article.css. TOKEN (:root): --ink --ink2 --muted --line --bg --card --mint --ok --okbg --warn --warnbg --orange --bad --badbg --neu --neubg --link --font --radius --radius-sm --wrap LAYOUT : .wrap (max 1240px + lề 24/16px) · .stack (cột, gap 20px) .grid-2 (2 cột ≥ 520px) · .grid-3 (3 cột ≥ 380px) .grid-auto (auto-fit ≥ 240px) CHỮ : .lbl (nhãn in hoa nhỏ) · .num (tabular-nums) · .muted .small · h1/h2/h3 mặc định · .sr-only (ẩn, đọc màn hình) THẺ : .card (nền trắng, viền, bo 16) · .card--soft (nền xám nhạt) .card-head (hàng tiêu đề + pill, wrap) · .card-sub (mô tả xám) PILL : .pill + .ok | .warn | .bad | .neu (màu đạt chuẩn 4.5:1) NÚT : .btn (viền) · .btn--dark (nền ink) · .btn--mint · .btn--sm .seg (nhóm nút chuyển) > button[aria-pressed=true] = đang chọn BẢNG : .tbl (bảng số, cột phải căn phải, dòng kẻ) KHÁC : .note (hộp ghi chú vàng) · .badge-demo (nhãn "Số liệu minh hoạ") .empty (chữ "chưa có dữ liệu") HEADER : .site-header > .wrap.site-header__in > a.brand(svg+Moats) + nav.site-nav (a[aria-current=page] = trang hiện tại) + form.site-search (action="/co-phieu/" method=get, input name=m) FOOTER : .site-footer > .wrap (câu miễn trừ chung) PHA 2 : .up / .down / .flat (màu tăng/giảm/đứng giá) · .tabs (thanh tab cuộn ngang, button[aria-selected=true]) · .scroll-x (hộp cuộn ngang cho bảng) · .kv (lưới nhãn–giá trị) · .ac (danh sách gợi ý tìm mã, do stock.js tạo — trang nào muốn gợi ý thì nạp /assets/stock.js: nó chỉ chạy phần trang cổ phiếu khi có #app[data-page=stock]) PRO : .pro-tag (nhãn nhỏ "Pro"; .pro-tag--dark trên nền tối) · .pro-note (dòng "Đang mở miễn phí…") · .skel (thanh xám giả lập số liệu) · .pro-locked + .pro-gate > .pro-gate__box (do moatsGate() trong plan.js thêm vào phần tử [data-pro] khi paywall bật & chưa Pro) HTML header/footer chuẩn (dán y nguyên, chỉ đổi aria-current):
Moats
(Form chạy cả khi không có JS: /co-phieu/?m=fpt → trang tự viết hoa mã. Muốn URL đẹp /co-phieu/FPT thì thêm đoạn JS nhỏ: xem moatsSearch() trong stock.js.) ===================================================================== */ :root{ --ink:#0E1726; --ink2:#1C2738; --muted:#5B6576; --line:#E3E7EC; --bg:#F3F5F7; --card:#FFFFFF; --mint:#12A37F; --ok:#0B7A5E; --okbg:#E3F4EE; --oktext:#075A45; --warn:#7A3B00; --warnbg:#FCEFD9; --orange:#E08A2E; --bad:#8F1C13; --badbg:#FBE4E2; --neu:#3A4453; --neubg:#EEF1F4; --link:#0B5F8A; --link-hover:#08425F; --border-input:#CBD2DA; --on-dark:#FFFFFF; --on-dark-2:#C9D2DE; --on-dark-3:#9AA9BD; --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --radius:16px; --radius-sm:10px; --wrap:1240px; } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden} img,svg{max-width:100%} img{display:block;height:auto} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} a{color:var(--link)} a:hover{color:var(--link-hover)} h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.01em} h1{font-size:clamp(30px,4.5vw,40px);font-weight:800;letter-spacing:-.02em} h2{font-size:20px;font-weight:700} h3{font-size:17px;font-weight:700} p{margin:0} :focus-visible{outline:3px solid var(--mint);outline-offset:2px;border-radius:6px} [hidden]{display:none!important} /* ---------- helpers ---------- */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .num{font-variant-numeric:tabular-nums} .muted{color:var(--muted)} .small{font-size:14px} .lbl{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .empty{color:var(--muted);font-style:italic} /* ---------- layout ---------- */ .wrap{max-width:var(--wrap);margin:0 auto;padding-left:24px;padding-right:24px} .stack{display:flex;flex-direction:column;gap:20px} .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:20px} .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px} .grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px} /* ---------- card ---------- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;min-width:0} .card--soft{background:var(--bg);border:0;border-radius:12px;padding:14px} .card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px} .card-sub{margin-top:6px;color:var(--muted);font-size:14px} /* ---------- pill ---------- */ .pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600;white-space:nowrap;line-height:1.3} .pill.ok{background:var(--okbg);color:var(--oktext)} .pill.warn{background:var(--warnbg);color:var(--warn)} .pill.bad{background:var(--badbg);color:var(--bad)} .pill.neu{background:var(--neubg);color:var(--neu)} .badge-demo{background:var(--warnbg);color:var(--warn)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--radius-sm);border:1px solid var(--border-input);background:#fff;color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap} .btn:hover{border-color:var(--muted)} .btn--dark{background:var(--ink);border-color:var(--ink);color:#fff} .btn--dark:hover{background:var(--ink2);color:#fff} .btn--mint{background:var(--ok);border-color:var(--ok);color:#fff} .btn--sm{min-height:36px;padding:0 12px;font-size:14px} .btn[aria-pressed="true"]{background:var(--okbg);border-color:var(--ok);color:var(--oktext)} .seg{display:inline-flex;gap:4px;background:var(--neubg);border-radius:var(--radius-sm);padding:4px} .seg button{border:0;border-radius:7px;padding:6px 12px;min-height:34px;font-size:14px;background:transparent;color:var(--neu)} .seg button[aria-pressed="true"]{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(14,23,38,.08)} /* ---------- table ---------- */ .tbl{width:100%;border-collapse:collapse;font-size:15px} .tbl th,.tbl td{padding:11px 0 11px 10px;text-align:right;vertical-align:middle} .tbl th:first-child,.tbl td:first-child{padding-left:0;text-align:left} .tbl thead th{color:var(--muted);font-size:13px;font-weight:600;padding-top:6px;padding-bottom:6px} .tbl tbody tr{border-top:1px solid var(--line)} .tbl tbody th{font-weight:600} /* ---------- note ---------- */ .note{background:var(--warnbg);color:var(--warn);border-radius:12px;padding:12px 16px;font-size:15px} /* ---------- header ---------- */ .site-header{background:var(--ink);color:#fff} .site-header__in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-top:14px;padding-bottom:14px} .brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:#fff;text-decoration:none} .brand:hover{color:#fff} .brand svg{width:32px;height:32px;flex:none} .site-nav{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:15px} .site-nav a{color:var(--on-dark-2);text-decoration:none;padding:6px 0} .site-nav a:hover{color:#fff} .site-nav a[aria-current="page"]{color:#fff;font-weight:600;box-shadow:inset 0 -2px 0 var(--mint)} .site-search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--ink2);border-radius:var(--radius-sm);padding:0 12px;height:42px;flex:0 1 320px;min-width:200px} .site-search:focus-within{outline:2px solid var(--mint)} .site-search input{background:transparent;border:0;outline:none;color:#fff;font-size:15px;width:100%;min-width:0} .site-search input::placeholder{color:var(--on-dark-3)} /* ---------- footer ---------- */ .site-footer{border-top:1px solid var(--line);margin-top:24px;padding:24px 0 40px;color:var(--muted);font-size:14px;line-height:1.6} /* ---------- pha 2: dùng chung ---------- */ .up{color:var(--oktext)} .down{color:var(--bad)} .flat{color:#8A5A00} .tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--line)} .tabs::-webkit-scrollbar{display:none} .tabs button,.tabs a{flex:none;border:0;background:transparent;padding:12px 16px;font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;box-shadow:inset 0 -3px 0 transparent;border-radius:0} .tabs button:hover,.tabs a:hover{color:var(--ink)} .tabs [aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--mint)} .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:0 24px;margin:0} .kv > div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;min-width:0} .kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums} .site-search{position:relative} .ac{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;list-style:none;margin:0;padding:6px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(14,23,38,.18);max-height:min(420px,70vh);overflow-y:auto;min-width:280px} .ac li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14px} .ac li b{min-width:44px} .ac li .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--neu)} .ac li .e{font-size:12px;color:var(--muted)} .ac li[aria-selected="true"],.ac li:hover{background:var(--neubg)} .ac .ac-empty{color:var(--muted);cursor:default} /* ---------- pha 2: Pro ---------- */ .pro-tag{display:inline-flex;align-items:center;vertical-align:middle;margin-left:6px;padding:1px 7px;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;background:#FFF1D6;color:#6B3A00;border:1px solid #F2D49B} .pro-tag--dark{background:rgba(255,210,122,.16);color:#FFD27A;border-color:rgba(255,210,122,.45)} .pro-note{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)} .pro-note .pro-tag{margin-left:0} .skel{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,#E3E7EC,#EEF1F4,#E3E7EC);margin:10px 0} .skel-dark .skel{background:linear-gradient(90deg,#2A3648,#344257,#2A3648)} .skel-pill{width:220px;max-width:70%;height:30px;border-radius:999px} .skel-bar{height:16px;border-radius:8px;width:100%} .skel-body{padding-top:6px} .pro-locked{position:relative;isolation:isolate} .pro-locked > :not(.pro-gate){filter:blur(3px);opacity:.55;pointer-events:none;user-select:none} .pro-gate{position:absolute;inset:0;z-index:5;display:flex;justify-content:center;align-items:flex-start;padding:40px 16px} .pro-gate__box{position:sticky;top:72px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(14,23,38,.22);padding:22px;max-width:400px;width:100%;text-align:center} .pro-gate__box h3{font-size:18px;margin:6px 0 6px} .pro-gate__box p{font-size:14px;color:var(--muted);margin:0 0 14px} .pro-gate__box .btn{width:100%} .pro-gate__box small{display:block;margin-top:10px;font-size:12.5px;color:var(--muted)} @media (max-width:719px){ .wrap{padding-left:16px;padding-right:16px} .card{padding:16px} .site-header__in{gap:8px 18px;padding-top:10px;padding-bottom:12px} .site-nav{order:3;width:100%;gap:2px 16px;font-size:14px} .site-search{order:2;flex:1 1 160px;min-width:0;margin-left:auto;height:40px;position:static} .site-header__in{position:relative} .ac{left:16px;right:16px;top:58px;min-width:0} .tabs button,.tabs a{padding:12px 12px;font-size:14px} }