/* TRANG CHỦ Craft Simulation — kiểu TradingView (Vin 31/10): tóm tắt chợ + biểu đồ, bản đồ nhiệt, biến động
   tuần, ngăn Projects / Bases bên phải. Phần chung (phông, thanh trên, nút, chân trang) ở `trang.css`. */

/* NỀN TRẬN ĐÁNH BOSS (Vin 31/10: "để nó mờ ở background, không ảnh hưởng gì đến thống kê nhưng vẫn ra cái vibe
   của game"): ảnh tự tạo (Canva AI), làm nhoè sẵn, đứng yên sau cả trang và mờ hẳn. Thẻ số liệu đều nền đặc nên
   không con số nào nằm đè lên ảnh — ảnh chỉ lộ ở khe giữa các thẻ, lề hai bên và sau thanh trên. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("./anh/nen-tran.webp") center / cover no-repeat; opacity: .26;
}

/* ---------------------------------------------------------------- thanh trên: ô tìm của trang chủ */
.nut-tim {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px;
  width: clamp(260px, 38vw, 600px);
  white-space: nowrap;
  border-radius: 999px; border: 1px solid transparent; background: #19191d; color: #a29e95;
  font: 400 15px/1 var(--phong); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s;
}
.nut-tim:hover { background: #222227; color: var(--chu); }
.nut-tim svg { flex: none; }
.nut-tim kbd { margin-left: auto; }
kbd {
  display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; white-space: nowrap;
  border: 1px solid #34343b; background: #101013; color: var(--chu-phu); font: 600 11.5px/1 var(--phong);
}

.tang { color: var(--tang); }
.giam { color: var(--giam); }
.dung { color: var(--mo); }

@keyframes mo-ra { from { opacity: 0; } }

/* ---------------------------------------------------------------- khung chung của các mục */
.muc { padding-top: 72px; scroll-margin-top: 64px; }
.dau-muc { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.dau-muc h2 { margin: 0; font-size: 28px; line-height: 1.25; font-weight: 700; letter-spacing: -.3px; }
.mo-ta-muc { margin: 6px 0 0; color: var(--mo); font-size: 14px; }
.mo-ta-muc a { color: var(--chu-phu); }
.mo-ta-muc a:hover { color: var(--chu); }
.o-the {
  border: 1px solid var(--vien); border-radius: 18px; background: var(--the); min-width: 0;
}
.co-js [data-hien] { opacity: 0; transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.co-js [data-hien].da-hien { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .co-js [data-hien]:not(.da-hien) { transform: translateY(28px); }
}
/* Chưa có dữ liệu chợ: khung giữ chỗ ánh lướt; máy chủ chưa có bảng giá thì giấu hẳn mọi phần chợ. */
.dang-tai { position: relative; overflow: hidden; }
.dang-tai::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(244, 235, 210, .045), transparent);
  animation: anh-luot 1.5s infinite;
}
@keyframes anh-luot { to { transform: translateX(100%); } }
html[data-cho="khong"] .can-cho { display: none !important; }

/* ---------------------------------------------------------------- tóm tắt chợ */
.don-vi { display: inline-flex; padding: 4px; border-radius: 13px; background: #0b0b0e; border: 1px solid var(--vien); }
.don-vi button {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 9px; border: 0; border-radius: 9px;
  background: none; color: var(--chu-phu); font: 600 14px/1 var(--phong); cursor: pointer; transition: background-color .15s, color .15s;
}
.don-vi button:hover { color: var(--chu); }
.don-vi button img, .don-vi button .anh-trong { width: 20px; height: 20px; }
.don-vi button[aria-pressed="true"] { background: #1b1b20; color: var(--chu); box-shadow: inset 0 0 0 1px #2d2d34; }

/* Thẻ biểu đồ lớn — như thẻ S&P 500 của TradingView: biểu tượng tròn, tên + mã, dòng giá to, biểu đồ vùng. */
.tom-tat { padding-top: 36px; scroll-margin-top: 64px; }
.tom-tat .dau-muc { align-items: center; margin-bottom: 18px; }
.dau-muc .tieu-de-muc { margin: 0; font-size: 28px; line-height: 1.25; font-weight: 700; letter-spacing: -.3px; }
.tieu-de-muc a { color: var(--chu); text-decoration: none; }
.tieu-de-muc .mui { display: inline-block; margin-left: 6px; color: var(--chu-phu); transition: transform .2s; }
.tieu-de-muc a:hover .mui { transform: translateX(3px); }
.cong-cu-muc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chon-league {
  height: 42px; padding: 0 38px 0 14px; border-radius: 12px; border: 1px solid var(--vien); color: var(--chu);
  background: #0b0b0e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23b5ae9c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px;
  font: 600 14px var(--phong); cursor: pointer; appearance: none; -webkit-appearance: none;
}
.chon-league:hover { border-color: #34343b; }
.the-lon { padding: 22px 24px 14px; border-radius: 18px; }
.bd-dau { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bd-dau .bt-tron { flex: none; display: inline-flex; width: 60px; height: 60px; border-radius: 50%; align-items: center; justify-content: center; background: #16161a; }
.bd-dau .bt-tron img, .bd-dau .bt-tron .anh-trong { width: 46px; height: 46px; }
.bd-dau .ten-dong { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bd-dau h3 { margin: 0; font-size: 18px; font-weight: 600; }
.nut-ten { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; text-align: left; }
.nut-ten:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(244, 235, 210, .35); }
.chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: #1d1d22;
  color: var(--chu-phu); font: 700 11px var(--phong); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle;
}
.bd-dau .dong-gia { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.bd-dau .lon { font: 700 32px/1.15 var(--phong-so); letter-spacing: -.3px; }
.bd-dau .don { color: var(--mo); font: 600 11.5px var(--phong); text-transform: uppercase; letter-spacing: .04em; }
.bd-dau .doi { font: 600 18px var(--phong-so); }
.bd-dau .tg { color: var(--mo); font: 400 13px var(--phong); }
.hai-the { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.the-danh-sach, .the-khoi-luong { padding: 20px 18px 10px; }
.tieu-de-the { display: flex; align-items: center; gap: 10px; margin: 0 6px 10px; font-size: 18px; font-weight: 700; }
.ds-chinh { list-style: none; margin: 0; padding: 0; min-height: 240px; }
.ds-chinh li + li { border-top: 1px solid var(--vien-nhe); }
.dong-chinh {
  width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 12px 8px; border: 0; border-radius: 12px; background: none; color: var(--chu); font: inherit; text-align: left;
  cursor: pointer; transition: background-color .15s;
}
.dong-chinh:hover { background: var(--the-2); }
.dong-chinh[aria-pressed="true"] { background: #110e07; box-shadow: inset 0 0 0 1px rgba(246, 195, 82, .4); }
.dong-chinh img, .dong-chinh .anh-trong { width: 40px; height: 40px; }
.dong-chinh .ten { display: block; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dong-chinh .chip { margin-top: 4px; }
.dong-chinh .so { text-align: right; font: 600 16px/1.45 var(--phong-so); white-space: nowrap; }
.dong-chinh .so small { margin-left: 4px; color: var(--mo); font: 600 10.5px var(--phong); text-transform: uppercase; }
.dong-chinh .so span { display: block; font-weight: 500; font-size: 14px; }
.kl-so { margin: 0 6px; }
.kl-so .lon { font: 700 26px/1.2 var(--phong-so); }
.kl-so .lon small { margin-left: 5px; color: var(--mo); font: 600 11px var(--phong); text-transform: uppercase; }
.kl-so .doi { font: 600 14.5px var(--phong-so); }
.bd.bd-nho { height: 200px; margin-top: 4px; }
.mo-ta-the { margin: 6px 6px 8px; color: var(--mo); font-size: 12.5px; }
.nguon { margin-top: 14px; font-size: 13px; }

.bd { position: relative; height: 400px; margin-top: 14px; touch-action: pan-y; }
.bd svg { display: block; overflow: visible; }
.bd .truc { fill: var(--mo); font: 400 11.5px var(--phong-so); }
.bd .luoi { stroke: rgba(244, 235, 210, .07); stroke-dasharray: 2 5; }
.bd .duong { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.bd .vung { transition: opacity 1s .35s; }
.bd .cot-sl { fill: rgba(244, 235, 210, .085); }
.bd .cot-sl.cuoi { fill: rgba(244, 235, 210, .16); }
.bd .ke-gia { stroke-dasharray: 3 4; stroke-width: 1; opacity: .6; }
.bd .nhan-gia text { font: 600 11.5px var(--phong-so); fill: #05110f; }
.bd .nhan-gia.giam text { fill: #1c0507; }
.bd .vong-cuoi { transform-box: fill-box; transform-origin: center; animation: vong-lan 2s ease-out infinite; }
@keyframes vong-lan { from { opacity: .65; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
.bd .tam { pointer-events: none; opacity: 0; transition: opacity .12s; }
.bd.dang-chi .tam { opacity: 1; }
.bd .tam line { stroke: rgba(244, 235, 210, .32); stroke-dasharray: 3 3; }
.bd-goi-y {
  position: absolute; top: 4px; z-index: 2; transform: translateX(-50%);
  pointer-events: none; padding: 8px 11px; border-radius: 10px; white-space: nowrap;
  background: rgba(16, 16, 19, .94); border: 1px solid #2b2b32; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  font: 400 12.5px/1.55 var(--phong-so); opacity: 0; transition: opacity .12s;
}
.bd.dang-chi .bd-goi-y { opacity: 1; }
.bd-goi-y b { font-weight: 600; }
.bd-goi-y .mo { color: var(--mo); font-family: var(--phong); }

.the-ds h3 {
  display: flex; align-items: center; gap: 10px; margin: 2px 12px 10px; font-size: 16px; font-weight: 700;
}
.ds-mon { list-style: none; margin: 0; padding: 0; }
.dong-mon {
  width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 9px 12px; border: 0; border-radius: 12px; background: none; color: var(--chu); font: inherit;
  text-align: left; cursor: pointer; transition: background-color .15s;
}
.dong-mon.co-duong { grid-template-columns: 32px minmax(0, 1fr) 64px auto; }
.dong-mon:hover { background: var(--the-2); }
.dong-mon img, .dong-mon .anh-trong { width: 32px; height: 32px; }
.dong-mon .ten { display: block; font-size: 14px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dong-mon .phu { display: block; color: var(--mo); font-size: 12px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dong-mon .so { text-align: right; font: 600 14px/1.35 var(--phong-so); white-space: nowrap; }
.dong-mon .so span { display: block; font-weight: 400; font-size: 12.5px; }
.dong-mon svg { width: 64px; height: 26px; }
.anh-trong { display: inline-block; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a3a40, #16161a); }

/* ---------------------------------------------------------------- bản đồ nhiệt */
.chu-giai { display: flex; align-items: center; gap: 10px; color: var(--mo); font: 400 12.5px var(--phong-so); }
.chu-giai i { width: 168px; height: 8px; border-radius: 99px; }
.the-tab {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 16px; padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent);
}
.the-tab::-webkit-scrollbar { display: none; }
.the-tab button {
  flex: none; height: 34px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--vien); background: none;
  color: var(--chu-phu); font: 400 13.5px/1 var(--phong); cursor: pointer; transition: border-color .15s, color .15s, background-color .15s;
}
.the-tab button:hover { color: var(--chu); border-color: #34343b; }
.the-tab button[aria-selected="true"] { background: var(--chu); border-color: var(--chu); color: #000; font-weight: 600; }
.ban-nhiet { position: relative; height: 580px; border-radius: 18px; overflow: hidden; background: #0a0a0c; border: 1px solid var(--vien); }
.o-nhiet {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  margin: 0; padding: 4px; border: 0; overflow: hidden; color: #fff; font: inherit; text-align: center; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); transition: filter .15s, box-shadow .15s;
}
.o-nhiet:hover, .o-nhiet:focus-visible { z-index: 1; outline: none; filter: brightness(1.2); box-shadow: inset 0 0 0 2px var(--vang); border-radius: 0; }
.o-nhiet img, .o-nhiet .anh-trong { flex: none; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .55)); }
.o-nhiet .ten { max-width: 94%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; line-height: 1.2; }
.o-nhiet .doi { font-family: var(--phong-so); font-weight: 600; line-height: 1.15; }
.o-nhiet.moi { animation: mo-ra .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 9ms); }
@media (prefers-reduced-motion: no-preference) {
  .o-nhiet.moi { animation-name: o-hien; }
}
@keyframes o-hien { from { opacity: 0; transform: scale(.92); } }

.goi-y {
  position: fixed; z-index: 60; pointer-events: none; min-width: 210px; max-width: 280px; padding: 12px 14px;
  border-radius: 13px; background: rgba(14, 14, 17, .97); border: 1px solid #2d2d34; box-shadow: 0 20px 60px rgba(0, 0, 0, .65);
  font-size: 13px; line-height: 1.5;
}
.goi-y[hidden] { display: none; }
.goi-y .dau-goi-y { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.goi-y .dau-goi-y img, .goi-y .anh-trong { width: 32px; height: 32px; flex: none; }
.goi-y .dau-goi-y b { display: block; font-size: 14px; }
.goi-y .dau-goi-y span { color: var(--mo); font-size: 12px; }
.goi-y dl { display: grid; grid-template-columns: auto auto; gap: 3px 16px; margin: 0; }
.goi-y dt { color: var(--mo); }
.goi-y dd { margin: 0; text-align: right; font-family: var(--phong-so); }

/* ---------------------------------------------------------------- biến động */
.ba-cot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.the-ds { padding: 18px 8px 8px; min-height: 120px; }
.dau-mau { width: 9px; height: 9px; border-radius: 50%; }
.dau-mau.tang { background: var(--tang); box-shadow: 0 0 12px rgba(34, 193, 207, .6); }
.dau-mau.giam { background: var(--giam); box-shadow: 0 0 12px rgba(242, 84, 91, .6); }
.dau-mau.vang { background: var(--vang); box-shadow: 0 0 12px rgba(246, 195, 82, .6); }

/* ---------------------------------------------------------------- ô tìm (Ctrl K) */
.tim {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center;
  padding: 11vh 16px 16px; background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tim[hidden], .chi-tiet[hidden] { display: none; }
.tim-hop {
  width: min(660px, 100%); border-radius: 18px; overflow: hidden; background: #0d0d10; border: 1px solid #2b2b32;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .75); animation: hop-hien .18s ease-out;
}
@keyframes hop-hien { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.tim-o { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 16px 0 18px; border-bottom: 1px solid var(--vien); color: var(--mo); }
.tim-o input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--chu);
  font: 400 17px var(--phong);
}
.tim-o input::placeholder { color: #6f6c66; }
.tim-o input::-webkit-search-cancel-button { display: none; }
.tim-ds { list-style: none; margin: 0; padding: 8px; max-height: min(56vh, 470px); overflow-y: auto; }
.tim-ds li { scroll-margin: 8px; }
.tim-ds .dong-mon[aria-selected="true"] { background: #1a1a1f; box-shadow: inset 0 0 0 1px #2e2e35; }
.tim-trong { padding: 28px 16px; color: var(--mo); text-align: center; font-size: 14px; }
.tim-chan { display: flex; gap: 16px; margin: 0; padding: 10px 18px; border-top: 1px solid var(--vien); color: var(--mo); font-size: 12.5px; }
.tim-chan kbd { height: 20px; padding: 0 5px; margin-right: 4px; }
body.khoa-cuon { overflow: hidden; }

/* ---------------------------------------------------------------- ngăn chi tiết một món */
.chi-tiet { position: fixed; inset: 0; z-index: 70; }
.ct-nen { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: mo-dan .2s; }
@keyframes mo-dan { from { opacity: 0; } }
.ct-hop {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(500px, 100%); display: flex; flex-direction: column; gap: 20px;
  padding: 24px 26px 28px; overflow-y: auto; background: #0a0a0d; border-left: 1px solid #25252b;
  box-shadow: -30px 0 90px rgba(0, 0, 0, .6); animation: truot-vao .32s cubic-bezier(.2, .8, .2, 1);
}
@keyframes truot-vao { from { transform: translateX(48px); opacity: 0; } }
.ct-dau { display: flex; align-items: center; gap: 16px; }
.ct-dau img, .ct-dau .anh-trong { width: 64px; height: 64px; flex: none; }
.ct-dau h2 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.3px; }
.ct-dau p { margin: 4px 0 0; color: var(--mo); font-size: 13.5px; }
.ct-dong {
  margin-left: auto; align-self: flex-start; flex: none; width: 38px; height: 38px; border-radius: 11px; border: 1px solid #2b2b32;
  background: #111114; color: var(--chu-phu); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ct-dong:hover { color: var(--chu); border-color: #3a3a42; }
.ct-gia .lon { font: 600 40px/1.05 var(--phong-so); letter-spacing: -.8px; }
.ct-gia .lon small { margin-left: 8px; font: 400 16px var(--phong); letter-spacing: 0; color: var(--mo); }
.ct-gia .doi { margin-top: 6px; font: 400 14.5px var(--phong-so); }
.ct-gia .doi span { margin-left: 6px; color: var(--mo); font-family: var(--phong); }
.ct-gia .quy { margin-top: 8px; color: var(--chu-phu); font: 400 13.5px var(--phong-so); }
.ct-hop .bd { height: 250px; margin: 0; }
.ct-so { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ct-so div { padding: 12px 14px; border-radius: 13px; border: 1px solid var(--vien); background: #0d0d10; }
.ct-so dt { color: var(--mo); font-size: 12.5px; }
.ct-so dd { margin: 4px 0 0; font: 600 16px/1.3 var(--phong-so); }
.ct-nguon { margin: auto 0 0; color: var(--mo); font-size: 12.5px; line-height: 1.6; }
.ct-nguon a { color: var(--chu-phu); }

/* ---------------------------------------------------------------- NGĂN BÊN PHẢI (kiểu TradingView)
   Dải icon luôn bám mép phải; ngăn (Projects / Bases) mở cạnh nó. Màn rộng (≥ 1180px): ngăn ghim sẵn, trang
   chừa chỗ cho nó — bấm › là thu về chỉ còn dải icon (`data-dock="thu"`, nhớ trong trình duyệt). Màn vừa:
   chỉ dải icon, bấm icon thì ngăn NỔI lên trên trang (`data-dock="noi"`). Điện thoại: không dải icon, nút
   thư mục trên thanh trên mở ngăn kín màn. */
:root { --ray: 52px; --ngan: 336px; }
body { padding-right: var(--ray); }
.dock { position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; display: flex; }
.dock-ngan {
  display: none; flex-direction: column; width: var(--ngan); min-height: 0;
  background: #070709; border-left: 1px solid var(--vien);
}
@media (min-width: 1180px) {
  html:not([data-dock="thu"]) body { padding-right: calc(var(--ray) + var(--ngan)); }
  html:not([data-dock="thu"]) .dock-ngan { display: flex; }
}
html[data-dock="noi"] .dock-ngan { display: flex; box-shadow: -40px 0 90px rgba(0, 0, 0, .7); }
.dock-ray {
  width: var(--ray); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0;
  background: #040405; border-left: 1px solid var(--vien);
}
.dock-ray button {
  width: 40px; height: 40px; border-radius: 11px; border: 0; background: none; color: #8f8b82; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: color .15s, background-color .15s;
}
.dock-ray button:hover { color: var(--chu); background: rgba(244, 235, 210, .06); }
.dock-ray button[aria-pressed="true"] { color: var(--vang); background: rgba(246, 195, 82, .1); }
.ray-day { flex: 1; }
[data-gap-dock] svg { transition: transform .2s; }
html[data-dock="thu"] [data-gap-dock] svg { transform: rotate(180deg); }
@media (max-width: 1179px) { html:not([data-dock="noi"]) [data-gap-dock] svg { transform: rotate(180deg); } }
.dock-tab { display: none; }
.nut-o {
  flex: none; width: 34px; height: 34px; border-radius: 10px; border: 0; background: none; color: var(--chu-phu);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none;
  transition: color .15s, background-color .15s;
}
.nut-o:hover { color: var(--chu); background: rgba(244, 235, 210, .07); }
.chi-hep { display: none; }

.ngan { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ngan[hidden] { display: none; }
.ngan-dau { display: flex; align-items: center; gap: 4px; height: 58px; padding: 0 10px 0 18px; border-bottom: 1px solid var(--vien-nhe); }
.ngan-dau h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 700; }
.nhan-nho { color: var(--mo); font-size: 12px; padding-right: 8px; }
.ngan-cuon { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; scrollbar-width: thin; scrollbar-color: #2a2a30 transparent; }
.ngan-chan { padding: 12px 18px 14px; border-top: 1px solid var(--vien-nhe); color: var(--mo); font-size: 12.5px; line-height: 1.55; }
.ngan-chan a { color: var(--vang); }
.nhom-dau { margin: 22px 2px 10px; color: var(--mo); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.nhom-dau[hidden] { display: none; }

/* Projects: lưới ô như hộp Project Manager — ô đầu là "New canvas", mỗi sơ đồ một hình nhỏ vẽ từ chính khối của nó. */
.luoi-du-an { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.o-du-an { display: flex; flex-direction: column; min-width: 0; color: var(--chu); text-decoration: none; }
.o-du-an:hover { color: var(--chu); }
.o-du-an .hinh {
  position: relative; display: block; aspect-ratio: 16 / 10; margin-bottom: 8px; overflow: hidden; border-radius: 10px;
  border: 1px solid #23232a; background-color: #0b0b0e;
  background-image: radial-gradient(rgba(244, 235, 210, .07) 1px, transparent 1px); background-size: 9px 9px;
  transition: border-color .15s, transform .15s;
}
.o-du-an:hover .hinh { border-color: rgba(246, 195, 82, .6); transform: translateY(-1px); }
.o-du-an .hinh > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.o-du-an.moi .hinh { display: flex; align-items: center; justify-content: center; border-style: dashed; border-color: #3a3a42; }
.o-du-an.moi:hover .hinh { border-color: var(--vang); }
.o-du-an .cong {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px;
  background: var(--vang); color: #1a1300; box-shadow: 0 10px 26px -8px rgba(246, 195, 82, .7);
}
.o-du-an b { font-size: 13px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-du-an small { color: var(--mo); font-size: 11.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-du-an.cho .hinh, .o-du-an.cho b, .o-du-an.cho small { color: transparent; }
.o-du-an.cho b, .o-du-an.cho small { background: #131317; border-radius: 4px; }
/* Nút "⋯" ở góc hình nhỏ (Rename · Download · Delete): hiện khi rê chuột / đang mở; máy cảm ứng thì luôn hiện. */
.o-du-an-boc { position: relative; display: flex; flex-direction: column; min-width: 0; }
.o-du-an-them {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 8px; border: 0;
  background: rgba(11, 11, 14, .85); color: var(--chu-phu); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, background-color .15s;
}
.o-du-an-boc:hover .o-du-an-them, .o-du-an-them:focus-visible, .o-du-an-them[aria-expanded="true"] { opacity: 1; }
.o-du-an-them:hover { color: var(--chu); background: #1d1d23; }
@media (hover: none) { .o-du-an-them { opacity: 1; } }
.o-du-an-sua {
  width: 100%; min-width: 0; margin: 0 0 1px; padding: 1px 6px; border: 1px solid var(--vang); border-radius: 6px;
  background: #0f0f12; color: var(--chu); font: 600 13px/1.35 var(--phong); outline: none;
}
.menu-du-an { width: 220px; }
.menu-du-an .nguy, .menu-du-an .nguy:hover { color: var(--giam); }
.menu-du-an .hoi-xoa { margin: 0; padding: 8px 12px 6px; color: var(--chu-phu); font-size: 13px; line-height: 1.45; }
.menu-du-an .hang-nut { display: flex; gap: 6px; padding: 4px 4px 2px; }
.menu-du-an .hang-nut button { text-align: center; }

/* Bases: danh sách kiểu watchlist — nhóm, cột số thẳng hàng; ô dưới cùng là chi tiết dòng đang chọn. */
.cot-base { display: grid; grid-template-columns: minmax(0, 1fr) 34px 34px 42px; align-items: center; gap: 4px; }
.cot-base > :not(:first-child) { text-align: right; }
.dau-cot { padding: 9px 22px 9px 26px; color: var(--mo); font-size: 11.5px; border-bottom: 1px solid var(--vien-nhe); }
[data-ds-base] { padding: 4px 8px 12px; }
.nhom-base { margin: 12px 10px 4px; color: var(--mo); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.dong-base {
  width: 100%; padding: 7px 12px 7px 10px; border: 1px solid transparent; border-radius: 10px; background: none;
  color: var(--chu); font: inherit; text-align: left; cursor: pointer; transition: background-color .12s;
}
.dong-base:hover { background: #111115; }
.dong-base[aria-selected="true"] { border-color: rgba(246, 195, 82, .45); background: #110e07; }
.dong-base .ten { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 13.5px; }
.dong-base .ten span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dong-base .ten svg { flex: none; color: var(--vang); }
.dong-base .so { font: 400 13px var(--phong-so); color: var(--chu-phu); }
.ct-base { border-top: 1px solid var(--vien); padding: 16px 18px 18px; background: #09090b; }
.ct-base:empty { display: none; }
.ct-base-dau { display: flex; align-items: center; gap: 12px; }
.ct-base-dau .bt {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 12px; background: rgba(246, 195, 82, .1); color: var(--vang);
}
.ct-base-dau b { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ct-base-dau span { color: var(--mo); font-size: 12px; }
.ct-base .thanh { display: flex; gap: 3px; height: 6px; margin: 16px 0 7px; }
.ct-base .thanh i { border-radius: 99px; }
.ct-base .thanh i:first-child { background: var(--vang); }
.ct-base .thanh i:last-child { background: var(--ngoc); }
.ct-base .chu-thanh { display: flex; justify-content: space-between; font: 400 12.5px var(--phong-so); color: var(--chu-phu); }
.ct-base dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.ct-base dl div { padding: 9px 11px; border-radius: 10px; background: #0e0e11; border: 1px solid var(--vien); }
.ct-base dt { color: var(--mo); font-size: 11.5px; }
.ct-base dd { margin: 2px 0 0; font: 600 15px var(--phong-so); }
.ct-base .mau-mod {
  margin: 10px 0 0; color: var(--chu-phu); font-size: 12px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ct-base .mau-mod b { color: var(--chu); font-weight: 600; }
.ct-base .nut { margin-top: 14px; }

/* ---------------------------------------------------------------- màn hẹp */
@media (max-width: 759px) {
  body { padding-right: 0; }
  .dock, .dock-ray { display: none; }
  html[data-dock="noi"] .dock { display: flex; left: 0; z-index: 75; }
  html[data-dock="noi"] .dock-ngan { width: 100%; border-left: 0; box-shadow: none; }
  .dock-tab { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--vien-nhe); }
  .dock-tab [role="tab"] {
    height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--vien); background: none;
    color: var(--chu-phu); font: 400 13.5px/1 var(--phong); cursor: pointer;
  }
  .dock-tab [role="tab"][aria-selected="true"] { background: var(--chu); border-color: var(--chu); color: #000; font-weight: 600; }
  .dock-tab .nut-o { margin-left: auto; }
  .chi-hep { display: inline-flex; }
}
@media (max-width: 1180px) {
  .hai-the { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .nut-tim { width: 40px; padding: 0; justify-content: center; }
  .nut-tim span, .nut-tim kbd { display: none; }
}
@media (max-width: 960px) {
  .ba-cot { grid-template-columns: 1fr; }
  .ban-nhiet { height: 520px; }
}
@media (max-width: 760px) {
}
@media (max-width: 560px) {
  .muc { padding-top: 88px; }
  .dau-muc h2 { font-size: 30px; letter-spacing: -.8px; }
  .the-lon { padding: 16px 12px 10px; }
  .bd { height: 260px; }
  .tieu-de-muc { font-size: 24px; }
  .ban-nhiet { height: 480px; border-radius: 14px; }
  .chu-giai i { width: 110px; }
  .ct-hop { padding: 18px 16px 24px; }
  .ct-gia .lon { font-size: 34px; }
}