/* ShortEdit — giao diện theo bản design "Industry": xám trung tính, một màu nhấn xanh thép,
   chữ Barlow / Barlow Condensed, góc vuông có dấu căn chỉnh, khung chờ sọc chéo. */

:root {
  color-scheme: light;
  --bg: #f2f2f3; --tx: #1d1f20; --mu: #5d5d60; --ln: rgba(29,31,32,.22);
  --ac: #5980a6; --act: #416180; --acf: #44698d; --aci: #fff;
  --hv: rgba(89,128,166,.12); --acbg: rgba(89,128,166,.12); --hatch: rgba(29,31,32,.09);
  --err: #a8372f; --warnbg: rgba(89,128,166,.10); --sh: 0 12px 32px rgba(43,43,45,.22); --stage: #23282d;
  --chu: "Barlow", system-ui, sans-serif; --chu-hep: "Barlow Condensed", "Barlow", system-ui, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141618; --tx: #e8e9ea; --mu: #9ca1a6; --ln: rgba(255,255,255,.17);
  --ac: #8fb3d9; --act: #8fb3d9; --acf: #8fb3d9; --aci: #10151a;
  --hv: rgba(143,179,217,.14); --acbg: rgba(143,179,217,.14); --hatch: rgba(255,255,255,.07);
  --err: #e5776d; --warnbg: rgba(143,179,217,.10); --sh: 0 12px 32px rgba(0,0,0,.5); --stage: #0b0d0f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141618; --tx: #e8e9ea; --mu: #9ca1a6; --ln: rgba(255,255,255,.17);
    --ac: #8fb3d9; --act: #8fb3d9; --acf: #8fb3d9; --aci: #10151a;
    --hv: rgba(143,179,217,.14); --acbg: rgba(143,179,217,.14); --hatch: rgba(255,255,255,.07);
    --err: #e5776d; --warnbg: rgba(143,179,217,.10); --sh: 0 12px 32px rgba(0,0,0,.5); --stage: #0b0d0f;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--tx); font: 400 14px/1.4 var(--chu); }
button, select, input, textarea { font-family: var(--chu); color: inherit; }
a { color: var(--act); }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
input[type=range], input[type=checkbox] { accent-color: var(--ac); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(128,128,128,.35); }
svg.ic { flex: none; display: block; }

/* chữ */
.mo, .mo-nho { color: var(--mu); }
.mo-nho { font-size: 12px; }
.dam { font-weight: 600; }
.so { font-variant-numeric: tabular-nums; }
.mau-nhan { color: var(--act); display: inline-flex; }
.mau-nhan-chu { color: var(--act); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.mau-nhan-chu:empty { display: none; }
.co-icon { display: inline-flex; align-items: center; gap: 6px; }
.gian { flex: 1; }
.lien-ket { color: var(--act); text-decoration: underline; cursor: pointer; }
.ten-lon { font: 600 24px/1.1 var(--chu-hep); letter-spacing: .01em; overflow-wrap: anywhere; }
.ten-lon .mo { font-weight: 600; }

/* nút */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  height: 30px; padding: 0 12px; border: 1px solid var(--ln); border-radius: 2px;
  background: transparent; color: var(--tx); font: 500 13px var(--chu); cursor: pointer; text-decoration: none;
}
.nut:hover { border-color: var(--ac); background: var(--hv); }
.nut:disabled { opacity: .5; cursor: default; }
.nut:disabled:hover { border-color: var(--ln); background: transparent; }
.nut-nho { height: 26px; padding: 0 8px; font-size: 12px; }
.nut-vua { height: 28px; padding: 0 10px; font-size: 12px; }
.nut-vua.dang { border-color: var(--ac); background: var(--acbg); font-weight: 600; }
.nut-icon { width: 30px; padding: 0; }
.nut-nho.nut-icon { width: 26px; flex: none; }
.nut-chinh { background: var(--acf); border-color: var(--acf); color: var(--aci); font-weight: 600; padding: 0 14px; }
.nut-chinh:hover { background: var(--acf); border-color: var(--acf); filter: brightness(1.08); }
.nut-nguy:hover { border-color: var(--err); color: var(--err); background: transparent; }
.nut-xoa-do { background: var(--err); border-color: var(--err); color: #fff; font-weight: 600; }
.nut-xoa-do:hover { background: var(--err); border-color: var(--err); filter: brightness(1.1); }
.nut-chu { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--mu); font-size: 12px; cursor: pointer; padding: 0; }
.nut-chu:hover { color: var(--tx); }
.hang-nut { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hang-nut.cuoi-phai { justify-content: flex-end; gap: 8px; }
.day-duoi { margin-top: auto; }

/* ô nhập */
select, input[type=text], input[type=password], input[type=number], .o-so {
  height: 30px; padding: 0 8px; border: 1px solid var(--ln); border-radius: 2px; background: var(--bg); color: var(--tx); font-size: 13px;
}
.o-so { width: 56px; text-align: right; background: transparent; }
textarea {
  width: 100%; resize: vertical; padding: 10px 12px; border: 1px solid var(--ln); border-radius: 2px;
  background: transparent; color: var(--tx); font: 400 16px/1.5 var(--chu);
}
textarea:focus { border-color: var(--ac); outline: none; }
.o-tick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.o-tick input { width: 16px; height: 16px; margin: 0; }
.truong { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 13px; width: 100%; }
.truong input { height: 34px; width: 100%; background: transparent; font-size: 14px; }

/* dấu căn chỉnh ở 4 góc */
.khung-goc { position: relative; }
.goc { position: absolute; width: 9px; height: 9px; pointer-events: none;
  background: linear-gradient(var(--ac), var(--ac)) center/100% 1px no-repeat, linear-gradient(var(--ac), var(--ac)) center/1px 100% no-repeat; }
.goc.tl { top: -5px; left: -5px; } .goc.tr { top: -5px; right: -5px; }
.goc.bl { bottom: -5px; left: -5px; } .goc.br { bottom: -5px; right: -5px; }
.soc { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--hatch) 6px 7px); }

/* khung trang */
.app { height: 100vh; min-height: 560px; display: flex; flex-direction: column; overflow: hidden; }
.thanh { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--ln); flex-wrap: wrap; }
.thanh + .thanh { gap: 16px; }
.thuong-hieu { display: flex; align-items: center; gap: 8px; font: 600 22px/1 var(--chu-hep); letter-spacing: .02em; margin-right: 6px; }
.o-chon-video { width: clamp(140px, 18vw, 230px); padding-right: 24px; }
.trang-thai-luu { display: inline-flex; align-items: center; gap: 6px; color: var(--mu); font-size: 13px; margin-left: 4px; }
.trang-thai-luu::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ac); }
.trang-thai-luu.loi { color: var(--err); }
.trang-thai-luu.loi::before { background: var(--err); }
.trang-thai-luu:empty { display: none; }
.tuy-chon { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mu); }
.tuy-chon input[type=range] { width: 140px; }
.tuy-chon b { color: var(--tx); font-weight: 600; min-width: 32px; }
.canh-bao { flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 16px; background: var(--warnbg); border-bottom: 1px solid var(--ln); font-size: 13px; }
.canh-bao b { font-weight: 600; }

.menu-boc { position: relative; }
.menu { position: absolute; right: 0; top: 34px; z-index: 30; width: 180px; background: var(--bg); border: 1px solid var(--ln); box-shadow: var(--sh); }
.muc-menu { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 12px; border: 0; background: transparent; font: 500 13px var(--chu); cursor: pointer; text-align: left; }
.muc-menu:hover { background: var(--hv); }

.than { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 30vw, 340px); }
.cot-trai { overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--ln); }
.cot-phai { overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) {
  .app { height: auto; min-height: 100vh; overflow: visible; }
  .than { display: block; }
  .cot-trai { border-right: 0; overflow: visible; }
  .cot-phai { overflow: visible; border-top: 1px solid var(--ln); }
}

/* đoạn */
.danh-sach-doan { display: flex; flex-direction: column; gap: 14px; }
.doan { position: relative; padding: 12px; border: 1px solid var(--ln); display: flex; gap: 12px; }
.doan.dang-chon { border-color: var(--ac); box-shadow: inset 3px 0 0 var(--ac); }
.doan.dang-keo { opacity: .4; }
.doan.tha-tren::before, .doan.tha-duoi::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--ac); }
.doan.tha-tren::before { top: -9px; } .doan.tha-duoi::after { bottom: -9px; }
.doan-so { flex: none; width: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.doan-so .so-lon { font: 600 22px/1 var(--chu-hep); color: var(--act); }
.tay-keo { color: var(--mu); cursor: grab; display: inline-flex; }
.doan-anh { flex: none; width: 104px; display: flex; flex-direction: column; gap: 6px; }
.doan-anh .khung-anh { height: 104px; border: 1px solid var(--ln); display: grid; place-items: center; overflow: hidden; color: var(--mu); font-size: 11px; text-align: center; padding: 0; cursor: zoom-in; }
.doan-anh .khung-anh.trong-anh { cursor: default; padding: 6px; }
.doan-anh .khung-anh img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.doan-anh .khung-anh.muon img { opacity: .45; }
.doan-anh select { height: 26px; width: 100%; font-size: 12px; padding: 0 4px; }
.doan-than { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.doan-dau { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doan-dau select { height: 28px; }
.nhan-giong { display: inline-flex; align-items: center; gap: 6px; color: var(--mu); font-size: 12px; }
.da-chon { display: none; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--act); }
.doan.dang-chon .da-chon { display: inline-flex; }
.doan.dang-chon .nut-chon-doan { display: none; }
.nut-chon-doan { height: 26px; padding: 0 10px; font-size: 12px; color: var(--mu); }
.doan-meme { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 26px; }
.doan-meme > .nhan { font-size: 12px; color: var(--mu); margin-right: 2px; }
.nhan-meme { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 8px; border: 1px solid var(--ac); background: var(--acbg); font-size: 12px; cursor: pointer; border-radius: 2px; }
.nhan-meme b { font-weight: 600; }
.nhan-meme .so { color: var(--mu); }
.nhan-meme .ghim { color: var(--act); display: inline-flex; }
.nhan-meme.nghi, .nhan-meme.sfx { border-style: dashed; }
.nhan-meme.thieu { border-color: var(--err); color: var(--err); background: transparent; }
.nhan-meme .bo { display: grid; place-items: center; width: 20px; height: 20px; color: var(--mu); border: 0; background: transparent; cursor: pointer; padding: 0; }
.nhan-meme .bo:hover { color: var(--err); }
.doan-nut { display: flex; gap: 6px; flex-wrap: wrap; }
.quay { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: quay .8s linear infinite; flex: none; }
@keyframes quay { to { transform: rotate(360deg); } }

.vung-tha { border: 1px dashed var(--ac); padding: 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vung-tha-chu { flex: 1; min-width: 200px; }
body.dang-tha-tep .vung-tha, .vung-tha.dang-tha { background: var(--acbg); border-style: solid; }
.trong { color: var(--mu); padding: 24px; text-align: center; border: 1px dashed var(--ln); }

/* thẻ bên phải */
.the { border: 1px solid var(--ln); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.the.dang-tha { background: var(--acbg); border-color: var(--ac); }
.the-dau { display: flex; align-items: center; justify-content: space-between; }
.tieu-de-the { font: 600 20px/1 var(--chu-hep); letter-spacing: .02em; }
.chon-phan { display: flex; border: 1px solid var(--ln); }
.chon-phan.vua { width: max-content; max-width: 100%; }
.chon-phan button { flex: 1; height: 30px; border: 0; padding: 0 10px; background: transparent; font: 500 12px var(--chu); cursor: pointer; white-space: nowrap; }
.chon-phan button:hover { background: var(--hv); }
.chon-phan button.dang { background: var(--acf); color: var(--aci); font-weight: 600; }
.chon-phan button:disabled { opacity: .45; cursor: default; }
.luoi-o { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.luoi-o > .trong { grid-column: 1 / -1; }
.o { border: 1px solid var(--ln); display: flex; flex-direction: column; min-width: 0; }
.o.dang-dung { border-color: var(--ac); box-shadow: inset 0 0 0 1px var(--ac); }
.o-xem { position: relative; aspect-ratio: 9 / 12; display: grid; place-items: center; color: var(--mu); cursor: pointer; overflow: hidden; }
.o-xem:hover { background-color: var(--hv); }
.o-xem video, .o-xem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.o-nen .o-xem video { object-fit: cover; }
.huy-hieu { position: absolute; padding: 1px 5px; background: var(--bg); border: 1px solid var(--ln); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--tx); }
.huy-hieu.trai-duoi { left: 4px; bottom: 4px; }
.huy-hieu.phai-tren { right: 4px; top: 4px; width: 20px; height: 20px; padding: 0; display: grid; place-items: center; }
.huy-hieu.dung { left: 4px; top: 4px; display: flex; align-items: center; gap: 4px; padding: 1px 6px; background: var(--acf); border-color: var(--acf); color: var(--aci); font-weight: 600; }
.huy-hieu.cho { left: 4px; right: 4px; top: 50%; transform: translateY(-50%); text-align: center; border: 0; background: transparent; color: var(--mu); }
.o-chan { padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; }
.o-ten { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; min-width: 0; }
.o-ten b { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-ten span { font-size: 11px; color: var(--mu); white-space: nowrap; }
.o-nut { display: flex; gap: 4px; }
.o-nut .nut { flex: 1; height: 26px; font-size: 12px; font-weight: 600; padding: 0 6px; }
.o-nut .nut-icon { flex: none; width: 26px; }

/* hộp thoại */
dialog.hop {
  width: min(var(--rong, 600px), calc(100vw - 40px)); max-width: none; max-height: calc(100vh - 40px);
  padding: 0; border: 1px solid var(--ln); border-radius: 0; background: var(--bg); color: var(--tx); box-shadow: var(--sh); overflow: visible;
}
dialog.hop[open] { display: flex; flex-direction: column; }
dialog.hop > form { display: flex; flex-direction: column; min-height: 0; }
dialog.hop::backdrop { background: rgba(10,12,14,.55); }
.dau-hop { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ln); }
.tieu-de-hop { font: 600 22px/1 var(--chu-hep); letter-spacing: .02em; }
.than-hop { flex: 1; min-height: 0; padding: 16px; overflow: auto; }
.than-hop.hai-cot { display: flex; gap: 22px; }
.than-hop.doc { display: flex; flex-direction: column; gap: 14px; }
.chan-hop { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--ln); }
.cot-thong-tin { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 16px; }
.nhom { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.nhan-nhom { font-size: 12px; color: var(--mu); font-weight: 500; }
@media (max-width: 760px) { .than-hop.hai-cot { flex-direction: column; } .cot-thong-tin { min-width: 0; } }

.san-khau { position: relative; overflow: hidden; background: var(--stage); border: 1px solid var(--ln); user-select: none; touch-action: none; }
.cot-san-khau { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#san-khau { width: 270px; height: 480px; }
.sk-nen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sk-bai { position: absolute; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.sk-phu-de { position: absolute; left: 8%; right: 8%; height: 34px; border: 1px dashed rgba(255,255,255,.6); color: #e8eaec; font-size: 11px; display: grid; place-items: center; pointer-events: none; }
.sk-duong { position: absolute; pointer-events: none; }
.sk-duong.doc { left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--ac); opacity: .55; }
.sk-duong.ngang { top: 50%; left: 0; right: 0; border-top: 1px solid var(--ac); opacity: .35; }
.sk-meme { position: absolute; cursor: move; outline: 2px solid var(--ac); background: rgba(255,255,255,.14); }
.sk-meme video, .sk-meme img { width: 100%; height: 100%; display: block; pointer-events: none; }
.sk-ten { position: absolute; left: 0; top: 0; background: rgba(0,0,0,.5); color: #fff; padding: 1px 6px; font-size: 11px; pointer-events: none; }
.tay-cam { position: absolute; right: -6px; bottom: -6px; width: 11px; height: 11px; background: var(--ac); cursor: nwse-resize; }
.sk-hut { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px solid var(--ac); display: none; }

.thanh-cat { position: relative; height: 36px; width: 100%; border: 1px solid var(--ln); margin: 4px 0;
  background: repeating-linear-gradient(90deg, transparent 0 11px, var(--hatch) 11px 12px); }
.cat-chon { position: absolute; top: 0; bottom: 0; background: var(--acbg); border-left: 2px solid var(--ac); border-right: 2px solid var(--ac); }
.cat-nut { position: absolute; top: -4px; width: 9px; height: 42px; margin-left: -4px; background: var(--ac); cursor: ew-resize; }
.cat-dang-phat { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--tx); pointer-events: none; }

.san-khau-media { flex: none; position: relative; height: 460px; aspect-ratio: 9 / 16; background: var(--stage); border: 1px solid var(--ln); display: grid; place-items: center; overflow: hidden; }
.san-khau-media video, .san-khau-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.san-khau-media audio { width: 90%; }
.bang-thong-tin { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 13px; }
.bang-thong-tin .k { color: var(--mu); }

.xt-khung { flex: none; }
.xt-san-khau, .xt-video-that { width: 281px; height: 500px; }
.xt-video-that { display: block; background: #000; border: 1px solid var(--ln); }
#xt-meme > * { position: absolute; display: block; }
.xt-phu-de { position: absolute; left: 6%; right: 6%; text-align: center; color: #fff; font: 700 20px/1.25 var(--chu);
  -webkit-text-stroke: 4px #000; paint-order: stroke fill; transform: translateY(-50%); pointer-events: none; }
.xt-cho { position: absolute; inset: 0; display: none; place-items: center; background: rgba(10,12,14,.7); color: #fff; font-size: 13px; text-align: center; padding: 20px; }
.xt-cho.hien { display: grid; }
.xt-cho span { display: inline-flex; align-items: center; gap: 8px; }
.o-doan { width: 36px; height: 30px; padding: 0; border: 1px dashed var(--ln); color: var(--mu); }
.o-doan.san-sang { border: 1px solid var(--ac); color: var(--tx); }
.o-doan.dang { background: var(--acf); border: 1px solid var(--acf); color: var(--aci); font-weight: 600; }
.chu-giai { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--mu); }
.chu-giai span { display: inline-flex; align-items: center; gap: 6px; }
.o-mau { width: 10px; height: 10px; display: inline-block; }
.o-mau.dang { background: var(--acf); } .o-mau.san { border: 1px solid var(--ac); } .o-mau.chua { border: 1px dashed var(--mu); }

.thanh-tien-do { height: 6px; width: 100%; border: 1px solid var(--ln); }
.thanh-tien-do > div { height: 100%; width: 0; background: var(--acf); transition: width .4s; }
.log { margin: 8px 0 0; padding: 10px; border: 1px solid var(--ln); font: 12px/1.5 ui-monospace, Menlo, monospace; color: var(--mu); overflow: auto; max-height: 160px; white-space: pre-wrap; }
.tao-ket-qua { display: flex; gap: 20px; flex-wrap: wrap; }
.tao-ket-qua video { height: 300px; aspect-ratio: 9 / 16; background: #000; border: 1px solid var(--ln); }
.tao-ket-qua .thong-tin { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: flex-start; }

.bang-hang-doi { display: flex; flex-direction: column; border: 1px solid var(--ln); }
.bang-hang-doi .dong { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--ln); font-size: 13px; }
.bang-hang-doi .dong:last-child { border-bottom: 0; }
.bang-hang-doi .ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bang-hang-doi .ai { color: var(--mu); width: 60px; }
.bang-hang-doi .chay { color: var(--act); font-weight: 600; }
.luoi-video-ra { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.luoi-video-ra > .trong { grid-column: 1 / -1; }
.o-video-ra video { width: 100%; aspect-ratio: 9 / 16; display: block; background: var(--stage); }
.o-video-ra .o-ten b { font-size: 13px; }

.anh-lon { width: auto; max-width: 92vw; background: transparent; border: 0; box-shadow: none; }
.anh-lon img { max-width: 92vw; max-height: 90vh; display: block; }
.dong-noi { position: absolute; top: 8px; right: 8px; background: var(--bg); }

.thong-bao { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--bg); border: 1px solid var(--ac); box-shadow: var(--sh); font-size: 13px; max-width: 360px; }
.thong-bao #thong-bao-icon { color: var(--ac); display: inline-flex; }
.thong-bao.loi { border-color: var(--err); }
.thong-bao.loi #thong-bao-icon { color: var(--err); }

/* trang đăng nhập */
.trang-dang-nhap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.the-dang-nhap { position: relative; width: 360px; max-width: 100%; border: 1px solid var(--ln); padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; }
.the-dang-nhap .thuong-hieu { font-size: 26px; }
.the-dang-nhap .nut-chinh { height: 38px; font-size: 14px; }
.loi-dn { display: flex; align-items: center; gap: 6px; color: var(--err); font-size: 13px; }
.loi-dn:empty { display: none; }