/* Giao diện kính, chép khuôn từ he-thong-quan-ly/src/kho_app.html; giữ màu nhấn terracotta của mình. */
:root { --chu: #1d1d1f; --nhat: #5f6066; --nhan: #b25f42; --nhan2: #9c4f36; --xanh: #3f6e5f; --kb: rgba(255,255,255,.55); color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--chu); font: 17px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; background-color: #e8ecf3; background-attachment: fixed;
  background-image: radial-gradient(42% 48% at 8% 6%, rgba(122,170,255,.55), rgba(122,170,255,0) 70%),
    radial-gradient(36% 44% at 92% 14%, rgba(255,176,146,.6), rgba(255,176,146,0) 70%),
    radial-gradient(46% 50% at 62% 98%, rgba(142,222,192,.5), rgba(142,222,192,0) 70%); }
main { max-width: 480px; margin: 0 auto; padding: 20px 16px 40px; }
h1 { font-size: 28px; margin: 8px 0 4px; color: var(--nhan); letter-spacing: -.3px; }
h2 { font-size: 19px; margin: 20px 0 10px; }
p.phu { margin: 0 0 16px; color: var(--nhat); }

/* Lớp kính: thẻ, hai nút chọn dịch vụ, khung form. */
.the, .chon button, form { background: var(--kb); -webkit-backdrop-filter: blur(26px) saturate(165%); backdrop-filter: blur(26px) saturate(165%);
  border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px rgba(30,40,70,.10); }
@media (prefers-reduced-transparency: reduce) { .the, .chon button, form { -webkit-backdrop-filter: none; backdrop-filter: none; background: #f5f6f8; } }

.chon { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chon button { padding: 22px 8px; font: inherit; font-size: 18px; font-weight: 600; border-radius: 22px; color: var(--chu); cursor: pointer; }
.chon button small { display: block; font-weight: 400; font-size: 13px; color: var(--nhat); margin-top: 4px; }
.chon button[aria-pressed="true"] { --kb: rgba(255,255,255,.85); outline: 2px solid var(--nhan); }
form { border-radius: 22px; padding: 4px 16px 16px; margin-top: 16px; }
label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 15px; }
input, textarea { width: 100%; padding: 13px 14px; font: inherit; color: inherit; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; background: rgba(255,255,255,.85); }
input:focus, textarea:focus { outline: 2px solid var(--nhan); border-color: transparent; }
textarea { min-height: 56px; resize: vertical; }
.nut { display: block; width: 100%; min-height: 50px; margin-top: 20px; padding: 14px; font: inherit; font-weight: 700; border: 0; border-radius: 999px;
  background: var(--nhan); color: #fff; cursor: pointer; text-align: center; text-decoration: none; box-shadow: 0 6px 16px rgba(178,95,66,.28); }
.nut:hover { background: var(--nhan2); }
.nut:disabled { opacity: .5; }
.nut.phu2 { min-height: 44px; margin-top: 8px; padding: 10px; background: rgba(255,255,255,.85); color: var(--xanh); border: 1px solid rgba(0,0,0,.1); font-weight: 600; box-shadow: none; }
.loi { color: #a3271c; min-height: 1.5em; margin-top: 10px; }
.the { border-radius: 22px; padding: 16px; margin: 12px 0; }
.the.moi { box-shadow: inset 0 0 0 1.5px rgba(178,95,66,.55), 0 10px 30px rgba(30,40,70,.10); }
.the.xong { box-shadow: inset 0 0 0 1.5px rgba(63,110,95,.55), 0 10px 30px rgba(30,40,70,.10); }
.the h2 { margin: 10px 0 6px; }
.nhan { display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 99px; background: rgba(178,95,66,.14); color: var(--nhan2); }
.the.xong .nhan { background: rgba(63,110,95,.14); color: var(--xanh); }
.dong { margin: 6px 0; overflow-wrap: anywhere; }
.dong b { color: var(--nhat); font-weight: 600; }
a { color: var(--xanh); }
.an { position: absolute; left: -9999px; }
footer { margin-top: 32px; font-size: 13px; color: var(--nhat); text-align: center; }