/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   KHUNG TRANG TRÍ VIEWER — giao diện trang cấu hình trong admin.
   Đi kèm public/admin/js/trangTri.js. Bốn mốc responsive: ≥1024 · 768–1023 · 481–767 · ≤480.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

#page-trang-tri {
  --tt-vien: #e2e8f0;
  --tt-nen: #fff;
  --tt-nen2: #f8fafc;
  --tt-chu: #0f172a;
  --tt-chu2: #475569;
  --tt-chu3: #94a3b8;
  --tt-tim: #6366f1;
  --tt-tim2: #8b5cf6;
}

/* ───────────────────────────── Bố cục 2 cột ───────────────────────────── */
.tt-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.tt-ds,
.tt-soan {
  background: var(--tt-nen);
  border: 1px solid var(--tt-vien);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
  overflow: hidden;
}

.tt-ds { position: sticky; top: 12px; }

/* ───────────────────────────── Danh sách bộ khung ───────────────────────────── */
.tt-ds-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tt-vien);
  background: linear-gradient(180deg, #fafbff, #f8fafc);
}
.tt-ds-dau h3 {
  margin: 0;
  font-size: .82rem;
  font-weight: 800;
  color: var(--tt-chu);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tt-ds-dau h3 i.fas { color: var(--tt-tim); }
.tt-dem {
  background: #eef2ff;
  color: #4338ca;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .68rem;
  font-weight: 700;
}

.tt-ds-list { max-height: calc(100vh - 220px); overflow: auto; padding: 8px; }

.tt-the {
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.tt-the:hover { background: #f8fafc; }
.tt-the:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }
.tt-the.chon { background: #eef2ff; border-color: #c7d2fe; }
.tt-the.tat { opacity: .58; }

.tt-the-anh {
  flex: 0 0 64px;
  height: 38px;
  border-radius: 10px;
  background: repeating-conic-gradient(#f1f5f9 0% 25%, #e2e8f0 0% 50%) 50% / 12px 12px;
  border: 1px solid var(--tt-vien);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--tt-chu3);
}
.tt-the-anh { position: relative; }
/* Ô "bo" = cả bộ khung xếp lại bé xíu: mỗi lớp đặt đúng chỗ của nó trong khung 16:9. */
.tt-the-anh.bo { background: var(--tt-nenthe, repeating-conic-gradient(#f1f5f9 0% 25%, #e2e8f0 0% 50%) 50% / 8px 8px); }
.tt-the-anh.bo img {
  position: absolute;
  object-fit: fill;              /* hộp đã tính đúng tỉ lệ ảnh rồi, fill mới khớp trang thật */
  transform-origin: center;
}

.tt-the-than { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tt-the-ten {
  font-weight: 700;
  font-size: .78rem;
  color: var(--tt-chu);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-the-pv {
  font-size: .68rem;
  color: var(--tt-chu2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-the-pv em { color: var(--tt-chu3); font-style: normal; }
.tt-the-nhan { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tt-nhan {
  font-style: normal;
  font-size: .62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.5;
}
.tt-nhan.on { background: #d1fae5; color: #047857; }
.tt-nhan.off { background: #f1f5f9; color: #64748b; }
.tt-nhan.hat { background: #ede9fe; color: #6d28d9; }
.tt-nhan.doc { background: #fef9c3; color: #a16207; }

/* ───────────────────────────── Khu soạn ───────────────────────────── */
.tt-soan-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tt-vien);
  background: linear-gradient(180deg, #fafbff, #f8fafc);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(16px);
}
.tt-soan-ten { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 0; }
.tt-soan-nut { display: flex; gap: 8px; }

.tt-ip {
  border: 1.5px solid var(--tt-vien);
  border-radius: 10px;
  padding: 7px 11px;
  font: inherit;
  font-size: .76rem;
  color: var(--tt-chu);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  min-width: 0;
}
.tt-ip:focus {
  outline: 0;
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}
.tt-ip-ten { font-weight: 700; font-size: .84rem; flex: 1 1 auto; }

.tt-cot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  padding: 16px;
  align-items: start;
}
.tt-trai { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tt-phai { position: sticky; top: 74px; min-width: 0; }

/* ───────────────────────────── Ô cấu hình ───────────────────────────── */
.tt-o {
  border: 1px solid var(--tt-vien);
  border-radius: 14px;
  padding: 14px;
  background: var(--tt-nen2);
}
.tt-o h4 {
  margin: 0 0 12px;
  font-size: .78rem;
  font-weight: 800;
  color: var(--tt-chu);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tt-o h4 > i.fas { color: var(--tt-tim); }
.tt-tuychon, .tt-batbuoc {
  font-style: normal;
  font-size: .6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: auto;
}
.tt-tuychon { background: #f1f5f9; color: #64748b; }
.tt-batbuoc { background: #fee2e2; color: #b91c1c; }

.tt-nho { font-size: .68rem; color: var(--tt-chu3); }
.tt-mach {
  margin: 10px 0 0;
  font-size: .67rem;
  color: var(--tt-chu2);
  background: #eef2ff;
  border-left: 3px solid #a5b4fc;
  border-radius: 0 8px 8px 0;
  padding: 7px 10px;
  line-height: 1.55;
}
.tt-mach-tren { margin: 0 0 12px; }
.tt-mach i.fas { color: var(--tt-tim); margin-right: 4px; }
.tt-mach code { background: #e0e7ff; border-radius: 4px; padding: 1px 4px; font-size: .95em; }

/* ── Ô chọn kiểu radio dạng thẻ ── */
.tt-chon-doi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tt-chon-doi.ba { grid-template-columns: repeat(3, 1fr); }
.tt-rad {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1.5px solid var(--tt-vien);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tt-rad:hover { border-color: #c7d2fe; transform: translateY(-1px); }
.tt-rad.chon { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99, 102, 241, .1); background: #f5f6ff; }
.tt-rad input { position: absolute; opacity: 0; pointer-events: none; }
.tt-rad:focus-within { box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }
.tt-rad b { font-size: .74rem; font-weight: 700; color: var(--tt-chu); display: flex; align-items: center; gap: 6px; }
.tt-rad span { font-size: .65rem; color: var(--tt-chu3); line-height: 1.45; }
.tt-rad.nho { padding: 8px 10px; }
.tt-rad.nho b { font-size: .7rem; }

/* ── Công tắc gạt ── */
.tt-gat { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; }
.tt-gat.hang { margin-top: 4px; }
.tt-gat input { position: absolute; opacity: 0; pointer-events: none; }
.tt-gat > span {
  width: 38px;
  height: 21px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  transition: background .18s ease;
  flex-shrink: 0;
}
.tt-gat > span::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.tt-gat input:checked + span { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.tt-gat input:checked + span::after { transform: translateX(17px); }
.tt-gat input:focus-visible + span { box-shadow: 0 0 0 3px rgba(99, 102, 241, .22); }
.tt-gat em { font-style: normal; font-size: .7rem; font-weight: 600; color: var(--tt-chu2); }
.tt-gat.nho { margin-left: auto; }

/* ── Danh sách phòng ── */
.tt-phong { margin-top: 12px; transition: opacity .18s ease; }
.tt-phong.mo { opacity: .4; pointer-events: none; }
.tt-phong-dau { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tt-phong-dau .tt-ip { flex: 1 1 180px; }
.tt-dem-chon {
  font-size: .66rem;
  font-weight: 700;
  color: #4338ca;
  background: #eef2ff;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.tt-lien {
  background: none;
  border: 0;
  padding: 3px 6px;
  border-radius: 7px;
  font: inherit;
  font-size: .68rem;
  font-weight: 600;
  color: var(--tt-tim);
  cursor: pointer;
  transition: background .15s ease;
}
.tt-lien:hover { background: #eef2ff; }
.tt-lien:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }
.tt-lien.nguy { color: #dc2626; }
.tt-lien.nguy:hover { background: #fee2e2; }

.tt-phong-ds {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--tt-vien);
  border-radius: 11px;
  background: #fff;
}
.tt-phong-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background .12s ease;
}
.tt-phong-item:last-child { border-bottom: 0; }
.tt-phong-item:hover { background: #f8fafc; }
.tt-phong-item.chon { background: #f5f6ff; }
.tt-phong-item input { width: 16px; height: 16px; accent-color: #6366f1; cursor: pointer; }
.tt-phong-ten {
  font-size: .73rem;
  font-weight: 600;
  color: var(--tt-chu);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-phong-nh { font-size: .64rem; color: var(--tt-chu3); white-space: nowrap; }
.tt-phong-link {
  font-size: .62rem;
  font-weight: 700;
  color: #047857;
  background: #d1fae5;
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
}
.tt-phong-link.khong { color: #92400e; background: #fef3c7; }

/* ── Vùng tải ảnh ── */
.tt-tai {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.tt-tai.keo { border-color: var(--tt-tim); background: #eef2ff; }
.tt-tai.co { display: flex; gap: 12px; padding: 11px; border-style: solid; border-color: var(--tt-vien); }
.tt-tai-trong {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 24px 16px;
  cursor: pointer;
  text-align: center;
}
.tt-tai-trong i.fas { color: #cbd5e1; }
.tt-tai-trong b { font-size: .74rem; color: var(--tt-chu2); }
.tt-tai-trong span { font-size: .65rem; color: var(--tt-chu3); }
.tt-tai-xem {
  flex: 0 0 96px;
  height: 72px;
  border-radius: 9px;
  background: repeating-conic-gradient(#f1f5f9 0% 25%, #e2e8f0 0% 50%) 50% / 12px 12px;
  border: 1px solid var(--tt-vien);
  overflow: hidden;
}
.tt-tai-xem img { width: 100%; height: 100%; object-fit: contain; }
.tt-tai-tin { display: flex; flex-direction: column; gap: 3px; min-width: 0; justify-content: center; }
.tt-tai-tin b { font-size: .74rem; color: var(--tt-chu); }
.tt-tai-tin > span {
  font-size: .64rem;
  color: var(--tt-chu3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-tai-nut { display: flex; gap: 2px; flex-wrap: wrap; margin-top: 3px; }

/* ── Cách đặt khung + lề ── */
.tt-vua, .tt-le { margin-top: 12px; }
.tt-vua > label, .tt-le > label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  color: var(--tt-chu2);
  margin-bottom: 7px;
}
.tt-le > label em { font-weight: 500; color: var(--tt-chu3); font-style: normal; }
.tt-vua-ds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tt-le-ds { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
.tt-le-o {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nhan nhan" "so dv";
  align-items: center;
  column-gap: 4px;
  background: #fff;
  border: 1.5px solid var(--tt-vien);
  border-radius: 10px;
  padding: 5px 8px 6px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tt-le-o:focus-within { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.tt-le-o > span {
  grid-area: nhan;
  font-size: .6rem; font-weight: 700; color: var(--tt-chu3); line-height: 1.35;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tt-le-o > i { grid-area: dv; font-style: normal; font-size: .62rem; color: var(--tt-chu3); }
.tt-le-ip {
  grid-area: so;
  border: 0 !important; padding: 0 !important; box-shadow: none !important;
  width: 100%; min-width: 0; text-align: left;
  font-size: .78rem; font-weight: 700; color: var(--tt-chu);
}
/* Bỏ nút tăng/giảm mặc định — chúng ăn mất chỗ của con số trong ô hẹp. */
.tt-le-ip::-webkit-outer-spin-button,
.tt-le-ip::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tt-le-ip[type=number] { -moz-appearance: textfield; appearance: textfield; }
.tt-le-ip:focus { box-shadow: none !important; }

/* ── Màu nền ── */
.tt-mau-hang { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.tt-mau-hang > label { font-size: .7rem; font-weight: 700; color: var(--tt-chu2); }
.tt-mau-hang input[type=color] {
  width: 44px;
  height: 30px;
  border: 1.5px solid var(--tt-vien);
  border-radius: 9px;
  padding: 2px;
  background: #fff;
  cursor: pointer;
}
.tt-mau-hang code {
  font-size: .68rem;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 3px 7px;
  color: var(--tt-chu2);
}

/* ── Hiệu ứng rơi ── */
.tt-hat { transition: opacity .18s ease; }
.tt-hat.mo { opacity: .4; pointer-events: none; }
.tt-hat-ds { display: flex; flex-direction: column; gap: 8px; }
.tt-hat-item {
  display: grid;
  grid-template-columns: 52px repeat(2, minmax(0, 1fr)) 32px;
  gap: 9px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--tt-vien);
  border-radius: 11px;
  padding: 8px 10px;
}
.tt-hat-xem {
  width: 52px;
  height: 46px;
  border-radius: 8px;
  background: repeating-conic-gradient(#f1f5f9 0% 25%, #e2e8f0 0% 50%) 50% / 10px 10px;
  border: 1px solid var(--tt-vien);
  overflow: hidden;
}
.tt-hat-xem img { width: 100%; height: 100%; object-fit: contain; }
.tt-hat-so { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tt-hat-so > span { font-size: .62rem; font-weight: 700; color: var(--tt-chu3); }
.tt-hat-so .tt-ip { width: 100%; padding: 5px 8px; font-size: .72rem; }
.tt-hat-so > i { display: none; }
.tt-hat-them { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

.tt-hat-cf { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.tt-cf-o > label, .tt-cf-luoi > label { font-size: .7rem; font-weight: 700; color: var(--tt-chu2); }
.tt-den { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 7px; }
.tt-cf-luoi { display: flex; flex-direction: column; gap: 9px; }
.tt-thanh { display: flex; flex-direction: column; gap: 4px; }
.tt-thanh > span { font-size: .68rem; font-weight: 600; color: var(--tt-chu2); display: flex; justify-content: space-between; }
.tt-thanh > span b { color: var(--tt-tim); }
.tt-thanh input[type=range] { width: 100%; accent-color: #6366f1; cursor: pointer; }

/* ───────────────────────────── Xem trước ───────────────────────────── */
.tt-o-xt { background: #fff; }
.tt-xt-may { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.tt-may {
  border: 1.5px solid var(--tt-vien);
  border-radius: 10px;
  background: #fff;
  padding: 7px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: border-color .15s ease, background .15s ease;
}
.tt-may:hover { border-color: #c7d2fe; }
.tt-may.chon { border-color: #818cf8; background: #f5f6ff; box-shadow: 0 0 0 3px rgba(99, 102, 241, .1); }
.tt-may:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99, 102, 241, .22); }
.tt-may b { font-size: .7rem; font-weight: 700; color: var(--tt-chu); }
.tt-may span { font-size: .6rem; color: var(--tt-chu3); }

.tt-xt-khay {
  display: flex;
  justify-content: center;
  align-items: center;
  background: repeating-conic-gradient(#f8fafc 0% 25%, #eef2f7 0% 50%) 50% / 16px 16px;
  border: 1px solid var(--tt-vien);
  border-radius: 12px;
  padding: 12px;
  min-height: 200px;
}
.tt-xt {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--tt-mau, #0f172a);
  box-shadow: 0 6px 24px -8px rgba(15, 23, 42, .4);
  /* ⚠ PHẢI có flex-shrink:0. Đây là flex item, mặc định co được, nên khi khay hẹp hơn khổ máy đang
     xem trước thì nó bị BÓP NGANG — đo thật ra 325×195 (tỉ lệ 1,667) trong khi khổ 1600×900 phải là
     1,778. Mấy lớp bên trong lại đặt theo hệ số chưa bóp nên lòi ra, xem trước hoá sai. */
  flex-shrink: 0;
}
.tt-xt-nen { position: absolute; inset: 0; overflow: hidden; }
.tt-xt-nen i {
  position: absolute;
  inset: -14%;
  display: block;
  background-position: center;
  background-size: cover;
  filter: blur(22px) saturate(1.8) brightness(.68);
  transform: scale(1.2);
}
.tt-xt-noidung {
  position: absolute;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, .5), 0 0 0 4px rgba(99, 102, 241, .16);
}
.tt-xt-gia { padding: 7px; display: flex; flex-direction: column; gap: 4px; height: 100%; }
.tt-xt-thanh { height: 9px; border-radius: 4px; background: linear-gradient(90deg, #6366f1, #8b5cf6); width: 55%; }
.tt-xt-dong { height: 5px; border-radius: 3px; background: #e2e8f0; }
.tt-xt-dong.ngan { width: 62%; }
.tt-xt-khoi { flex: 1; min-height: 12px; border-radius: 5px; background: #f1f5f9; }
.tt-xt-gia em {
  font-style: normal;
  font-size: .52rem;
  color: #94a3b8;
  text-align: center;
  font-weight: 700;
  letter-spacing: .04em;
}
.tt-xt-khung { position: absolute; display: block; }
.tt-xt-hat { position: absolute; inset: 0; pointer-events: none; }

.tt-xt-so { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.tt-so-o { font-size: .67rem; color: var(--tt-chu2); }
.tt-so-o i.fas { color: var(--tt-tim); margin-right: 4px; }
.tt-so-o b { color: var(--tt-chu); }
.tt-canh {
  font-size: .67rem;
  color: #92400e;
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  padding: 7px 10px;
  line-height: 1.5;
}
.tt-canh i.fas { color: #d97706; margin-right: 4px; }

/* ── Thử filter link ── */
.tt-thu { margin-top: 14px; border-top: 1px solid var(--tt-vien); padding-top: 12px; }
.tt-thu > label { font-size: .7rem; font-weight: 700; color: var(--tt-chu2); display: block; margin-bottom: 6px; }
.tt-thu-hang { display: flex; gap: 7px; }
.tt-thu-hang .tt-ip { flex: 1; min-width: 0; }
.tt-thu-kq:not(:empty) { margin-top: 9px; font-size: .68rem; line-height: 1.55; }
.tt-thu-ok, .tt-thu-khong, .tt-thu-xau { display: block; border-radius: 9px; padding: 8px 11px; }
.tt-thu-ok { background: #d1fae5; color: #065f46; }
.tt-thu-khong { background: #f1f5f9; color: #475569; }
.tt-thu-xau { background: #fee2e2; color: #991b1b; }
.tt-thu-kq em { display: block; font-style: normal; opacity: .78; margin-top: 3px; font-size: .95em; }
.tt-thu-kq span { opacity: .8; }

/* ───────────────────────────── Nền quanh khung ───────────────────────────── */
.tt-nen-ds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tt-nen-ds .tt-rad:first-child { grid-column: 1 / -1; border-color: #c7d2fe; }
.tt-nen-ds .tt-rad:first-child.chon { border-color: #6366f1; }
.tt-nen-ds .tt-rad b i.fas { color: var(--tt-tim); }

/* Khung động */
.tt-nhan.dong { background: #cffafe; color: #0e7490; }
.tt-dong {
  font-style: normal;
  font-size: .62rem;
  font-weight: 700;
  background: #cffafe;
  color: #0e7490;
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 4px;
}

/* ───────────────────────────── Kho ảnh ───────────────────────────── */
.tt-o-kho { margin-top: 14px; background: #fff; }
.tt-kho-so {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: .7rem;
  color: var(--tt-chu2);
  margin-bottom: 10px;
}
.tt-kho-so b { color: var(--tt-chu); }
.tt-kho-thua { color: #92400e; background: #fef3c7; border-radius: 999px; padding: 3px 9px; font-weight: 600; }
.tt-kho-thua b { color: #78350f; }
.tt-kho-sach { color: #047857; background: #d1fae5; border-radius: 999px; padding: 3px 9px; font-weight: 600; }
.tt-o-kho .btn { width: 100%; justify-content: center; }

/* Ô nội dung ở chế độ "hoà làm một": để trong suốt cho thấy nền chạy xuyên qua,
   nhưng vẫn giữ viền sáng để người dùng biết ranh giới ô nằm ở đâu. */
.tt-xt-noidung.hoa { background: transparent; }
.tt-xt-noidung.hoa .tt-xt-khoi { background: rgba(255, 255, 255, .42); }
.tt-xt-noidung.hoa .tt-xt-dong { background: rgba(255, 255, 255, .6); }

/* Băng cảnh báo tệp ảnh đã biến mất khỏi máy chủ */
.tt-bao-mat {
  margin: 12px 16px 0;
  padding: 10px 13px;
  border-radius: 10px;
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  color: #92400e;
  font-size: .7rem;
  line-height: 1.55;
}
.tt-bao-mat i.fas { color: #d97706; margin-right: 5px; }
[data-theme="dark"] .tt-bao-mat { background: #3f2d0a; color: #fde68a; }

/* ───────────────────────────── Trạng thái trống ───────────────────────────── */
.tt-trong {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 36px 20px;
  text-align: center;
  color: var(--tt-chu2);
}
.tt-trong i.fas { color: #cbd5e1; }
.tt-trong p { margin: 0; font-size: .75rem; }
.tt-trong-lon { padding: 72px 24px; }
.tt-trong-nho { padding: 20px 14px; }
.tt-trong-nho p { font-size: .68rem; color: var(--tt-chu3); }

/* ───────────────────────────── Chế độ tối ───────────────────────────── */
[data-theme="dark"] #page-trang-tri {
  --tt-vien: #334155;
  --tt-nen: #1e293b;
  --tt-nen2: #172033;
  --tt-chu: #f1f5f9;
  --tt-chu2: #cbd5e1;
  --tt-chu3: #94a3b8;
}
[data-theme="dark"] .tt-ds-dau,
[data-theme="dark"] .tt-soan-dau { background: linear-gradient(180deg, #1b2537, #172033); }
[data-theme="dark"] .tt-the:hover { background: #172033; }
[data-theme="dark"] .tt-the.chon { background: #262f4a; border-color: #4f46e5; }
[data-theme="dark"] .tt-ip,
[data-theme="dark"] .tt-rad,
[data-theme="dark"] .tt-le-o,
[data-theme="dark"] .tt-phong-ds,
[data-theme="dark"] .tt-hat-item,
[data-theme="dark"] .tt-tai,
[data-theme="dark"] .tt-may,
[data-theme="dark"] .tt-o-xt { background: #1e293b; color: var(--tt-chu); }
[data-theme="dark"] .tt-rad.chon,
[data-theme="dark"] .tt-may.chon { background: #262f4a; }
[data-theme="dark"] .tt-phong-item { border-bottom-color: #253147; }
[data-theme="dark"] .tt-phong-item:hover { background: #172033; }
[data-theme="dark"] .tt-phong-item.chon { background: #262f4a; }
[data-theme="dark"] .tt-mach { background: #1f2a44; color: #c7d2fe; border-left-color: #6366f1; }
[data-theme="dark"] .tt-mach code { background: #312e81; }
[data-theme="dark"] .tt-dem, [data-theme="dark"] .tt-dem-chon { background: #312e81; color: #c7d2fe; }
[data-theme="dark"] .tt-xt-khay { background: #0f172a; }
[data-theme="dark"] .tt-xt-noidung { background: #1e293b; }
[data-theme="dark"] .tt-xt-dong { background: #334155; }
[data-theme="dark"] .tt-xt-khoi { background: #253147; }
[data-theme="dark"] .tt-nhan.off { background: #253147; color: #94a3b8; }
[data-theme="dark"] .tt-thu-khong { background: #253147; color: #cbd5e1; }
[data-theme="dark"] .tt-mau-hang code { background: #253147; }
[data-theme="dark"] .tt-o-kho { background: #1e293b; }
[data-theme="dark"] .tt-nhan.dong, [data-theme="dark"] .tt-dong { background: #164e63; color: #a5f3fc; }

/* ───────────────────────────── Responsive ───────────────────────────── */
/* Máy bảng: xem trước xuống dưới, danh sách hẹp lại */
@media (max-width: 1279px) {
  .tt-cot { grid-template-columns: minmax(0, 1fr); }
  .tt-phai { position: static; }
  .tt-xt-may { max-width: 420px; }
}
@media (max-width: 1023px) {
  .tt-layout { grid-template-columns: minmax(0, 1fr); }
  .tt-ds { position: static; }
  .tt-ds-list { max-height: 300px; }
  .tt-hat-cf { grid-template-columns: 1fr; }
}
/* Điện thoại lớn */
@media (max-width: 767px) {
  .tt-layout { gap: 12px; }
  .tt-cot { padding: 12px; gap: 12px; }
  .tt-o { padding: 12px; border-radius: 12px; }
  .tt-chon-doi, .tt-chon-doi.ba, .tt-vua-ds { grid-template-columns: 1fr; }
  .tt-nen-ds { grid-template-columns: 1fr; }
  .tt-phong-item { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .tt-phong-nh { display: none; }
  .tt-hat-item { grid-template-columns: 44px minmax(0, 1fr) 30px; }
  .tt-hat-item .tt-hat-so:nth-of-type(2) { grid-column: 2 / 3; }
}
/* Điện thoại nhỏ: nút chỉ còn biểu tượng */
@media (max-width: 480px) {
  .tt-an-xs { display: none; }
  .tt-soan-dau { padding: 10px 12px; }
  .tt-soan-ten { flex: 1 1 100%; }
  .tt-soan-nut { width: 100%; }
  .tt-soan-nut .btn { flex: 1; min-height: 36px; }
  .tt-ds-dau { padding: 12px; }
  .tt-ds-dau .btn { min-height: 34px; min-width: 34px; }
  .tt-the-anh { flex-basis: 54px; height: 32px; }
  .tt-xt-may { grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
  .tt-may span { display: none; }
  .tt-may b { font-size: .66rem; }
  .tt-xt-khay { padding: 8px; min-height: 160px; }
  .tt-trong-lon { padding: 40px 16px; }
  .tt-o h4 { font-size: .74rem; }
  .tt-thu-hang { flex-direction: column; }
  .tt-thu-hang .btn { min-height: 36px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   TRÌNH SẮP XẾP KÉO-THẢ
   Một khung màn hình thu nhỏ đúng tỉ lệ máy thật. Kéo ảnh để đổi chỗ, kéo góc để đổi cỡ, kéo núm
   trên để xoay. Mỗi thiết bị giữ một bộ số riêng.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */
.tt-than { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.tt-than > .tt-cot { padding: 0; }

.tt-sx-chedo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.tt-sx-tb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tt-sx-tb .tt-may { flex: 0 0 auto; min-width: 104px; }
.tt-sx-mach { font-size: .66rem; color: var(--tt-chu2); margin-left: auto; }
.tt-sx-mach i.fas { color: var(--tt-tim); margin-right: 4px; }

.tt-sx-than { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }

/* ── Khung màn hình ── */
.tt-sx-khay {
  display: flex;
  justify-content: center;
  align-items: center;
  background: repeating-conic-gradient(#f8fafc 0% 25%, #eef2f7 0% 50%) 50% / 16px 16px;
  border: 1px solid var(--tt-vien);
  border-radius: 12px;
  padding: 22px;   /* >= 10 (mép kẹp) + 6 (tay nắm thò ra) + dư, kẻo tay nắm bị cắt */
  min-height: 260px;
  overflow: hidden;   /* chặn cứng: không cho viền chọn tràn ra các bảng bên cạnh */
}
.tt-sx-hop { position: relative; flex-shrink: 0; }
.tt-sx-man {
  position: relative;
  flex-shrink: 0;                     /* ⚠ flex item mặc định co được → khay bị bóp ngang, méo tỉ lệ */
  overflow: hidden;
  border-radius: 8px;
  background: var(--tt-mau, #0f172a);
  box-shadow: 0 6px 26px -10px rgba(15, 23, 42, .45);
  touch-action: none;                 /* kéo bằng ngón tay không bị trình duyệt cướp mất để cuộn */
  -webkit-user-select: none;
  user-select: none;
}
.tt-sx-anh {
  position: absolute;
  display: block;
  transform-origin: center center;
  cursor: grab;
}
.tt-sx-anh:active { cursor: grabbing; }
.tt-sx-hat { position: absolute; inset: 0; pointer-events: none; }

/* Ô nội dung — kéo được, có nhãn để không nhầm với lớp ảnh */
/* ⚠ Ô nội dung nằm CHÍNH GIỮA khung nên nó che mất ảnh bên dưới — bấm vào ảnh lại trúng ô này.
   ⇒ Phần thân KHÔNG bắt chuột, chỉ nhãn và 4 góc mới bắt. Nhờ vậy bấm giữa khung là chọn được lớp
   ảnh, mà vẫn kéo/chỉnh ô nội dung được qua nhãn và góc. */
.tt-sx-ond {
  position: absolute;
  border: 1.5px dashed rgba(99, 102, 241, .95);
  background: rgba(99, 102, 241, .08);
  border-radius: 4px;
  pointer-events: none;
}
.tt-sx-ond-nhan {
  position: absolute;
  left: 50%; top: 8px;
  transform: translateX(-50%);
  font-size: .58rem;
  font-weight: 700;
  color: #4338ca;
  background: rgba(255, 255, 255, .88);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  pointer-events: auto;
  cursor: move;
  box-shadow: 0 1px 4px rgba(15,23,42,.18);
}

/* Viền + tay nắm của lớp đang chọn */
/* Viền bị kẹp = ảnh còn tràn ra ngoài khung; vẽ nét đứt cho biết đó không phải mép thật. */
.tt-sx-vien.kep { border-style: dashed; }
.tt-sx-vien {
  position: absolute;
  border: 1.5px solid #f59e0b;
  border-radius: 3px;
  pointer-events: none;
  transform-origin: center center;
}
.tt-sx-tay {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 3px;
  background: #fff;
  border: 1.5px solid #f59e0b;
  pointer-events: auto;
  cursor: nwse-resize;
}
.tt-sx-ond .tt-sx-tay { border-color: #6366f1; }
.tt-sx-tay[data-goc="tl"], .tt-sx-tay[data-ond="tl"] { left: -6px; top: -6px; }
.tt-sx-tay[data-goc="tr"], .tt-sx-tay[data-ond="tr"] { right: -6px; top: -6px; cursor: nesw-resize; }
.tt-sx-tay[data-goc="bl"], .tt-sx-tay[data-ond="bl"] { left: -6px; bottom: -6px; cursor: nesw-resize; }
.tt-sx-tay[data-goc="br"], .tt-sx-tay[data-ond="br"] { right: -6px; bottom: -6px; }
.tt-sx-xoay {
  position: absolute;
  left: 50%; top: -30px;
  transform: translateX(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #f59e0b;
  pointer-events: auto;
  cursor: grab;
  display: flex; align-items: center; justify-content: center;
}
.tt-sx-xoay b { width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; }
.tt-sx-xoay::after {
  content: "";
  position: absolute; left: 50%; top: 100%;
  width: 1.5px; height: 12px; background: #f59e0b; transform: translateX(-50%);
}

/* ── Danh sách lớp ── */
.tt-sx-ds { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tt-sx-ds-dau { display: flex; align-items: center; gap: 8px; }
.tt-sx-ds-dau > b { font-size: .74rem; color: var(--tt-chu); display: flex; align-items: center; gap: 6px; }
.tt-sx-ds-dau .btn { margin-left: auto; }
.tt-sx-ds-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow: auto; }
.tt-sx-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1.5px solid var(--tt-vien);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.tt-sx-item:hover { border-color: #c7d2fe; }
.tt-sx-item.chon { border-color: #f59e0b; background: #fffbeb; }
.tt-sx-xem {
  width: 38px; height: 34px; border-radius: 7px; overflow: hidden;
  background: repeating-conic-gradient(#f1f5f9 0% 25%, #e2e8f0 0% 50%) 50% / 9px 9px;
  border: 1px solid var(--tt-vien);
}
.tt-sx-xem img { width: 100%; height: 100%; object-fit: contain; }
.tt-sx-tin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tt-sx-ten { padding: 3px 6px !important; font-size: .7rem; font-weight: 600; }
.tt-sx-nho { font-size: .6rem; color: var(--tt-chu3); }
.tt-sx-tb3 { display: flex; gap: 3px; }
.tt-sx-cham {
  width: 24px; height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--tt-vien);
  background: #f8fafc;
  color: var(--tt-chu3);
  font-size: .56rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tt-sx-cham.on { background: #d1fae5; border-color: #6ee7b7; color: #047857; }
.tt-sx-cham:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99, 102, 241, .2); }
.tt-sx-nut { display: flex; gap: 1px; }

/* ── Thông số lớp đang chọn ── */
.tt-sx-ts {
  border: 1px solid var(--tt-vien);
  border-radius: 11px;
  padding: 11px;
  background: #fffdf7;
  display: flex; flex-direction: column; gap: 9px;
}
.tt-sx-ts-dau { font-size: .74rem; color: var(--tt-chu); }
.tt-sx-ts-dau em { font-style: normal; font-size: .66rem; color: var(--tt-chu3); }
.tt-sx-dat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.tt-sx-dat .tt-rad { padding: 6px 4px; align-items: center; }
.tt-sx-dat .tt-rad b { font-size: .64rem; }
.tt-sx-so4 { grid-template-columns: repeat(4, 1fr) !important; }
.tt-sx-so { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 12px; }

[data-theme="dark"] .tt-sx-khay { background: #0f172a; }
[data-theme="dark"] .tt-sx-item { background: #1e293b; }
[data-theme="dark"] .tt-sx-item.chon { background: #3a2f12; }
[data-theme="dark"] .tt-sx-ts { background: #241f11; }
[data-theme="dark"] .tt-sx-cham { background: #172033; }
[data-theme="dark"] .tt-sx-cham.on { background: #064e3b; border-color: #047857; color: #6ee7b7; }

@media (max-width: 1279px) {
  .tt-sx-than { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .tt-than { padding: 12px; }
  .tt-sx-chedo { grid-template-columns: 1fr; }
  .tt-sx-dat { grid-template-columns: repeat(2, 1fr); }
  .tt-sx-so4 { grid-template-columns: repeat(2, 1fr) !important; }
  .tt-sx-mach { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 480px) {
  .tt-sx-tb .tt-may { min-width: 0; flex: 1; }
  .tt-sx-item { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .tt-sx-nut { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   DÒNG MỐC NỘI DUNG TRANG + KÉO ĐỔI THỨ TỰ LỚP
   Danh sách vẽ NGƯỢC mảng: trên cùng = nằm trên, đúng quy ước của mọi trình thiết kế.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */
.tt-sx-mach2 {
  margin: 0 0 8px;
  font-size: .66rem;
  color: var(--tt-chu2);
  background: #eef2ff;
  border-left: 3px solid #a5b4fc;
  border-radius: 0 8px 8px 0;
  padding: 7px 10px;
  line-height: 1.55;
}
.tt-sx-mach2 i.fas { color: var(--tt-tim); margin-right: 4px; }

/* Dòng mốc — nhìn phải khác hẳn lớp ảnh để không ai nhầm nó là một lớp */
.tt-sx-item.tt-sx-nd {
  border-color: #6366f1;
  background: linear-gradient(90deg, #eef2ff, #f5f3ff);
  border-style: dashed;
  cursor: grab;
}
.tt-sx-item.tt-sx-nd:active { cursor: grabbing; }
.tt-sx-item.tt-sx-nd .tt-sx-tin > b { font-size: .74rem; color: #4338ca; }
.tt-sx-xem.nd {
  display: flex; align-items: center; justify-content: center;
  background: #e0e7ff; border-color: #c7d2fe; color: #4338ca; font-size: .9rem;
}

/* Tay nắm kéo */
.tt-sx-nam { color: var(--tt-chu3); cursor: grab; padding: 0 2px; font-size: .78rem; }
.tt-sx-nam:active { cursor: grabbing; }
.tt-sx-item[draggable="true"] { cursor: grab; }
.tt-sx-item.dang-keo { opacity: .45; }

/* ★ Vạch chỉ chỗ dòng sẽ rơi xuống — không có nó người dùng phải đoán, thả xong mới biết đúng/sai */
.tt-sx-item.rot-tren { box-shadow: 0 -3px 0 -1px #6366f1; }
.tt-sx-item.rot-duoi { box-shadow: 0 3px 0 -1px #6366f1; }

/* Tấm nội dung ở chế độ ĐÈ THẲNG: không kéo được (trang luôn chiếm trọn màn), chỉ để nhìn thấy
   mặt trang nằm ở khe nào giữa các lớp */
.tt-sx-ond.delen {
  left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important;
  border-style: solid;
  border-color: rgba(99, 102, 241, .5);
  background: rgba(255, 255, 255, .1);
}
.tt-sx-ond-nhan.tinh { cursor: default; }
.tt-sx-ond-nhan i.fas { margin-right: 4px; opacity: .65; }

[data-theme="dark"] .tt-sx-item.tt-sx-nd { background: linear-gradient(90deg, #1f2a44, #241f3f); }
[data-theme="dark"] .tt-sx-xem.nd { background: #312e81; border-color: #4338ca; color: #c7d2fe; }
[data-theme="dark"] .tt-sx-mach2 { background: #1f2a44; color: #c7d2fe; border-left-color: #6366f1; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   XEM TRƯỚC NỘI DUNG THẬT  —  ⚠ tên phải là .tt-sx-THANHXEM, KHÔNG được là .tt-sx-xem:
   .tt-sx-xem đã có sẵn cho ẢNH THU NHỎ của lớp (dòng ~868). Đặt trùng tên thì luật ở dưới đè lên,
   thanh công cụ bị bóp còn 38×34 mất cả nhãn lẫn ô chọn link — đã đo thấy 11 phần tử dính chung.
   XEM TRƯỚC NỘI DUNG THẬT + LỚP ĐIỀU KHIỂN Ô NỘI DUNG + KÉO THẢ SortableJS
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

.tt-sx-thanhxem {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 8px 11px;
  border: 1px solid var(--tt-vien); border-radius: 10px; background: #fff;
}
.tt-sx-thanhxem select { max-width: 260px; padding: 5px 8px; font-size: .72rem; }
.tt-gat.nho2 > span { width: 32px; height: 18px; }
.tt-gat.nho2 > span::after { width: 14px; height: 14px; }
.tt-gat.nho2 input:checked + span::after { transform: translateX(14px); }

/* Trang thật nhúng vào khung: dựng ở khổ THẬT của thiết bị rồi thu nhỏ, nên bên trong nó tự dàn
   đúng mốc responsive như máy thật. pointer-events:none để không cướp mất thao tác kéo lớp. */
.tt-sx-web {
  position: absolute; left: 0; top: 0;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
  background: #fff;
}
.tt-sx-ond { overflow: hidden; background: #fff; }
.tt-sx-ond.delen { background: transparent; }

/* ★ Lớp điều khiển ô nội dung — LUÔN NẰM TRÊN CÙNG.
   Để nhãn và 4 góc chung với tấm nội dung thì lớp ảnh xếp sau sẽ đè lên, và ô nội dung thành không
   kéo được nữa (đúng lỗi đã gặp). Tách riêng ra đây, đặt z-index cao nhất trong khung. */
.tt-sx-ondtay {
  position: absolute;
  z-index: 20;
  pointer-events: none;                /* thân vẫn cho bấm xuyên xuống lớp ảnh bên dưới */
  border: 1.5px dashed rgba(99, 102, 241, .95);
  border-radius: 4px;
}
.tt-sx-ondtay.delen { border-style: solid; border-color: rgba(99, 102, 241, .45); }
.tt-sx-ondtay .tt-sx-ond-nhan,
.tt-sx-ondtay .tt-sx-tay { pointer-events: auto; }

/* ── Hiệu ứng kéo của SortableJS ── */
.tt-sx-bong {                          /* chỗ trống nơi dòng sẽ rơi xuống */
  opacity: .35;
  background: #eef2ff !important;
  border-style: dashed !important;
  border-color: #6366f1 !important;
}
.tt-sx-đã-chọn { border-color: #818cf8 !important; }
.tt-sx-dang-keo {
  opacity: .95 !important;
  box-shadow: 0 10px 28px -8px rgba(15, 23, 42, .4) !important;
  transform: scale(1.015);
}
.tt-sx-ds-list { touch-action: pan-y; }

[data-theme="dark"] .tt-sx-thanhxem { background: #1e293b; }
[data-theme="dark"] .tt-sx-ond { background: #0f172a; }
[data-theme="dark"] .tt-sx-bong { background: #1f2a44 !important; }

@media (max-width: 767px) {
  .tt-sx-thanhxem select { max-width: 100%; flex: 1; }
}

/* Tên lớp hiện bằng chữ để CẢ DÒNG kéo được; bấm đúp mới thành ô sửa. */
.tt-sx-ten-hien {
  font-size: .72rem; font-weight: 600; color: var(--tt-chu);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 5px; border-radius: 6px; border: 1.5px solid transparent;
}
.tt-sx-ten-hien:hover { background: rgba(99, 102, 241, .07); }
.tt-sx-ten-hien.dang-sua {
  background: #fff; border-color: #818cf8; cursor: text;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); outline: 0;
  overflow: visible; white-space: normal;
}
[data-theme="dark"] .tt-sx-ten-hien.dang-sua { background: #0f172a; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   CANH & NEO MÉP · LẬT HÌNH · GỐC TÍNH BỀ RỘNG
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

.tt-sx-neo {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  margin: 10px 0 8px; padding: 10px 11px;
  border: 1px solid var(--tt-vien); border-radius: 12px; background: var(--tt-nen2);
}

/* Lưới 3×3 — bấm ô nào thì ảnh dán vào mép/góc tương ứng, khoảng cách về 0. */
.tt-sx-neo-luoi {
  display: grid; grid-template-columns: repeat(3, 30px); grid-auto-rows: 30px; gap: 4px;
  flex-shrink: 0;
}
.tt-sx-neo-o {
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--tt-vien); border-radius: 8px; background: #fff;
  color: var(--tt-chu3); font-size: .64rem; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.tt-sx-neo-o:hover { border-color: #a5b4fc; background: #eef2ff; color: var(--tt-tim); transform: translateY(-1px); }
.tt-sx-neo-o:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }
.tt-sx-neo-o.chon {
  border-color: var(--tt-tim); color: #fff;
  background: linear-gradient(135deg, var(--tt-tim), var(--tt-tim2));
  box-shadow: 0 3px 10px -3px rgba(99, 102, 241, .55);
}

.tt-sx-neo-ben { flex: 1; min-width: 150px; }
.tt-sx-neo-ben > b { display: block; font-size: .7rem; color: var(--tt-chu); }
.tt-sx-neo-ben > p { margin: 2px 0 7px; font-size: .64rem; line-height: 1.45; color: var(--tt-chu3); }
.tt-sx-neo-nut { display: flex; flex-wrap: wrap; gap: 5px; flex-basis: 100%; }
.tt-sx-neo-nut .tt-lien {
  border: 1.5px solid var(--tt-vien); background: #fff; padding: 4px 8px; min-height: 28px;
}
.tt-sx-neo-nut .tt-lien:hover { border-color: #a5b4fc; background: #eef2ff; }
/* Đang bật (ảnh đã lật) — phải thấy bằng cả MÀU lẫn viền đậm, không chỉ mỗi màu. */
.tt-sx-neo-nut .tt-lien.dang {
  border-color: var(--tt-tim); color: #fff;
  background: linear-gradient(135deg, var(--tt-tim), var(--tt-tim2));
}

.tt-sx-co { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tt-sx-co > span { font-size: .67rem; font-weight: 600; color: var(--tt-chu2); white-space: nowrap; }
.tt-sx-co select { flex: 1; min-width: 0; padding: 5px 8px; font-size: .68rem; }

[data-theme="dark"] .tt-sx-neo { background: #0f172a; }
[data-theme="dark"] .tt-sx-neo-o,
[data-theme="dark"] .tt-sx-neo-nut .tt-lien { background: #1e293b; }
[data-theme="dark"] .tt-sx-neo-o:hover,
[data-theme="dark"] .tt-sx-neo-nut .tt-lien:hover { background: #26324a; }

@media (max-width: 767px) {
  .tt-sx-neo { gap: 10px; }
  .tt-sx-neo-luoi { grid-template-columns: repeat(3, 34px); grid-auto-rows: 34px; }  /* chạm tay dễ hơn */
  .tt-sx-neo-ben { min-width: 130px; }
  .tt-sx-co { flex-wrap: wrap; }
}
/* Khổ hẹp: ba nút xếp lưới 2 cột, nút "Neo mép gần nhất" chiếm trọn hàng trên. Để `flex:1` thì chữ
   bị bóp xuống 4 dòng, nhìn rất xấu — đã đo ở 430px. */
@media (max-width: 560px) {
  .tt-sx-neo-nut { display: grid; grid-template-columns: 1fr 1fr; }
  .tt-sx-neo-nut .tt-lien {
    justify-content: center; white-space: nowrap; font-size: .64rem; padding: 6px 4px; min-height: 32px;
  }
  .tt-sx-neo-nut .tt-lien:first-child { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   NỀN QUANH KHUNG TRONG Ô XEM TRƯỚC
   ⚠ Chép đúng luật của viewer/css/trangTri.css (#tt-nen, #tt-nen i). Sửa bên kia thì sửa cả bên này,
     không thì người dùng canh trên ô xem trước rồi mở link thật ra thấy khác.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */
.tt-sx-nenxem {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: var(--tt-mau, #0f172a);
  border-radius: inherit;
}
.tt-sx-nenxem > i {
  position: absolute;
  inset: var(--tt-noi, -14%);
  display: block;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: blur(var(--tt-mo, 64px)) saturate(var(--tt-bh, 1.8)) brightness(var(--tt-sang, 0.68));
  transform: scale(var(--tt-phong, 1.2));
  opacity: .95;
}
/* "Hoà làm một": nền trải đúng khổ, tuyệt đối không nhoè không phóng — giống hệt html.tt-nennd */
.tt-sx-nenxem.nend > i { inset: 0; filter: none; transform: none; opacity: 1; }

/* Băng nhắc lớp còn neo mép trên-trái (sẽ trôi khi người xem đổi khổ màn hình) */
.tt-sx-nhac {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 9px; padding: 9px 11px;
  border: 1px solid #fcd34d; border-radius: 11px;
  background: linear-gradient(135deg, #fffbeb, #fef9c3);
  font-size: .66rem; line-height: 1.5; color: #78350f;
}
.tt-sx-nhac > i.fas { color: #d97706; font-size: .84rem; flex-shrink: 0; }
.tt-sx-nhac > span { flex: 1; min-width: 150px; }
.tt-sx-nhac b { color: #92400e; }
.tt-sx-nhac .btn { flex-shrink: 0; }
[data-theme="dark"] .tt-sx-nhac {
  background: #422006; border-color: #92400e; color: #fde68a;
}
[data-theme="dark"] .tt-sx-nhac b { color: #fcd34d; }

/* Dòng "Nội dung trang" trong danh sách lớp nay bấm chọn được */
.tt-sx-item.tt-sx-nd { cursor: pointer; }
.tt-sx-item.tt-sx-nd:hover { border-color: #a5b4fc; }

@media (max-width: 480px) {
  .tt-sx-nhac { font-size: .63rem; }
  .tt-sx-nhac .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   ĐỐI SOÁT PHẠM VI — nhãn "đang áp cho N link" + băng cảnh báo hai bộ giẫm chân nhau
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */
.tt-nhan.ap {
  background: #eef2ff; color: #4338ca; border-color: #c7d2fe;
}
.tt-nhan.khongap {
  background: #fef3c7; color: #92400e; border-color: #fcd34d;
}
.tt-nhan.ap i.fas, .tt-nhan.khongap i.fas { font-size: .58rem; margin-right: 2px; }

.tt-giamchan {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 14px 12px; padding: 11px 13px;
  border: 1px solid #fcd34d; border-radius: 12px;
  background: linear-gradient(135deg, #fffbeb, #fef9c3);
  color: #78350f; font-size: .66rem; line-height: 1.5;
}
.tt-giamchan > i.fas { color: #d97706; font-size: .9rem; flex-shrink: 0; margin-top: 1px; }
.tt-giamchan b { color: #92400e; }
.tt-giamchan > div { min-width: 0; }
.tt-giamchan p { margin: 3px 0 0; color: #92400e; opacity: .92; }
.tt-giamchan ul { margin: 6px 0 0; padding-left: 16px; }
.tt-giamchan li { margin-bottom: 3px; }
.tt-giamchan li em { font-style: normal; font-weight: 700; color: #065f46; }
.tt-giamchan li s { opacity: .7; }

[data-theme="dark"] .tt-nhan.ap { background: #312e81; color: #c7d2fe; border-color: #4338ca; }
[data-theme="dark"] .tt-nhan.khongap { background: #422006; color: #fde68a; border-color: #92400e; }
[data-theme="dark"] .tt-giamchan { background: #422006; border-color: #92400e; color: #fde68a; }
[data-theme="dark"] .tt-giamchan b,
[data-theme="dark"] .tt-giamchan p { color: #fcd34d; }

@media (max-width: 767px) {
  .tt-giamchan { margin: 0 10px 10px; font-size: .63rem; }
}