/* classic.css — BỘ ÁO OLD-REDDIT CHO ΣFORUM
 *
 * Số đo và bảng màu ĐỌC RA TỪ `Reddit_src/github_full/server/r2` (reddit.less,
 * 11 497 dòng, bản mã mở CPAL-1.0 của reddit):
 *
 *     nền trang       trắng · chữ  x-small verdana/arial
 *     thanh trên      #cee3f8, viền dưới 1px #5f99cf
 *     dải cộng đồng   #f0f0f0, CHỮ HOA, cao 18px, viền dưới xám
 *     cột phải        300px, thả bên phải
 *     cột phiếu       15px, mũi tên 15×14
 *     tiêu đề         blue → đã đọc #551a8b
 *     dòng phụ        #888 x-small, liên kết #369
 *     hộp thông tin   nền #EFF7FF, viền #5f99cf
 *     bình luận       lùi 10px, cây con lùi thêm 15px, cách trên 10px
 *
 * VIẾT LẠI, KHÔNG CHÉP. `reddit.less` và các template mako ở dưới CPAL-1.0 —
 * mục 14/15 của giấy phép nói riêng về việc PHỤC VỤ QUA MẠNG, đúng trường hợp
 * logossigma.com, nên chép nguyên vào đây sẽ kéo theo nghĩa vụ ghi công và mở
 * nguồn cho cả phần mã quanh nó. Lấy THIẾT KẾ (số đo, màu, hành vi) thì được;
 * lấy MÃ thì không. Đây là ranh giới cố ý, không phải làm cho có khác.
 *
 * Bật/tắt bằng thuộc tính trên thẻ gốc, nên hai bộ áo dùng CHUNG một khối HTML —
 * không có nhánh dựng thứ hai để lệch nhau. © 2026 HUA VAN ANH KHOA
 */
html[data-skin="classic"] {
  --o: #ff4500;            /* orangered — màu phiếu thuận của reddit */
  --down: #9494ff;         /* xanh tím — phiếu chống */
  --link: #0000cd;
  --seen: #551a8b;
  --meta: #888;
  --metalink: #369;
  --line: #ccc;
  --bg2: #f0f0f0;
  --card: #fff;
  --ink: #000;
  --r: 0px;
  --sh: none;
}
html[data-skin="classic"] body{
  background:#fff;
  font:normal 12px verdana,arial,helvetica,sans-serif;
  color:#000;
}

