:root {
  --nen: #0b0c0f;
  --be-mat: #14161b;
  --be-mat-2: #1b1e25;
  --vien: #2a2e38;
  --chu: #eef0f4;
  --chu-mo: #9aa1ad;
  --nhan: #f2484f;
  --nhan-2: #ff6b70;
  --tot: #4ade80;
  --bo: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: radial-gradient(1200px 600px at 20% -10%, #1a1d26 0%, var(--nen) 60%) fixed, var(--nen);
  color: var(--chu);
  font: 15px/1.5 "Be Vietnam Pro", system-ui, sans-serif;
  min-height: 100vh;
}

.dau {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 28px 6px;
}
.logo { font-weight: 700; font-size: 18px; letter-spacing: .2px; display: flex; align-items: center; gap: 10px; }
.cham { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(var(--nhan), #f97316, #facc15, var(--tot), #38bdf8, var(--nhan)); }
.phu { margin: 0; color: var(--chu-mo); font-size: 13px; }

.khung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 28px;
  padding: 12px 28px 40px;
  max-width: 1180px;
  margin: 0 auto;
}

/* ---- sân khấu ---- */
.san { display: flex; flex-direction: column; align-items: center; gap: 14px; position: sticky; top: 12px; align-self: start; }
.vanh {
  position: relative;
  width: min(100%, 560px, calc(78vh * var(--ti-le, 1)));
  aspect-ratio: var(--ti-le, 1);
  border-radius: 50%;
  padding: 14px;
  background: linear-gradient(145deg, #3a3f4b, #121419 60%, #2b2f38);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
#mat {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  background: #000;
  touch-action: none;
  cursor: grab;
}
#mat.dang-keo { cursor: grabbing; }
.tha-vao {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  border: 2px dashed #3b414d;
  color: var(--chu-mo);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tha-vao[hidden] { display: none; }
.tha-vao { background: rgba(0,0,0,.62); backdrop-filter: blur(2px); }
.tha-vao strong { display: block; color: var(--chu); font-size: 18px; margin-bottom: 4px; }
.tha-vao.tren, .tha-vao:hover { border-color: var(--nhan); background: rgba(242,72,79,.06); }
.goi-y { margin: 0; color: var(--chu-mo); font-size: 13px; text-align: center; min-height: 20px; }

/* ---- bảng điều khiển ---- */
.bang {
  background: var(--be-mat);
  border: 1px solid var(--vien);
  border-radius: 20px;
  padding: 16px 18px 20px;
  align-self: start;
}
.buoc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; }
.buoc button {
  background: var(--be-mat-2);
  border: 1px solid var(--vien);
  color: var(--chu-mo);
  border-radius: 12px;
  padding: 8px 4px;
  font: 600 15px/1.2 "Be Vietnam Pro", sans-serif;
  cursor: pointer;
}
.buoc button span { display: block; font-size: 11.5px; font-weight: 500; margin-top: 2px; }
.buoc button.dang { color: var(--chu); border-color: var(--nhan); background: rgba(242,72,79,.12); }

.trang h2 { margin: 4px 0 4px; font-size: 19px; }
.mo { margin: 0 0 14px; color: var(--chu-mo); font-size: 13.5px; }
.nho { display: block; font-size: 12.5px; color: var(--chu-mo); margin: 12px 0 6px; }

.nut {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--vien);
  background: var(--be-mat-2);
  color: var(--chu);
  font: 600 14.5px "Be Vietnam Pro", sans-serif;
  cursor: pointer;
}
.nut:hover { border-color: #3d4350; }
.nut.chinh { background: var(--nhan); border-color: var(--nhan); color: #fff; }
.nut.chinh:hover { background: var(--nhan-2); }
.nut:disabled { opacity: .5; cursor: wait; }

.hang { display: grid; grid-template-columns: 1fr 1.3fr; align-items: center; gap: 10px; margin-top: 12px; font-size: 13.5px; }
.hang label { color: var(--chu-mo); }
input[type=range] { width: 100%; accent-color: var(--nhan); }
input[type=color] { width: 100%; height: 32px; border: 1px solid var(--vien); border-radius: 8px; background: none; padding: 2px; }
select, input[type=text], textarea {
  width: 100%;
  background: var(--be-mat-2);
  color: var(--chu);
  border: 1px solid var(--vien);
  border-radius: 10px;
  padding: 9px 11px;
  font: 14px "Be Vietnam Pro", sans-serif;
}
textarea { resize: vertical; }

/* danh sách thành phần */
.ds-muc { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.muc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--be-mat-2);
  border: 1px solid var(--vien);
  font-size: 13.5px;
  cursor: pointer;
  user-select: none;
}
.muc.chon { border-color: var(--nhan); }
.muc input { accent-color: var(--nhan); margin: 0; }
.muc .ra-ngoai { margin-left: auto; color: #fbbf24; font-size: 11px; }

.chinh-muc { margin-top: 12px; padding: 12px; border-radius: 12px; background: #101217; border: 1px solid var(--vien); }
.chinh-muc:empty { display: none; }
.chinh-muc h3 { margin: 0 0 4px; font-size: 14px; }

/* lưới AI */
.luoi-ai { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.the-ai {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid transparent;
  background: #000;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.the-ai canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.the-ai.chon { border-color: var(--nhan); box-shadow: 0 0 0 3px rgba(242,72,79,.25); }
.the-ai .nhan {
  position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%);
  background: rgba(0,0,0,.65); color: #fff; font-size: 11.5px; padding: 2px 8px; border-radius: 99px; white-space: nowrap;
}
.the-ai.cho { display: grid; place-items: center; color: var(--chu-mo); font-size: 12.5px; border: 1px dashed var(--vien); cursor: default; }
.the-ai.cho::after { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #333; border-top-color: var(--nhan); animation: quay 0.9s linear infinite; position: absolute; top: 34%; }
.the-ai.hong { display: grid; place-items: center; padding: 18%; color: #fca5a5; font-size: 12px; text-align: center; border: 1px dashed #7f1d1d; cursor: default; }
@keyframes quay { to { transform: rotate(360deg); } }

.canh-bao { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(251,191,36,.1); color: #fcd34d; font-size: 13px; }
.trang-thai { margin: 10px 0 0; font-size: 13px; color: var(--chu-mo); min-height: 20px; }
.huong-dan { margin-top: 14px; font-size: 13px; color: var(--chu-mo); }
.huong-dan summary { cursor: pointer; color: var(--chu); }

@media (max-width: 900px) {
  .khung { grid-template-columns: 1fr; padding: 8px 16px 32px; gap: 18px; }
  .dau { padding: 14px 16px 4px; }
  .san { position: static; }
  .vanh { width: min(100%, 420px); padding: 10px; }
  .tha-vao { inset: 10px; }
}

/* ---- bổ sung: chọn đồng hồ, hình dán, chip phong cách, màn vuông ---- */
.vanh.vuong { border-radius: var(--bo-vanh, 22%); }
.vanh.vuong #mat, .vanh.vuong .tha-vao { border-radius: var(--bo-man, 18%); }
.chon-lon { font-size: 15.5px; padding: 11px 12px; }
.thong-so { margin: 10px 0 0; color: var(--chu-mo); font-size: 13px; }
.the-nho { font-size: 11px; font-weight: 600; color: var(--chu-mo); border: 1px solid var(--vien); border-radius: 99px; padding: 1px 8px; vertical-align: middle; }
.dan-dau { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 6px; font-size: 13px; color: var(--chu-mo); }
.nut-nho { font: 600 12.5px "Be Vietnam Pro", sans-serif; color: var(--chu); background: var(--be-mat-2); border: 1px solid var(--vien); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.nut-nho:hover { border-color: #3d4350; }
.nut-nho.xoa { color: #fca5a5; }
.muc img { width: 20px; height: 20px; object-fit: contain; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip-ds { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: 500 12.5px "Be Vietnam Pro", sans-serif;
  color: var(--chu);
  background: var(--be-mat-2);
  border: 1px solid var(--vien);
  border-radius: 99px;
  padding: 5px 11px;
  cursor: pointer;
}
.chip:hover { border-color: #3d4350; }
.chip.chon { background: rgba(242,72,79,.15); border-color: var(--nhan); }
.the-ai.vuong, .the-ai.vuong canvas { border-radius: 16%; }
.the-ai canvas { object-fit: contain; }
.trang a { color: var(--nhan-2); }

/* ---- mã QR ---- */
.khung-qr { margin-top: 14px; padding: 14px; border-radius: 14px; background: #101217; border: 1px solid var(--vien); text-align: center; }
.khung-qr img { width: min(100%, 240px); border-radius: 10px; background: #fff; display: block; margin: 0 auto; image-rendering: pixelated; }
.cach-cai { text-align: left; margin: 10px 0 0; padding-left: 20px; font-size: 13px; color: var(--chu-mo); }
.cach-cai li { margin: 4px 0; }
.cach-cai strong { color: var(--chu); }

/* ---- logo & chọn ngôn ngữ ---- */
.dau { align-items: center; }
.logo { text-decoration: none; color: var(--chu); gap: 10px; }
.logo img { display: block; border-radius: 9px; }
.chu-logo { font: 800 20px/1 "Be Vietnam Pro", sans-serif; letter-spacing: -0.4px; }
.chu-logo b {
  font-weight: 800;
  background: linear-gradient(90deg, #f2484f, #f97316 40%, #facc15 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ngon-ngu { margin-left: auto; display: flex; background: var(--be-mat); border: 1px solid var(--vien); border-radius: 99px; padding: 3px; }
.ngon-ngu button {
  font: 600 12.5px "Be Vietnam Pro", sans-serif;
  color: var(--chu-mo);
  background: none;
  border: 0;
  border-radius: 99px;
  padding: 5px 12px;
  cursor: pointer;
}
.ngon-ngu button.dang { background: var(--nhan); color: #fff; }
@media (max-width: 560px) { .dau .phu { display: none; } }

/* ---- thư viện icon ---- */
.luoi-icon { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; max-height: 190px; overflow-y: auto; padding: 2px; }
.o-icon {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 7px;
  border-radius: 10px;
  background: var(--be-mat-2);
  border: 1px solid var(--vien);
  color: inherit;
  cursor: pointer;
}
.o-icon:hover { border-color: #3d4350; }
.o-icon.chon { border-color: var(--nhan); box-shadow: 0 0 0 2px rgba(242,72,79,.25); }
.o-icon svg, .o-icon canvas, .o-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.o-icon.tai { font: 600 20px/1 "Be Vietnam Pro", sans-serif; color: var(--chu-mo); border-style: dashed; }

/* ---- hướng dẫn cài có ảnh ---- */
.hd-cai ol { padding-left: 20px; margin: 10px 0 0; }
.hd-cai li { margin: 0 0 14px; line-height: 1.55; }
.hd-cai b { color: var(--chu); }
.hang-anh { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.hang-anh img, .anh-buoc { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--vien); display: block; }
.anh-buoc { margin: 10px 0; max-width: 320px; }
.video-hd { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--chu) !important; text-decoration: none; font-size: 13px; }
.video-nut { width: 26px; height: 26px; border-radius: 50%; background: var(--nhan); color: #fff; display: grid; place-items: center; font-size: 11px; }

/* ---- mua mã cài đặt ---- */
.khoi-mua { margin-top: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--vien); background: #101217; }
.khoi-mua .mo { margin-bottom: 4px; }
.khoi-mua #nutMua { text-decoration: none; margin-top: 8px; }
.goi-y-mua { margin: 8px 0 0; }
.chu-thich-thu { margin: 4px 0 0; padding: 9px 12px; border-radius: 10px; background: rgba(250,204,21,.08); border: 1px solid rgba(250,204,21,.25); color: #fde68a; font-size: 13px; }
#khungQR #taoLai { margin-top: 10px; }