/* Lọ đậu kiểm tâm — nhẹ, sáng, nhiều khoảng trống.
   Mẫu giao diện (themes/<ten>/theme.json) chỉ ghi đè các biến dưới :root. */

@font-face { font-family: 'Be Vietnam Pro'; font-weight: 400; font-display: swap; src: url(fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 400; font-display: swap; src: url(fonts/be-vietnam-pro-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 500; font-display: swap; src: url(fonts/be-vietnam-pro-vietnamese-500-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 500; font-display: swap; src: url(fonts/be-vietnam-pro-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 600; font-display: swap; src: url(fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 600; font-display: swap; src: url(fonts/be-vietnam-pro-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Pangolin'; font-weight: 400; font-display: swap; src: url(fonts/pangolin-vietnamese-400-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Pangolin'; font-weight: 400; font-display: swap; src: url(fonts/pangolin-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Dancing Script'; font-weight: 500; font-display: swap; src: url(fonts/dancing-script-vietnamese-500-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Dancing Script'; font-weight: 500; font-display: swap; src: url(fonts/dancing-script-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --nen: #faf7f1;
  --anh-nen: none;
  --the: #ffffff;
  --the-vien: rgba(60, 72, 66, 0.09);
  --chu: #2e3236;
  --chu-nhat: #767c80;
  --nhan: #5e9c86;
  --nhan-nhat: #e4f0ea;
  --nhan-chu: #2d5a49;
  --sen: #e8a3b4;
  --sen-nhat: #fbebef;
  --nut-den: #3d3f45;
  --nut-den-chu: #fbf8f2;
  --nut-vien: transparent;
  --bo-goc: 22px;
  --bong: 0 1px 2px rgba(40, 52, 46, 0.04), 0 10px 28px rgba(40, 52, 46, 0.07);
  --bong-nut: 0 1px 2px rgba(40, 52, 46, 0.08);
  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-tieu-de: var(--font);
  --co-tieu-de: 1.2rem;
  --nut-cao: 52px;
  --dong-ke: #ebe5d8;
  color-scheme: light;
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--nen);
  color: var(--chu);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
}
/* Ảnh nền của mẫu giao diện, cố định sau nội dung (không dùng background-attachment:fixed vì iPhone lỗi). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--anh-nen) center bottom / cover no-repeat;
  pointer-events: none;
}
/* Ảnh nền tự chọn: phủ lớp màu nền mờ để chữ dễ đọc. */
body.co-anh-nen::before { background: var(--anh-nen) center / cover no-repeat; }
body.co-anh-nen::after { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--nen); opacity: 0.5; pointer-events: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--nhan); outline-offset: 2px; }
.an-di { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.man {
  max-width: 540px;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom));
}
.tieu-de { font-family: var(--font-tieu-de); font-weight: 600; font-size: var(--co-tieu-de); letter-spacing: -0.01em; margin: 0; line-height: 1.25; }

/* ---------- Đầu trang ---------- */
.dau-trang { display: flex; align-items: center; gap: 12px; padding: 6px 0 18px; }
.dau-chu { flex: 1; min-width: 0; }
.hom-nay { margin: 2px 0 0; color: var(--chu-nhat); font-size: 0.85rem; }
.hom-nay::first-letter { text-transform: uppercase; }
.avatar {
  width: 46px; height: 46px; flex: none; padding: 0; border: 0; border-radius: 50%;
  background: var(--the); box-shadow: var(--bong-nut); overflow: hidden;
}
.avatar svg, .avatar img, .avatar span { display: block; width: 100%; height: 100%; object-fit: cover; }
.nut-tron {
  position: relative; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: transparent; color: var(--chu-nhat);
}
.nut-tron:hover { background: var(--the-vien); }
.nut-tron svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cham-moi { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--sen); border: 2px solid var(--nen); }

/* ---------- Ô viết ---------- */
.the-viet {
  background: var(--the); border-radius: var(--bo-goc); box-shadow: var(--bong);
  padding: 12px; border: 1px solid var(--nut-vien);
}
.the-viet textarea {
  display: block; width: 100%; min-height: 5.6em; resize: none;
  border: 1px solid var(--the-vien); border-radius: calc(var(--bo-goc) - 8px);
  padding: 0.4em 0.8em; line-height: 1.75; font-size: 1rem;
  background-color: var(--the); background-attachment: local;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.the-viet textarea:focus { border-color: var(--nhan); box-shadow: 0 0 0 4px var(--nhan-nhat); }
.the-viet textarea::placeholder { color: var(--chu-nhat); opacity: 0.8; }
.nut-ds { display: flex; gap: 10px; margin-top: 12px; }
.nut-ds.doc { flex-direction: column; }
.nut-bo {
  flex: 1; min-height: var(--nut-cao); border: 1px solid var(--nut-vien); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; font-size: 1.02rem; padding: 0 14px;
  transition: transform 0.12s ease, box-shadow 0.2s, filter 0.2s;
}
.nut-bo:active { transform: scale(0.97); }
.nut-den { background: var(--nut-den); color: var(--nut-den-chu); box-shadow: 0 6px 16px rgba(40, 42, 48, 0.18); }
.nut-trang { background: var(--nhan-nhat); color: var(--nhan-chu); }
.hat-nho { display: inline-block; flex: none; width: 15px; height: 10.5px; border-radius: 50%; }
.hat-nho.den { background: radial-gradient(ellipse at 35% 30%, #8a8a90, #34343a 55%, #1e1e22); }
.hat-nho.trang { background: radial-gradient(ellipse at 35% 30%, #fff, #f6efe0 55%, #d8cdb3); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.goi-y { margin: 8px 4px 0; font-size: 0.8rem; color: var(--chu-nhat); }

.bang-nhac {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  background: var(--sen-nhat); border-radius: 18px; padding: 12px 14px; margin: 0 0 14px; font-size: 0.9rem;
}
.bang-nhac p { margin: 0; flex: 1 1 220px; }
.bang-nhac div { display: flex; gap: 6px; }
.bang-nhac .nut-phu { min-height: 40px; }

/* ---------- Hai lọ ---------- */
.hai-lo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 8px; }
.o-lo { margin: 0; text-align: center; }
.lo-khung { cursor: pointer; padding: 0 6px; }
.lo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lo-svg .nap-so { font-family: var(--font); font-weight: 600; font-size: 17px; transform-box: fill-box; transform-origin: center; }
.lo-svg .nap-day text { font-family: var(--font); }
.o-lo figcaption { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.lo-ten { font-weight: 600; font-size: 1rem; }
.lo-dem { font-size: 0.82rem; color: var(--chu-nhat) !important; min-height: 32px; }
.dong-thang {
  margin: 14px auto 0; text-align: center; font-size: 0.85rem; color: var(--chu-nhat);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px;
}
.dong-thang { flex-direction: column; align-items: center; gap: 6px; }
.dong-thang b { color: var(--chu); font-weight: 600; }
.dong-lich { display: block; }
/* Mỗi cụm "Tháng này: …" / "Tháng trước: …" giữ trọn 1 dòng, thiếu chỗ thì cả cụm xuống hàng. */
.dong-lich > span { display: inline-block; white-space: nowrap; margin-right: 0.4em; }
.ten-lich { color: var(--chu); font-weight: 500; }
@media (max-width: 480px) {
  .dong-lich > span { display: block; }
  .dong-thang .gach { display: none; }
}
.goi-y-lo {
  margin: 12px auto 0; max-width: 520px; padding: 10px 14px; border-radius: 14px;
  background: var(--nhan-nhat); color: var(--chu); font-size: 0.88rem; line-height: 1.5;
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
}
.goi-y-lo[hidden], .ke-duoi [hidden] { display: none; }
.goi-y-lo .nut-chu { flex: none; font-weight: 600; min-height: 40px; padding: 0 8px; }
.ke-duoi { text-align: center; margin: 12px 0 0; }
.chon-mui-gio { width: 100%; min-height: 44px; margin-top: 6px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--the-vien); background: var(--the); color: var(--chu); font: inherit; }
.lo-svg .nap-so.dai { font-size: 13px; }

/* ---------- Nút phụ ---------- */
.nut-phu {
  min-height: var(--nut-cao); padding: 0 20px; border-radius: 999px; border: 1px solid var(--the-vien);
  background: var(--the); font-weight: 500; box-shadow: var(--bong-nut);
}
.nut-chu { border: 0; background: none; padding: 6px 8px; color: var(--nhan-chu); font-weight: 500; }

/* ---------- Thông báo ---------- */
.thong-bao {
  position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 50;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  width: max-content; max-width: calc(100vw - 32px);
  background: rgba(44, 48, 52, 0.93); color: #fff; padding: 11px 18px; border-radius: 18px;
  font-size: 0.9rem; text-align: center; transition: opacity 0.25s, transform 0.25s;
}
.thong-bao.hien { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Hộp thoại ---------- */
#hop {
  border: 0; padding: 0; width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh;
  margin: auto auto 0; border-radius: 26px 26px 0 0; background: var(--nen); color: var(--chu);
  box-shadow: 0 -10px 40px rgba(30, 40, 35, 0.16);
}
#hop[open] { animation: truot-len 0.26s cubic-bezier(.2, .8, .2, 1); }
#hop::backdrop { background: rgba(32, 38, 35, 0.3); }
#hop.hop-to { height: 92vh; height: 92dvh; max-height: none; }
#hop.hop-nho { max-width: 480px; }
@media (min-width: 600px) {
  #hop { margin: auto; border-radius: 26px; }
}
.hop-than { display: flex; flex-direction: column; max-height: inherit; height: 100%; }
.hop-dau { display: flex; align-items: center; gap: 6px; padding: 12px 10px 6px 20px; }
.hop-dau h2 { flex: 1; margin: 0; font-family: var(--font-tieu-de); font-size: 1.1rem; font-weight: 600; }
.hop-dau #hop-lui { margin-left: -12px; }
.hop-noi-dung { overflow: auto; padding: 6px 20px max(28px, env(safe-area-inset-bottom)); flex: 1; min-height: 0; overscroll-behavior: contain; }
#hop { overflow: hidden; }
#hop-tieu-de:focus { outline: none; }
@keyframes truot-len { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }

.mo-ta-nho { color: var(--chu-nhat); font-size: 0.85rem; margin: 8px 0; }
.muc-nho { font-size: 0.9rem; font-weight: 600; margin: 22px 0 10px; }
.trong { text-align: center; color: var(--chu-nhat); padding: 40px 10px; }

/* Đọc 1 hạt */
.hat-doc { text-align: center; padding: 8px 4px 12px; }
.hat-to { width: 70px; height: 48px; margin: 6px auto 18px; border-radius: 50%; transform: rotate(-12deg); }
.hat-to.den { background: radial-gradient(ellipse at 35% 30%, #8a8a90, #34343a 55%, #1e1e22); box-shadow: 0 8px 18px rgba(30, 30, 35, 0.25); }
.hat-to.trang { background: radial-gradient(ellipse at 35% 30%, #fff, #f6efe0 55%, #d8cdb3); box-shadow: 0 8px 18px rgba(120, 100, 60, 0.18); }
.hat-chu { font-size: 1.15rem; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 18px; text-align: left; }
.hat-ngay { color: var(--chu-nhat); font-size: 0.88rem; margin: 0; }
.hat-lo { color: var(--chu-nhat); font-size: 0.8rem; margin: 2px 0 0; }

/* Xem cả lọ + danh sách hạt */
.lo-xem { max-width: 240px; margin: 0 auto; cursor: pointer; }
.lo-xem + .mo-ta-nho { text-align: center; }
.ds-hat { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ds-hat button {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: left;
  background: var(--the); border: 1px solid var(--the-vien); border-radius: 16px; padding: 10px 14px; min-height: 52px;
}
.ds-chu { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.92rem; }
.ds-ngay { font-size: 0.75rem; color: var(--chu-nhat); }

/* Kệ lọ */
.ke-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.ke-lo { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 18px; border: 1px solid var(--the-vien); background: var(--the); }
.ke-lo svg { width: 70px; }
.ke-ten { font-weight: 600; font-size: 0.85rem; }
.ke-ngay { font-size: 0.72rem; color: var(--chu-nhat); }

/* ---------- Tuỳ chỉnh ---------- */
.muc { padding: 18px 0 6px; border-top: 1px solid var(--the-vien); }
.muc:first-of-type { border-top: 0; }
.muc h3 { font-size: 0.82rem; font-weight: 600; color: var(--chu-nhat); margin: 0 0 12px; letter-spacing: 0.02em; display: flex; align-items: center; gap: 8px; }
.nhan-moi { display: inline-block; background: var(--sen-nhat); color: #a2475f; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; letter-spacing: 0; }
.nut-dong-ke {
  width: 100%; min-height: 50px; text-align: left; padding: 0 16px; margin: 4px 0 6px;
  border-radius: 16px; border: 1px solid var(--the-vien); background: var(--the); font-weight: 500;
}
.luoi-chon { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; }
.o-chon {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px;
  background: var(--the); border: 1.5px solid var(--the-vien); border-radius: 18px; font-size: 0.8rem; min-height: 56px;
}
.o-chon svg { width: 52px; }
.o-chon[aria-pressed="true"] { border-color: var(--nhan); background: var(--nhan-nhat); }
.avatar-nho { display: block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
.avatar-nho svg, .avatar-nho img { width: 100%; height: 100%; display: block; object-fit: cover; }
.nen-mau { display: block; width: 100%; height: 44px; border-radius: 10px; border: 1px solid var(--the-vien); background-size: cover; }
.o-mau-ds { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.o-mau { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.1); padding: 0; }
.o-mau[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--nen), 0 0 0 5px var(--nhan); }
.o-mau.tuy-y { display: grid; place-items: center; background: conic-gradient(#f7c6d0, #f6e3b4, #cfe6d8, #c9dcf2, #e2d4f0, #f7c6d0); cursor: pointer; }
.o-mau.tuy-y input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.o-mau.tuy-y span { font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); pointer-events: none; }
.thanh-keo { display: flex; justify-content: space-between; font-weight: 500; }
input[type="range"] { width: 100%; accent-color: var(--nhan); height: 32px; }
.dong-cai { margin: 6px 0 16px; }
.dong-cai > b { display: block; font-weight: 500; margin-bottom: 8px; }
.phan-doan { display: flex; gap: 4px; background: var(--the-vien); padding: 4px; border-radius: 999px; }
.phan-doan button { flex: 1; min-height: 42px; border: 0; border-radius: 999px; background: transparent; font-size: 0.9rem; }
.phan-doan button[aria-pressed="true"] { background: var(--the); box-shadow: var(--bong-nut); font-weight: 600; }
.o-so { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 0.88rem; color: var(--chu-nhat); }
.o-so input { width: 96px; min-height: 42px; border-radius: 12px; border: 1px solid var(--the-vien); background: var(--the); padding: 0 10px; text-align: center; }
.cong-tac { display: flex; align-items: center; gap: 14px; padding: 10px 0; cursor: pointer; }
.cong-tac span { flex: 1; display: flex; flex-direction: column; }
.cong-tac b { font-weight: 500; }
.cong-tac small { color: var(--chu-nhat); font-size: 0.8rem; }
.cong-tac input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cong-tac i { flex: none; width: 50px; height: 30px; border-radius: 999px; background: #d9dcd9; position: relative; transition: background 0.2s; }
.cong-tac i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.2s; }
.cong-tac input:checked + i { background: var(--nhan); }
.cong-tac input:checked + i::after { transform: translateX(20px); }
.cong-tac input:focus-visible + i { outline: 2.5px solid var(--nhan); outline-offset: 2px; }

.luoi-mau { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.the-mau {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; text-align: left;
  border-radius: 20px; border: 1.5px solid var(--the-vien); background: var(--the);
}
.the-mau[aria-pressed="true"] { border-color: var(--nhan); }
.the-mau .ten { font-weight: 500; font-size: 0.88rem; padding: 0 4px 2px; }
.the-mau .nhan-moi { position: absolute; top: 14px; right: 14px; }
.the-mau .xem-truoc { width: 100%; height: 120px; }

/* ---------- Thẻ preset (lần đầu mở và trong Tuỳ chỉnh) ---------- */
.preset-ds { display: grid; gap: 14px; }
.the-preset {
  display: flex; align-items: center; gap: 16px; padding: 12px; min-height: 120px; text-align: left;
  border-radius: 24px; border: 1.5px solid transparent; background: var(--the); box-shadow: var(--bong);
  transition: transform 0.15s, border-color 0.2s;
}
.the-preset:active { transform: scale(0.98); }
.the-preset[aria-pressed="true"] { border-color: var(--nhan); }
.the-preset .chu { display: flex; flex-direction: column; gap: 2px; }
.the-preset b { font-size: 1.15rem; font-weight: 600; }
.the-preset small { color: var(--nhan-chu); font-weight: 500; font-size: 0.85rem; }
.the-preset .chu > span { color: var(--chu-nhat); font-size: 0.85rem; margin-top: 4px; }
.xem-truoc {
  position: relative; flex: none; width: 92px; height: 108px; border-radius: 18px; overflow: hidden;
  display: grid; place-items: center; background-size: cover; background-position: center bottom;
  border: 1px solid var(--the-vien);
}
.xem-truoc svg { width: 58%; }
.xem-truoc i { position: absolute; left: 10px; bottom: 10px; width: 22px; height: 6px; border-radius: 3px; }
.preset-ds.nho { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.preset-ds.nho .the-preset { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; min-height: 0; box-shadow: none; border-color: var(--the-vien); }
.preset-ds.nho .xem-truoc { width: 100%; height: 92px; }
.preset-ds.nho b { font-size: 0.92rem; }
.preset-ds.nho small { font-size: 0.72rem; }

/* ---------- Màn hình chào ---------- */
#man-chao { padding-top: max(36px, env(safe-area-inset-top)); }
.chao-dau { text-align: center; margin-bottom: 26px; }
.chao-lo { width: 92px; margin: 0 auto 14px; }
#man-chao .tieu-de { font-size: 1.6rem; }
.chao-mo-ta { color: var(--chu-nhat); margin: 8px 0 0; }
.chao-hoi { font-weight: 600; margin: 0 0 12px 4px; }
.chao-rieng-tu { text-align: center; color: var(--chu-nhat); font-size: 0.8rem; margin: 22px 10px 0; }

/* ---------- Khoá PIN ---------- */
#man-khoa { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.khoa-hop { text-align: center; width: 100%; }
.khoa-hop > p:first-of-type { margin: 10px 0 18px; color: var(--chu-nhat); }
.pin-cham { display: flex; justify-content: center; gap: 16px; margin: 0 0 26px; min-height: 16px; }
.pin-cham i { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--chu-nhat); }
.pin-cham i.co { background: var(--chu); border-color: var(--chu); }
.pin-cham.rung { animation: rung 0.35s; }
@keyframes rung { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.ban-phim { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px 22px; justify-content: center; margin-bottom: 18px; }
.ban-phim button { width: 76px; height: 76px; border-radius: 50%; border: 1px solid var(--the-vien); background: var(--the); font-size: 1.6rem; font-weight: 500; box-shadow: var(--bong-nut); }
.ban-phim button:active { background: var(--nhan-nhat); }

.loi-lon { max-width: 420px; margin: 30vh auto; padding: 0 20px; text-align: center; }

/* ---------- Giao diện đơn giản (người lớn tuổi) ---------- */
body.don-gian { --nut-cao: 60px; }
body.don-gian .phu { display: none; }
body.don-gian .nut-bo { font-size: 1.05rem; }
body.don-gian .hai-lo { margin-top: 22px; }

/* ---------- Ít chuyển động ---------- */
body.it-chuyen-dong *, body.it-chuyen-dong *::before, body.it-chuyen-dong *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Dòng báo có bản mới, nổi ở đáy màn hình trên mọi mẫu giao diện. */
.ban-moi {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 12px 18px;
  border: 0; border-radius: 999px; background: var(--nut-den); color: var(--nut-den-chu);
  font: inherit; font-size: 0.92rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); cursor: pointer;
}
.ban-moi b { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }