/* Khung đứng 9:16 - toạ độ logic 720 x 1280 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; touch-action: none;
  background: #1c2b1f radial-gradient(circle at 50% 30%, #2f4a33, #142017);
  font-family: "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  user-select: none; -webkit-user-select: none;
}
#game { position: absolute; display: block; box-shadow: 0 0 40px rgba(0,0,0,.5); }

#ui {
  position: absolute; left: 0; top: 0; width: 720px; height: 1280px;
  transform-origin: 0 0; pointer-events: none; color: #3b2a17;
}
#ui > * { pointer-events: auto; }
#ui > #toasts, #ui > #fade { pointer-events: none; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud * { pointer-events: auto; }
.hud-top { position: absolute; left: 18px; right: 18px; top: 18px; display: flex; justify-content: space-between; align-items: center; }
.hud-right { display: flex; gap: 6px; }
.icon-btn.glow { background: #ffe08a; animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 4px 0 #7a5a32, 0 0 18px 4px rgba(255,200,60,.9); } }
.hud-left { position: absolute; left: 18px; right: 110px; top: 110px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }
.hud-left > * { white-space: nowrap; }
body.wide .hud-left { top: 18px; right: 480px; }
.pill {
  background: rgba(255, 248, 230, .93); border: 3px solid #7a5a32; border-radius: 18px;
  padding: 6px 18px; font-size: 27px; font-weight: 700; box-shadow: 0 3px 0 #7a5a32;
}
.pill.money { color: #2f6b3a; font-size: 30px; }
.pill.small { font-size: 22px; font-weight: 600; padding: 5px 14px; }
.energy { display: flex; align-items: center; gap: 10px; background: rgba(255,248,230,.93); border: 3px solid #7a5a32; border-radius: 18px; padding: 6px 16px; font-weight: 700; font-size: 24px; }
.energy .bar { width: 200px; height: 20px; background: #e6d5b5; border-radius: 10px; overflow: hidden; }
.energy .bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #e9a23b, #8cc152); transition: width .3s; }
.hud-quest {
  position: absolute; left: 18px; right: 18px; top: 374px; text-align: center;
  background: rgba(47, 107, 58, .93); color: #fffbe8; border: 3px solid #1f4a27; border-radius: 18px;
  padding: 10px 18px; font-size: 25px; font-weight: 700; line-height: 1.3;
}
.hud-quest { white-space: nowrap; overflow: hidden; text-align: left; padding: 10px 0; opacity: 0; pointer-events: none; transition: opacity .5s; }
.hud-quest.show { opacity: 1; pointer-events: auto; }
.hud-quest .qt { display: inline-block; will-change: transform; }
.icon-btn {
  width: 64px; height: 64px; border-radius: 16px; border: 3px solid #7a5a32; background: rgba(255,248,230,.95);
  font-size: 29px; cursor: pointer; box-shadow: 0 4px 0 #7a5a32; padding: 0;
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a5a32; }

/* ---------- Điều khiển (vùng ngón cái phía dưới) ---------- */
#touch { position: absolute; left: 20px; bottom: 30px; width: 300px; height: 300px; }
#touch .tbtn { position: absolute; width: 104px; height: 104px; font-size: 40px; }
#tUp { left: 98px; top: 0; } #tDown { left: 98px; bottom: 0; } #tLeft { left: 0; top: 98px; } #tRight { right: 0; top: 98px; }
button.dest { display: flex; justify-content: space-between; align-items: center; text-align: left; gap: 10px; }
button.dest.on { background: #ffd98a; }
button.dest > span:last-child { text-align: right; white-space: nowrap; }
.tbtn {
  width: 130px; height: 130px; border-radius: 50%; font-size: 50px; color: #fff;
  background: rgba(30, 40, 50, .38); border: 4px solid rgba(255,255,255,.7);
}
.tbtn:active { background: rgba(30, 40, 50, .6); }
#actBtn {
  position: absolute; right: 24px; bottom: 44px; min-width: 250px; height: 130px; padding: 0 26px;
  border-radius: 65px; border: 4px solid #7a3d12; background: #f4b942; color: #4a2508;
  font-size: 34px; font-weight: 800; box-shadow: 0 6px 0 #7a3d12; cursor: pointer;
}
#actBtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #7a3d12; }