/* ── THANH TRÊN ─────────────────────────────────────────────────────────── */
html[data-skin="classic"] .top{background:#cee3f8;border-bottom:1px solid #5f99cf;box-shadow:none;height:auto;padding:4px 8px}
html[data-skin="classic"] .brand{font-size:16px;font-weight:700;color:#000}
html[data-skin="classic"] .search input{border:1px solid #ccc;border-radius:0;background:#fff;font-size:12px}
html[data-skin="classic"] .ico,html[data-skin="classic"] .me{border-radius:0;border-color:transparent}

/* ── BỐ CỤC: nội dung trái, hộp phải 300px ─────────────────────────────── */
/* old-reddit KHÔNG có cột trái. Danh sách cộng đồng nằm trên một DẢI NGANG sát
 * đầu trang (`#sr-header-area`), còn nội dung chiếm hết bề ngang còn lại. Nên ở
 * đây cột trái được đặt thành dải ngang trải hết hàng đầu — cùng một khối HTML,
 * chỉ đổi vùng lưới, không dựng nhánh markup thứ hai. */
html[data-skin="classic"] .shell{
  max-width:none;padding:0 5px 40px;gap:0;
  grid-template-columns:minmax(0,1fr) 300px;
  grid-template-areas:"srbar srbar" "main side";
}
html[data-skin="classic"] .nav{
  grid-area:srbar;position:static;max-height:none;overflow-x:auto;overflow-y:hidden;
  white-space:nowrap;background:#f0f0f0;border-bottom:1px solid gray;
  height:18px;line-height:18px;margin:0 -5px 7px;padding:0 5px;
}
html[data-skin="classic"] #main{grid-area:main;margin:7px 5px 0}
html[data-skin="classic"] .rail{grid-area:side;position:static}
/* Mọi thứ trong dải chạy ngang, chữ nhỏ, IN HOA — đúng #sr-header-area. */
html[data-skin="classic"] .navsec{display:inline;margin:0}
html[data-skin="classic"] .navsec>span{display:none}
html[data-skin="classic"] .nav .nlink{
  display:inline-flex;padding:0 6px;font-size:10px;text-transform:uppercase;color:#369;
  border-right:1px solid #ccc;line-height:18px;
}
html[data-skin="classic"] .nav .nlink .n,html[data-skin="classic"] .nav .nlink svg,
html[data-skin="classic"] .nav .nlink .dot{display:none}
@media(max-width:760px){
  html[data-skin="classic"] .shell{grid-template-columns:minmax(0,1fr);grid-template-areas:"srbar" "main" "side"}
  html[data-skin="classic"] .nav{display:block}
}
html[data-skin="classic"] .rail{margin:7px 5px 0}

/* ── HỘP: viền mảnh, không bo, không đổ bóng ───────────────────────────── */
html[data-skin="classic"] .card{
  background:#fff;border:1px solid #ccc;border-radius:0;box-shadow:none;padding:8px;margin-bottom:10px;
}
html[data-skin="classic"] .card h3{font-size:14px;font-weight:700;text-transform:none;letter-spacing:0;color:#000;margin-bottom:6px}
html[data-skin="classic"] .rail .card:first-child{background:#EFF7FF;border-color:#5f99cf;border-radius:3px}

/* ── DẢI CỘNG ĐỒNG kiểu #sr-header-area ────────────────────────────────── */
html[data-skin="classic"] .navsec>span{
  background:#f0f0f0;border-bottom:1px solid gray;text-transform:uppercase;
  font-size:10px;line-height:18px;height:18px;padding:0 5px;margin-bottom:4px;color:#000;letter-spacing:0;
}
html[data-skin="classic"] .nlink{border-radius:0;padding:2px 5px;font-size:12px;gap:6px}
html[data-skin="classic"] .nlink:hover{background:#f0f0f0}
html[data-skin="classic"] .nlink.on{background:none;font-weight:700;color:#000}

/* ── THANH TAB kiểu .tabmenu ───────────────────────────────────────────── */
html[data-skin="classic"] .sortbar,html[data-skin="classic"] .scopebar{
  background:none;border:none;border-bottom:1px solid #ccc;border-radius:0;box-shadow:none;
  padding:0 0 3px;margin-bottom:8px;gap:0;
}
html[data-skin="classic"] .sortbar button,html[data-skin="classic"] .scopebar button{
  border:none;border-radius:0;background:none;padding:2px 8px;
  font-size:11px;font-weight:400;text-transform:uppercase;color:#369;
}
html[data-skin="classic"] .sortbar button.on,html[data-skin="classic"] .scopebar button.on{
  background:#fff;border:1px solid #ccc;border-bottom-color:#fff;color:#000;font-weight:700;
}
html[data-skin="classic"] .sortbar .twin{border-radius:0;font-size:11px}

/* ── MỘT BÀI: hạng · cột phiếu 15px · phần thân ────────────────────────── */
html[data-skin="classic"] .post{
  background:none;border:none;border-radius:0;box-shadow:none;margin:0 0 8px;padding:0;
}
html[data-skin="classic"] .post:hover{border:none}
/* Bề rộng do `flex:0 0 48px` quyết định, không phải `width` — đặt `width:15px`
 * ở đây không có tác dụng gì cả, và tôi đã mất một lượt đo mới thấy. Phải đè
 * đúng thuộc tính đang cầm trịch. Tên lớp nút xuống là `.dn`, không phải `.down`. */
html[data-skin="classic"] .post .rank{
  display:block;flex:0 0 auto;min-width:2.2em;text-align:right;
  color:#c6c6c6;font-size:16px;font-weight:400;padding-top:1px;
}
html[data-skin="classic"] .vote{flex:0 0 15px;margin:0 7px;padding:0;background:none;border:none;gap:0}
html[data-skin="classic"] .vote button{width:15px;height:14px;padding:0;border-radius:0;color:#c6c6c6;line-height:14px}
html[data-skin="classic"] .vote button svg{width:11px;height:11px}
html[data-skin="classic"] .vote button:hover{background:none;color:#888}
html[data-skin="classic"] .vote button.up.on{color:#ff4500;background:none}
html[data-skin="classic"] .vote button.dn.on{color:#9494ff;background:none}
html[data-skin="classic"] .vote .sc{font-size:11px;font-weight:700;color:#000}
html[data-skin="classic"] .pbody{margin-left:3px;overflow:hidden;padding:0}
html[data-skin="classic"] .post h2{margin:0;font-size:13px;font-weight:400;line-height:1.25}
html[data-skin="classic"] .post h2 a{color:#0000cd}
html[data-skin="classic"] .post h2 a:visited{color:#551a8b}
html[data-skin="classic"] .pmeta,html[data-skin="classic"] .cmthead{color:#888;font-size:10px;gap:3px}
html[data-skin="classic"] .pmeta a,html[data-skin="classic"] .cmthead a{color:#369;font-weight:400}
html[data-skin="classic"] .pmeta a:hover{text-decoration:underline}
html[data-skin="classic"] .domain{color:#888;font-size:10px}
/* old-reddit KHÔNG hiện đoạn trích trong danh sách — chỉ tiêu đề + dòng phụ.
 * Giữ lại thì nó còn bị cắt chồng lên hàng nút vì `max-height` + mặt nạ mờ của
 * bộ áo kia. Bỏ hẳn vừa đúng nguyên bản vừa hết lỗi chồng chữ. */
html[data-skin="classic"] .excerpt{display:none}

/* ── HÀNG NÚT kiểu .flat-list: chữ nhỏ, IN HOA, xám ────────────────────── */
html[data-skin="classic"] .pacts{gap:0;margin-top:1px}
html[data-skin="classic"] .pacts .pact{
  background:none;border:none;padding:0 4px 0 0;margin-right:4px;
  font-size:10px;font-weight:700;text-transform:uppercase;color:#888;
}
html[data-skin="classic"] .pacts .pact:hover{text-decoration:underline;color:#888;background:none}
html[data-skin="classic"] .pacts .pact svg{display:none}   /* old-reddit dùng CHỮ, không dùng icon */

/* ── CÂY BÌNH LUẬN ─────────────────────────────────────────────────────── */
html[data-skin="classic"] .cmt{margin-left:10px !important;border:none;background:none}
html[data-skin="classic"] .cmtbody{border-left:1px dotted #ccc;padding-left:7px;margin-top:10px}
html[data-skin="classic"] .cmt .stem{display:none}
html[data-skin="classic"] .cmt .body{font-size:12px;line-height:1.45}
html[data-skin="classic"] .cmthead a b{font-weight:700}
html[data-skin="classic"] .cmt .optag{background:#0055df;border-radius:2px}

/* ── Ô SOẠN ────────────────────────────────────────────────────────────── */
html[data-skin="classic"] .quick{border-radius:0;box-shadow:none;border:1px solid #ccc;padding:6px}
html[data-skin="classic"] .quick input{border-radius:0}
html[data-skin="classic"] textarea,html[data-skin="classic"] input[type=text]{border-radius:0;font-size:12px}
html[data-skin="classic"] .btn{border-radius:3px;font-size:12px}
html[data-skin="classic"] .btn.p{background:#5f99cf;border-color:#5f99cf}

/* ── ẢNH BÌA / ĐẦU CỘNG ĐỒNG: old-reddit không có, bỏ ──────────────────── */
html[data-skin="classic"] .banner{display:none}
html[data-skin="classic"] .chead{border-radius:0;box-shadow:none;border:1px solid #ccc}

/* ── TRANG BÀI ─────────────────────────────────────────────────────────── */
html[data-skin="classic"] #main h1{font-size:15px;font-weight:700;line-height:1.3;margin:1px 0 6px}
html[data-skin="classic"] .body{font-size:12px;line-height:1.5}
html[data-skin="classic"] .body p{margin:.6em 0}
html[data-skin="classic"] .chdr h3{font-size:13px}