#toasts { position: absolute; left: 30px; right: 30px; top: 470px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.toast {
  background: rgba(59, 42, 23, .92); color: #fff6dc; padding: 10px 22px; border-radius: 16px; text-align: center;
  font-size: 25px; font-weight: 700; animation: tin .25s ease-out, tout .4s ease-in 2.4s forwards;
}
@keyframes tin { from { opacity: 0; transform: translateY(-10px); } }
@keyframes tout { to { opacity: 0; transform: translateY(-10px); } }

/* ---------- Hộp thoại ---------- */
#dlg {
  position: absolute; left: 18px; right: 18px; bottom: 24px;
  background: #fff8e6; border: 5px solid #7a5a32; border-radius: 26px; padding: 30px 26px 22px;
  box-shadow: 0 7px 0 #7a5a32, 0 12px 40px rgba(0,0,0,.4);
}
.dlg-name {
  position: absolute; top: -28px; left: 24px; background: #2f6b3a; color: #fffbe8; padding: 5px 20px;
  border-radius: 16px; font-weight: 800; font-size: 27px; border: 4px solid #1f4a27;
}
.dlg-name:empty { display: none; }
.dlg-text { font-size: 29px; line-height: 1.45; white-space: pre-line; max-height: 520px; overflow-y: auto; }
.dlg-choices { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.dlg-choices button, .panel-body button.act {
  font: inherit; font-size: 27px; font-weight: 700; padding: 16px 20px; border-radius: 16px; text-align: left;
  border: 3px solid #7a5a32; background: #f7e3b5; color: #3b2a17; cursor: pointer; box-shadow: 0 4px 0 #7a5a32;
}
.panel-body button.act { text-align: center; padding: 10px 18px; font-size: 24px; }
.dlg-choices button:hover, .panel-body button.act:hover { background: #ffd98a; }
.dlg-choices button:disabled, .panel-body button.act:disabled { opacity: .45; cursor: default; }
.dlg-choices button .k { opacity: .5; font-size: 22px; margin-right: 10px; }

/* ---------- Bảng ---------- */
#panel { position: absolute; inset: 0; background: rgba(15, 26, 18, .6); display: flex; align-items: center; justify-content: center; }
.panel-box { width: 680px; max-height: 1180px; background: #fff8e6; border: 5px solid #7a5a32; border-radius: 26px; display: flex; flex-direction: column; overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: center; background: #2f6b3a; color: #fffbe8; padding: 14px 20px; font-size: 30px; font-weight: 800; }
.panel-head .close { font-size: 32px; background: none; border: 0; color: #fffbe8; cursor: pointer; width: 60px; height: 60px; }
.panel-body { padding: 18px 24px 26px; overflow-y: auto; font-size: 25px; line-height: 1.5; }
.panel-body h3 { margin: 14px 0 6px; color: #2f6b3a; font-size: 28px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid.one { grid-template-columns: 1fr; }
.card { background: #f7ead0; border: 2px solid #d9c095; border-radius: 14px; padding: 10px 14px; }
.card b { color: #2f6b3a; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 2px dashed #d9c095; }
.hearts { color: #d9534f; letter-spacing: 1px; white-space: nowrap; }
.muted { color: #8a7454; font-size: 21px; }
canvas.preview { width: 100%; border-radius: 12px; border: 2px solid #d9c095; display: block; margin-top: 8px; }

/* ---------- Màn hình chào ---------- */
#title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px 0; overflow-y: auto; background: radial-gradient(ellipse at center, rgba(20,40,25,.30), rgba(20,40,25,.10) 70%); }
#title .title-box { margin: auto; } /* 0.56b: khung đặt giữa màn hình */
.title-box { width: 640px; text-align: center; background: rgba(255, 248, 230, .94); border: 5px solid #7a5a32; border-radius: 32px; padding: 34px 40px 26px; box-shadow: 0 9px 0 #7a5a32; }
.title-box h1 { font-size: 66px; white-space: nowrap; margin: 0; color: #2f6b3a; letter-spacing: 2px; text-shadow: 4px 4px 0 #f4b942; line-height: 1.05; }
.title-box .sub { margin: 6px 0 8px; font-size: 29px; color: #7a5a32; font-style: italic; }
#inpName { font: inherit; font-size: 32px; padding: 14px 18px; width: 460px; border-radius: 16px; border: 3px solid #7a5a32; text-align: center; background: #fffdf5; user-select: text; -webkit-user-select: text; }
.gender { margin: 18px 0; display: flex; gap: 14px; justify-content: center; }
.gender .g { font: inherit; font-size: 28px; padding: 10px 40px; border-radius: 16px; border: 3px solid #7a5a32; background: #f7e3b5; cursor: pointer; }
.gender .g.sel { background: #2f6b3a; color: #fffbe8; }
button.big { font: inherit; font-size: 36px; font-weight: 800; padding: 18px 48px; border-radius: 20px; border: 4px solid #7a3d12; background: #f4b942; color: #4a2508; box-shadow: 0 6px 0 #7a3d12; cursor: pointer; display: block; margin: 10px auto; }
button.big:active { transform: translateY(4px); box-shadow: 0 2px 0 #7a3d12; }
button.link { background: none; border: 0; color: #7a5a32; text-decoration: underline; font-size: 24px; cursor: pointer; margin-bottom: 8px; }
.server { font-size: 21px; color: #8a7454; margin: 16px 0 0; }

#fade { position: absolute; inset: 0; background: #0f1a12; opacity: 0; transition: opacity .45s; }
#fade.on { opacity: 1; }
#rotate { position: fixed; inset: 0; background: #2f6b3a; color: #fffbe8; display: none; align-items: center; justify-content: center; text-align: center; font-size: 28px; z-index: 99; line-height: 1.6; }
.announce { font-size: 23px; color: #2f6b3a; font-weight: 600; margin: 14px 0 0; }
.announce:empty { display: none; }

/* Hành trang */
.wtop { display: flex; align-items: center; gap: 14px; background: #f7ead0; border-radius: 16px; padding: 8px 14px; margin-bottom: 10px; }
.wtop canvas { width: 150px; height: 156px; }
.wtabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.wtab { font: inherit; font-size: 21px; font-weight: 700; padding: 8px 4px; border-radius: 14px; border: 3px solid #d9c095; background: #fffdf5; color: #3b2a17; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.wtab span { font-size: 34px; }
.wtab.on { background: #2f6b3a; color: #fffbe8; border-color: #1f4a27; }
.wgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wcard { background: #fffdf5; border: 3px solid #d9c095; border-radius: 16px; padding: 6px 6px 8px; text-align: center; cursor: pointer; }
.wcard canvas { width: 100%; height: auto; display: block; }
.wcard.on { border-color: #2f6b3a; background: #eaf5e4; }
.wname { font-size: 19px; font-weight: 700; line-height: 1.2; min-height: 46px; display: flex; align-items: center; justify-content: center; }
.wnote { font-size: 15px; line-height: 1.2; }
.wbtn { margin-top: 6px; font-size: 19px; font-weight: 800; padding: 6px; border-radius: 10px; background: #f7e3b5; border: 2px solid #7a5a32; }
.wcard.on .wbtn { background: #2f6b3a; color: #fffbe8; border-color: #1f4a27; }
.wcard.buy .wbtn { background: #f4b942; }

.fgrid { grid-template-columns: 1fr 1fr; }
.fplot { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.panel-body button.act.small { font-size: 18px; padding: 6px 8px; }
.title-box h1 span { display: block; font-size: 58px; color: #c0502a; text-shadow: 3px 3px 0 #f4d03f; }

/* ---------- Máy tính màn ngang: khung cảnh rộng, bảng chữ canh giữa ---------- */
body.wide .hud-quest { left: 50%; right: auto; width: 900px; transform: translateX(-50%); }
body.wide #dlg { left: 50%; right: auto; width: 1000px; transform: translateX(-50%); }
body.wide #toasts { left: 50%; right: auto; width: 900px; transform: translateX(-50%); }
button.dest > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; white-space: normal; text-align: left; }
button.dest > span:last-child { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.hud-quest { cursor: pointer; }

/* ---------- Đăng nhập ---------- */
.title-box input.tin { font: inherit; font-size: 30px; padding: 12px 18px; width: 460px; border-radius: 16px; border: 3px solid #7a5a32; text-align: center; background: #fffdf5; user-select: text; -webkit-user-select: text; display: block; margin: 10px auto; }
.title-box .gender { margin: 12px 0; }
.claim { font-size: 23px; color: #3b2a17; margin: 0 0 6px; line-height: 1.35; }
.terr { font-size: 22px; color: #b03a2a; font-weight: 700; margin: 8px 0 0; min-height: 0; }
.terr:empty { display: none; }
input.tin { user-select: text; -webkit-user-select: text; touch-action: auto; }
.panel-body input.tin { font: inherit; font-size: 24px; padding: 10px 14px; width: 100%; border-radius: 12px; border: 2px solid #7a5a32; background: #fffdf5; margin-top: 8px; }

/* ---------- Trò chuyện ---------- */
#btnChat { position: absolute; right: 18px; top: 110px; }
#chatBadge { position: absolute; top: -10px; right: -10px; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 15px; background: #2f8a5a; color: #fff; font-size: 18px; font-style: normal; font-weight: 800; line-height: 30px; border: 2px solid #fff; }
#chatBadge.pm { background: #d9363e; }
#chatFeed { position: absolute; left: 18px; bottom: 360px; width: 520px; pointer-events: none !important; display: flex; flex-direction: column; gap: 4px; }
#chatFeed .cm { background: rgba(30,24,16,.62); color: #fff6dc; border-radius: 12px; padding: 5px 12px; font-size: 21px; line-height: 1.3; overflow-wrap: anywhere; animation: tin .25s ease-out; }
#chatFeed .cm b { color: #ffd98a; }
#chatFeed .cm.pm b { color: #ff9fb0; }
#chatBox { position: absolute; left: 14px; right: 14px; bottom: 350px; height: 430px; display: flex; flex-direction: column; background: rgba(255,248,230,.97); border: 4px solid #7a5a32; border-radius: 22px; box-shadow: 0 6px 0 #7a5a32; overflow: hidden; }
.chat-head { display: flex; gap: 6px; padding: 8px; background: #f2dfb6; }
.chat-head .chtab { flex: 1; font: inherit; font-size: 22px; font-weight: 800; padding: 8px 4px; border-radius: 12px; border: 3px solid #d9c095; background: #fffdf5; color: #3b2a17; cursor: pointer; }
.chat-head .chtab.on { background: #2f6b3a; color: #fffbe8; border-color: #1f4a27; }
.chat-head .close { font: inherit; font-size: 24px; width: 50px; border-radius: 12px; border: 3px solid #d9c095; background: #fffdf5; cursor: pointer; }
#chatBar { padding: 6px 12px; font-size: 19px; color: #6a5434; border-bottom: 2px solid #ead7ae; line-height: 1.5; max-height: 92px; overflow-y: auto; }
#chatLog { flex: 1; overflow-y: auto; padding: 6px 12px; font-size: 22px; line-height: 1.35; user-select: text; -webkit-user-select: text; touch-action: pan-y; }
#chatLog .cm { padding: 3px 0; overflow-wrap: anywhere; }
#chatLog .cm.me b { color: #1f6fb8; }
#chatLog .cm.near b { color: #2f6b3a; }
#chatLog .cm.pm b { color: #b03a6a; }
.who[data-id] { cursor: pointer; text-decoration: underline dotted; }
.cbtn { font: inherit; font-size: 18px; padding: 3px 10px; border-radius: 10px; border: 2px solid #7a5a32; background: #f7e3b5; cursor: pointer; margin: 2px 0; }
.chat-input { display: flex; gap: 8px; padding: 8px; background: #f2dfb6; }
.chat-input input { flex: 1; min-width: 0; font: inherit; font-size: 23px; padding: 10px 14px; border-radius: 14px; border: 3px solid #7a5a32; background: #fffdf5; }
.chat-input button { font: inherit; font-size: 23px; font-weight: 800; padding: 0 20px; border-radius: 14px; border: 3px solid #7a3d12; background: #f4b942; color: #4a2508; cursor: pointer; }
body.wide #chatBox { right: auto; width: 640px; bottom: 30px; height: 480px; }
body.wide #chatFeed { bottom: 40px; width: 600px; }
#btnRank { position: absolute; right: 18px; top: 186px; }
#btnMgr { position: absolute; right: 18px; top: 262px; }
.mgr-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mgr-tabs .act.on { background: #2f6b3a !important; color: #fff !important; border-color: #1f4a28 !important; }
.mgr-sum { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
#btnRide { position: absolute; right: 18px; top: 338px; }
.panel-body select.tin { font: inherit; font-size: 22px; padding: 10px 12px; width: 100%; border-radius: 12px; border: 2px solid #7a5a32; background: #fffdf5; margin-top: 8px; }
.pill.rep { background: rgba(255, 236, 242, .95); border-color: #b03a6a; color: #8a2a52; box-shadow: 0 3px 0 #b03a6a; cursor: pointer; }
body.wide .hud-quest { top: 296px; } body.wide #toasts { top: 390px; }

/* Hành trang: đồ của tôi / cửa hàng · học tập */
.wmode { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.wmode .wm { flex: 1; font: inherit; font-size: 21px; font-weight: 800; padding: 9px 6px; border-radius: 14px; border: 3px solid #d9c095; background: #fffdf5; color: #3b2a17; cursor: pointer; }
.wmode .wm.on { background: #2f6b3a; color: #fffbe8; border-color: #1f4a27; }
.wmode.study .wm { font-size: 18px; flex: 1 1 30%; }
.card.lesson { font-size: 22px; line-height: 1.55; white-space: normal; }
.card.quizq { font-size: 26px; font-weight: 700; margin: 8px 0 12px; }
.panel-body button.qopt { display: block; width: 100%; text-align: left; margin: 0 0 8px; font-size: 22px; }
.panel-body button.qopt.right { background: #cfe9c0; border-color: #2f8a5a; }
.panel-body button.qopt.wrong { background: #f6c8c0; border-color: #b03a2a; }
.card.cert { margin-bottom: 8px; border: 3px double #c9a24a; background: #fffaf0; }
.bizchart { display: flex; gap: 8px; align-items: flex-end; height: 86px; padding: 6px 4px; background: #fffaf0; border-radius: 12px; border: 2px solid #ead7ae; margin-bottom: 8px; }
.bizchart .bc { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bizchart .bc i { display: block; width: 70%; border-radius: 4px 4px 0 0; }
.bizchart .bc span { font-size: 14px; color: #8a7454; }
.wmode .wm small { font-weight: 600; font-size: 15px; }
/* 0.23: nhuộm màu trang phục */
.dyebar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; padding: 8px 10px; background: rgba(255,255,255,.55); border-radius: 12px; }
.dyebar > span { margin-right: 4px; }
.dye { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); cursor: pointer; padding: 0; font-size: 14px; line-height: 22px; text-align: center; background: #fff; position: relative; overflow: hidden; }
.dye.on { box-shadow: 0 0 0 3px #3b2a1e; }
.dye.pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.dyebar button.dye { width: 28px; height: 28px; min-width: 28px; min-height: 28px; flex: 0 0 28px; margin: 0; }

.remember { display: block; margin: 4px auto 10px; font-size: 20px; color: #5a4024; cursor: pointer; user-select: none; }
.remember input { width: 22px; height: 22px; vertical-align: -4px; margin-right: 6px; }
.remember.agree { font-size: 18px; line-height: 1.4; max-width: 470px; text-align: left; }
.remember a, .legal-note a, .legal-links a { color: #2f6b3a; font-weight: 700; }
.legal-note { font-size: 17px; color: #5a4024; margin: 6px auto; max-width: 470px; }
.legal-links { font-size: 16px; margin: 6px 0 0; }
/* 0.49: gia phả, báo cáo quyết toán */
.gp { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.gp-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; background: rgba(255, 248, 230, .7); border-left: 5px solid #c9a45c; border-radius: 10px; }
.gp-g { min-width: 92px; font-weight: 800; color: #7a5a32; font-size: 0.9em; }
.gp-n { background: #fffdf5; border: 2px solid #e2d3b0; border-radius: 10px; padding: 3px 9px; font-size: 0.92em; }
.gp-me { border-color: #2f6b3a; background: #eaf6e4; }
.gp a, .row a { color: #2f6b3a; font-weight: 700; }
table.rpt { border-collapse: collapse; width: 100%; font-size: 0.85em; background: #fffdf5; }
table.rpt th, table.rpt td { border-bottom: 1px solid #e2d3b0; padding: 5px 6px; text-align: right; white-space: nowrap; }
table.rpt th:first-child, table.rpt td:first-child { text-align: left; }
table.rpt th { color: #2f6b3a; }
body:not(.wide) .hud-quest { right: 96px; } /* chừa cột nút bên phải (chat, xếp hạng, sổ tay, xe) */

/* 0.56: nhãn độ tuổi, cảnh báo sức khỏe, bản quyền */
.rating { font-size: 15px; color: #6a5a3a; margin: 10px 0 0; display: flex; gap: 8px; align-items: center; justify-content: center; }
.rating .age { display: inline-block; border: 3px solid #c0392b; color: #c0392b; border-radius: 8px; padding: 1px 7px; font-size: 18px; font-weight: 900; }
.copy { font-size: 15px; line-height: 1.5; color: #8a7454; margin: 6px 0 0; }
.copy a { color: #2f6b3a; font-weight: 700; }
.cadao { font-size: 22px; line-height: 1.45; color: #5a7a3a; font-style: italic; margin: 0 0 20px; } /* ca dao miền Tây ở màn hình chào */

/* 0.57: hợp đồng, biên bản, giấy phép */
.doc { background: #fffef8; color: #1e1e1e; border: 1px solid #d8ccb0; border-radius: 6px; padding: 18px 20px; font-family: "Times New Roman", Georgia, serif; font-size: 17px; line-height: 1.5; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.doc p { margin: 6px 0; } .doc ul { margin: 4px 0 6px 20px; padding: 0; }
.doc-qh { text-align: center; font-weight: 700; font-size: 15px; }
.doc-title { text-align: center; font-size: 20px; margin: 14px 0 2px; color: #1e1e1e; }
.doc-no { text-align: center; font-style: italic; margin: 0 0 10px !important; }
.doc-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: center; margin-top: 16px; position: relative; }
.doc-sign > div { position: relative; min-height: 130px; }
.doc-sig { height: 56px; display: flex; align-items: center; justify-content: center; }
.doc .sig { font-family: "Segoe Script", "Brush Script MT", "Dancing Script", cursive; font-size: 26px; color: #1f3f9a; transform: rotate(-6deg); display: inline-block; }
.sig-anim { animation: sigIn .9s ease-out; clip-path: inset(0 0 0 0); }
@keyframes sigIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.doc-stamp { position: absolute; left: 50%; top: 38px; transform: translateX(-50%) rotate(-14deg); width: 92px; height: 92px; border: 4px double var(--sc); border-radius: 50%; color: var(--sc); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Arial, sans-serif; font-weight: 900; font-size: 10px; line-height: 1.1; text-align: center; opacity: .78; pointer-events: none; }
.doc-stamp b { font-size: 20px; } .doc-stamp i { font-style: normal; padding: 0 6px; }
.stamp-anim { animation: stampIn .45s ease-out; }
@keyframes stampIn { 0% { transform: translateX(-50%) rotate(-14deg) scale(2.2); opacity: 0; } 70% { transform: translateX(-50%) rotate(-14deg) scale(.92); opacity: .9; } 100% { transform: translateX(-50%) rotate(-14deg) scale(1); opacity: .78; } }
.doc-paid { text-align: center; font-weight: 900; color: #2f6b3a; border: 3px solid #2f6b3a; display: inline-block; padding: 4px 12px; transform: rotate(-4deg); }
#verTag { position: fixed; left: 6px; bottom: 2px; z-index: 5; font: 600 8.5px/1.2 "Be Vietnam Pro", system-ui, sans-serif; color: rgba(255,255,255,.5); text-shadow: 0 1px 1px rgba(0,0,0,.5); pointer-events: none; }
#title h1 .tm { font-size: .45em; vertical-align: super; margin-left: 2px; opacity: .85; font-weight: 700; }