* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  color-scheme: light;
  /* Chiều cao thật của .header, gồm cả vùng đồng hồ/wifi của iPhone.
     Mọi back bar dính bên dưới header đều lấy top từ đây — sửa một chỗ
     là toàn app khớp theo, không phải đi sửa từng thanh. */
  --gv-header-h: calc(58px + env(safe-area-inset-top, 0px));
  --gv-route-h: 58px;
  --gv-review-head-h: calc(var(--gv-route-h) + 4px + env(safe-area-inset-top, 0px));
  --gv-bg: #F6F7FB;
  --gv-surface: #FFFFFF;
  --gv-raised: #F0F2F8;
  --gv-text: #182033;
  --gv-muted: #667085;
  --gv-faint: #98A2B3;
  --gv-border: #E2E6EE;
  --gv-primary: #4F5FD7;
  --gv-primary-strong: #3F4DBB;
  --gv-primary-soft: #E9EDFF;
  --gv-primary-ink: #3544AF;
  --gv-gold: #F2BF4F;
  --gv-gold-strong: #C78B16;
  --gv-gold-soft: #FFF5D6;
  --gv-success: #279765;
  --gv-success-soft: #E8F6EF;
  --gv-danger: #D95850;
  --gv-danger-soft: #FDECEA;
  --gv-shadow: 0 4px 18px rgba(40, 52, 98, .08);
  --gv-bar-glass: rgba(246,247,251,.78);
  --gv-bar-border: rgba(210,217,229,.72);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --gv-bg: #0E1420;
  --gv-surface: #182231;
  --gv-raised: #202B3B;
  --gv-text: #F2F5FA;
  --gv-muted: #AAB5C5;
  --gv-faint: #77859A;
  --gv-border: #303B4C;
  --gv-primary: #7388F3;
  --gv-primary-strong: #91A2FF;
  --gv-primary-soft: #28345C;
  --gv-primary-ink: #B9C4FF;
  --gv-gold: #F0C45C;
  --gv-gold-strong: #FFD878;
  --gv-gold-soft: #3A321D;
  --gv-success: #55C88D;
  --gv-success-soft: #17382B;
  --gv-danger: #FF8278;
  --gv-danger-soft: #432421;
  --gv-shadow: 0 5px 20px rgba(0, 0, 0, .22);
  --gv-bar-glass: rgba(14,20,32,.78);
  --gv-bar-border: rgba(58,70,90,.74);
}
/* Trang tiếp tục cuộn tự nhiên ở document để Safari iPhone tự thu thanh địa
   chỉ. Header/back bar dùng fixed theo viewport và phần nội dung được bù đúng
   chiều cao; .main không trở thành một vùng cuộn riêng. */
/* Chặn kéo-để-tải-lại trang (pull-to-refresh) nhưng VẪN giữ hiệu ứng nảy
   (rubber-band) của nội dung khi vuốt quá đà. */
html { overscroll-behavior-y: contain; }
body {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--gv-bg);
  color: var(--gv-text);
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overscroll-behavior-y: contain;
  /* Cảm giác app thật: không cho double-tap phóng to */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}
button,
input,
textarea,
select { font-family: inherit; }
/* Thanh trên cùng cố định ở mọi tab. padding-top = safe-area nên nội dung chữ
   luôn nằm dưới đồng hồ/wifi của iPhone, không bao giờ bị che. */
.header {
  background: #2c3e7a;
  color: white;
  padding: env(safe-area-inset-top, 0px) 16px 0;
  height: var(--gv-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  z-index: 60;
}
.header-logo { font-size: 17px; font-weight: 700; color: #fff; display:flex;gap:8px;align-items:center; }
.header-logo span{color:#FFD700;font-size:23px;font-weight:400;line-height:1}
/* .main không tạo vùng cuộn riêng; document phải tiếp tục là scroll root để
   Safari có thể thu/mở thanh địa chỉ tự nhiên. */
/* +safe-area: trên iPhone có thanh home indicator, 70px không đủ để phần tử
   cuối trang (ví dụ nút "Bật nhắc ôn đúng lúc") thoát khỏi bottom-nav. */
.main {
  flex: 1;
  padding-top: var(--gv-header-h);
  padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: white;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  z-index: 100;
}
.nav-btn {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: #999;
  cursor: pointer;
  padding: 4px 16px;
}
.nav-btn.active { color: #2c3e7a; }
.nav-btn .nav-icon { font-size: 22px; transition: transform 0.2s; }
.nav-btn.active .nav-icon { transform: scale(1.15); }

/* REVIEW */
.review-home,.review-session,.review-done{padding:28px 18px;text-align:center}
.review-done h1{font-size:23px;color:#1f2d55;margin-bottom:9px}
.review-done p{font-size:14px;line-height:1.55;color:#697386;margin:0 auto 22px;max-width:330px}
.review-start,.review-check,.review-next,.review-done button{border:0;border-radius:12px;background:#2c3e7a;color:#fff;font:600 15px inherit;padding:13px;cursor:pointer}
.review-auth-msg{color:#c0392b;font-size:13px;margin:0 0 12px}
.review-hero{background:linear-gradient(135deg,#2c3e7a,#4763ae);padding:24px 20px;border-radius:18px;color:#fff;text-align:left}.review-hero span{font-size:11px;font-weight:800;letter-spacing:.12em;color:#ffd700}.review-hero h1{font-size:29px;margin:8px 0 4px}.review-hero p{font-size:13px;opacity:.85}
.review-start{display:block;width:100%;margin:16px 0;background:#27ae60;border-radius:999px}.review-empty{background:#fff;border-radius:15px;padding:28px 15px;margin:16px 0;color:#556070;line-height:1.6}.review-empty small{color:#929baa}.review-demo{width:100%;margin:0 0 10px;background:#fff7e0;border:1px solid #f0c95b;color:#8a6200;border-radius:999px;padding:12px;font:700 14px inherit;cursor:pointer}.review-push{width:100%;border:0;background:#fff;border-radius:20px;padding:14px 15px;display:grid;grid-template-columns:43px 1fr 20px;gap:12px;align-items:center;text-align:left;box-shadow:0 4px 18px rgba(31,45,85,.07);color:#1f2d55;font:inherit;cursor:pointer}.review-push-icon{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:#eaf0ff;color:#2c3e7a}.review-push-icon svg{width:21px;height:21px}.review-push span:nth-child(2){display:grid;gap:3px}.review-push b{font-size:15px}.review-push small{font-size:12px;color:#7d8898}.review-push i{font-style:normal;color:#9ca9bc;font-size:25px}
.review-session{padding-top:22px}.review-count{font-size:12px;font-weight:700;color:#7b8798;margin-bottom:34px}.review-prompt{font-size:14px;color:#788496;margin-bottom:18px}.review-sentence{background:#fff;border-radius:16px;padding:22px 18px;font-size:19px;line-height:1.65;text-align:left;color:#273142;margin-bottom:20px}.review-blank{color:#2c3e7a;letter-spacing:.08em}.review-options{display:grid;gap:11px}.review-option{border:0;background:#fff;border-radius:18px;padding:16px 17px;color:#273142;font:600 15px/1.35 inherit;cursor:pointer;text-align:left;box-shadow:0 3px 14px rgba(31,45,85,.075);transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.review-option:active{transform:scale(.98)}.review-option.selected{background:#eef2ff;color:#24376e;box-shadow:0 0 0 2px rgba(44,62,122,.18),0 5px 16px rgba(31,45,85,.1)}.review-option:disabled,.review-check:disabled,.review-chunk:disabled{opacity:.55}.review-word{font-size:32px;font-weight:800;color:#2c3e7a;margin:8px 0 25px}.review-meaning{background:#fff;border-radius:16px;padding:18px;margin:8px 0 20px;color:#273142;font-size:19px;line-height:1.5;font-weight:700}.review-audio{border:0;border-radius:12px;background:#eaf0ff;color:#2c3e7a;padding:10px 13px;margin:-3px 0 21px;display:inline-flex;align-items:center;gap:7px;font:700 14px inherit;cursor:pointer}.review-audio .icon-speak{width:18px;height:18px}.review-audio .icon-stop{display:none!important}.review-letters{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:8px 0 26px}.review-letter{width:30px;height:40px;border-bottom:2px solid #b7c3d7;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:800;color:#2c3e7a}.review-letter-input{border:0;border-bottom:2px solid #b7c3d7;background:transparent;text-align:center;outline:0;color:#1f2d55;font:800 23px inherit}.review-letter-input:focus{border-bottom-color:#2c3e7a;border-bottom-width:3px}.review-letter.gap{border:0;width:10px}.review-full-input{display:block;width:100%;max-width:310px;box-sizing:border-box;margin:5px auto 16px;border:0;border-bottom:2.5px solid #2c3e7a;background:transparent;padding:10px 4px;text-align:center;color:#1f2d55;font:800 23px inherit;outline:0}.review-full-input::placeholder{font-size:14px;font-weight:400;color:#a9b2c1}.review-check{width:100%;max-width:300px;margin-top:14px}.review-scramble-answer{min-height:70px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:7px;padding:12px;margin:0 0 14px;border:1px dashed #b8c5dc;border-radius:14px;background:#fff;color:#929baa;font-size:13px}.review-scramble-answer span{background:#eaf0ff;color:#2c3e7a;padding:7px 9px;border-radius:9px;font-weight:700}.review-chosen-chunk{border:0;background:#eaf0ff;color:#2c3e7a;padding:7px 9px;border-radius:9px;font:700 13px inherit;cursor:pointer}.review-scramble-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 6px}.review-chunk{border:1px solid #d5dfef;background:#fff;color:#273142;border-radius:10px;padding:9px 11px;font:600 14px inherit;cursor:pointer}.review-result{margin-top:22px;padding:13px;border-radius:12px;font-size:15px}.review-result.right{background:#eafaf1;color:#1e7e45}.review-result.wrong{background:#fff0ed;color:#bf4a32}.review-answer-value{display:block;margin-top:5px;font-size:16px;font-weight:800;line-height:1.5}.review-answer-example{margin-top:9px;padding-top:9px;border-top:1px solid rgba(31,45,85,.12);text-align:left;line-height:1.55;color:#344057}.review-answer-target{color:#2c3e7a;text-decoration:underline;text-underline-offset:3px}.review-next{margin-top:12px;width:100%}.review-done{padding-top:82px}.review-done>div{font-size:58px;margin-bottom:12px}

/* REVIEW — dashboard, notebook and iOS-like session */
.review-option.right-answer{background:#eafaf1!important;border-color:#27ae60!important;color:#1e7e45!important;opacity:1!important}.review-option.wrong-answer{background:#fff0ed!important;border-color:#d64541!important;color:#bf3d2e!important;opacity:1!important}.review-example-feedback{margin-top:20px;padding:14px;border-radius:14px;background:#fff;color:#344057;line-height:1.55;text-align:left;animation:reviewResultIn .24s cubic-bezier(.2,.8,.2,1) both}.review-example-feedback small{display:block;margin-top:7px;color:#7b8798;font-size:13px}
.review-type-status{margin-top:20px;font-size:15px;font-weight:800;text-align:center;animation:reviewResultIn .24s cubic-bezier(.2,.8,.2,1) both}.review-type-status.right{color:#1e7e45}.review-type-status.wrong{color:#bf3d2e}
.review-feedback-word{margin:0 0 9px;padding-bottom:9px;border-bottom:1px solid #edf0f4;text-align:left;color:#1f2d55;font-size:15px}.review-feedback-word b{font-size:17px}.review-feedback-word span{margin-left:7px;color:#7b8798;font-size:13px}
.review-home,.review-notebook-page,.review-session{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.review-home{padding:18px 16px;text-align:left}.review-notebook-card{width:100%;border:0;background:#fff;border-radius:20px;padding:17px;display:flex;align-items:center;gap:13px;text-align:left;box-shadow:0 4px 18px rgba(31,45,85,.07);cursor:pointer;color:#1f2d55}.review-notebook-icon{width:43px;height:43px;border-radius:14px;background:#eaf0ff;color:#2c3e7a;display:grid;place-items:center;font-size:24px}.review-notebook-card span:nth-child(2){display:grid;gap:3px;flex:1}.review-notebook-card b{font-size:17px}.review-notebook-card small{font-size:13px;color:#7d8898}.review-notebook-card i{font-style:normal;font-size:28px;color:#9ca9bc}.review-chart-card{margin:15px 0 18px;background:#fff;border-radius:20px;padding:17px;box-shadow:0 4px 18px rgba(31,45,85,.07)}.review-chart-title{display:flex;justify-content:space-between;align-items:baseline;color:#1f2d55;font-weight:800}.review-chart-title small{font-size:11px;color:#8591a1;font-weight:600}.review-chart{height:156px;margin-top:16px;display:flex;align-items:end;justify-content:space-around;gap:7px}.review-chart-col{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:6px;min-width:0}.review-chart-col>b{font-size:13px;color:#2c3e7a}.review-chart-track{height:105px;width:100%;max-width:31px;border-radius:9px;background:#eef1f6;display:flex;align-items:end;overflow:hidden}.review-chart-track i{width:100%;border-radius:9px;background:linear-gradient(#5974c5,#2c3e7a);transition:height .35s ease}.review-chart-col span{font-size:10px;white-space:nowrap;color:#7c8797}.review-start{margin:0 0 10px;box-shadow:0 4px 12px rgba(39,174,96,.22)}
.review-demo-picker{padding-bottom:26px;user-select:none;-webkit-user-select:none}.review-demo-picker>p{margin:18px 18px 12px;color:#667387;font-size:14px;line-height:1.55;text-align:center}.review-demo-count{text-align:center;color:#7d8898;font-size:13px;margin-bottom:13px}.review-demo-count b{color:#2c3e7a;font-size:17px}.review-demo-words{display:grid;gap:8px;padding:0 13px 16px}.review-demo-word{width:100%;border:1px solid transparent;background:#fff;border-radius:16px;padding:13px;display:grid;grid-template-columns:25px 1fr;gap:10px;align-items:center;text-align:left;color:#1f2d55;box-shadow:0 3px 12px rgba(31,45,85,.06);cursor:pointer}.review-demo-word.selected{border-color:#2c3e7a;background:#f1f4ff;box-shadow:0 0 0 2px rgba(44,62,122,.1)}.review-demo-mark{width:21px;height:21px;border:1.5px solid #c4cddb;border-radius:50%;display:grid;place-items:center;color:transparent;font-size:13px;font-weight:900}.review-demo-word.selected .review-demo-mark{border-color:#2c3e7a;background:#2c3e7a;color:#fff}.review-demo-word>span:last-child{display:grid;grid-template-columns:auto 1fr;gap:2px 8px}.review-demo-word b{font-size:16px}.review-demo-word small{font-size:12px;color:#8792a1}.review-demo-word i{grid-column:1/-1;font-style:normal;font-size:13px;color:#657184}.review-demo-picker .review-start{display:block;width:calc(100% - 26px);margin:0 13px}
.review-notebook-page{padding-bottom:25px}.review-topbar,.review-session-head{z-index:20}.review-session-head{top:0}.review-topbar{height:58px;padding:7px 13px;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;text-align:center;border-bottom:1px solid rgba(211,219,230,.75);color:#1f2d55}.review-back{width:38px;height:38px;border:0;background:#fff;border-radius:12px;font:400 34px/30px inherit;color:#2c3e7a;cursor:pointer}.review-topbar b{font-size:17px}.review-level-list{padding:14px 13px;display:grid;gap:10px}.review-level-card{border:0;background:#fff;border-radius:17px;padding:17px;display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;text-align:left;box-shadow:0 3px 14px rgba(31,45,85,.06);color:#1f2d55;cursor:pointer}.review-level-card span{font-size:17px;font-weight:800}.review-level-card b{font-size:19px}.review-level-card i{font-style:normal;color:#8591a1;font-size:13px}.review-word-list{background:#fff;margin:14px 13px;border-radius:18px;overflow:hidden;box-shadow:0 3px 14px rgba(31,45,85,.06)}.review-word-row{min-height:70px;padding:10px 12px;display:grid;grid-template-columns:38px 1fr 34px;align-items:center;gap:8px;border-bottom:1px solid #edf0f4}.review-word-row:last-child{border-bottom:0}.review-row-speak{border:0;background:#eaf0ff;color:#2c3e7a;width:34px;height:34px;border-radius:11px;cursor:pointer}.review-word-row b{display:inline-block;color:#1f2d55;font-size:16px}.review-word-row small{margin-left:8px;color:#8c97a7;font-size:12px}.review-word-row p{margin-top:3px;color:#657184;font-size:13px}.review-row-delete{border:0;background:#fff0ed;color:#c34c39;width:30px;height:30px;border-radius:10px;font-size:23px;line-height:1;cursor:pointer}
.review-session{position:fixed;inset:0;z-index:9998;width:100%;max-width:480px;height:100vh;height:100dvh;margin:0 auto;padding:0;text-align:center;background:#f5f5f5;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:none}.review-session-head{border-bottom:1px solid #dfe5ed}.review-session-bar{height:56px;padding:max(env(safe-area-inset-top,0px),7px) 13px 7px;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;color:#1f2d55}.review-session-bar button{width:38px;height:38px;border:0;background:#fff;border-radius:12px;color:#2c3e7a;font:400 30px/32px inherit;cursor:pointer}.review-session-bar b{font-size:17px}.review-session-bar span{font-size:11px;color:#7d8898}.review-progress{height:4px;background:#e4e9f1;overflow:hidden}.review-progress i{display:block;height:100%;background:#27ae60;border-radius:0 3px 3px 0;transition:width .3s ease}.review-question-stage{padding:23px 18px max(env(safe-area-inset-bottom,35px),35px);animation:reviewQuestionIn .24s cubic-bezier(.2,.8,.2,1) both}.review-question-stage.review-question-leave{animation:reviewQuestionOut .24s cubic-bezier(.2,.8,.2,1) both}.review-count{margin-bottom:25px}.review-result{animation:reviewResultIn .24s cubic-bezier(.2,.8,.2,1) both}.review-next{display:block;margin:12px auto 0;width:100%;max-width:300px;border-radius:999px;background:#27ae60;box-shadow:0 4px 12px rgba(39,174,96,.22)}
@keyframes reviewQuestionIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}@keyframes reviewQuestionOut{to{opacity:0;transform:translateX(-28px)}}@keyframes reviewResultIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
@keyframes reviewRouteOutForward{to{opacity:0;transform:translateX(-22px)}}@keyframes reviewRouteInForward{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:translateX(0)}}@keyframes reviewRouteOutBack{to{opacity:0;transform:translateX(22px)}}@keyframes reviewRouteInBack{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:translateX(0)}}#main.review-route-out-forward{animation:reviewRouteOutForward .24s cubic-bezier(.2,.8,.2,1) both;pointer-events:none}#main.review-route-in-forward{animation:reviewRouteInForward .24s cubic-bezier(.2,.8,.2,1) both}#main.review-route-out-back{animation:reviewRouteOutBack .24s cubic-bezier(.2,.8,.2,1) both;pointer-events:none}#main.review-route-in-back{animation:reviewRouteInBack .24s cubic-bezier(.2,.8,.2,1) both}
.review-start,.review-check,.review-next,.review-demo,.review-push,.review-audio,.review-done button{border-radius:999px}.review-done{padding-top:96px}.review-done h1{font-size:25px}.review-row-speak{display:grid;place-items:center}.review-row-speak .icon-speak{width:18px;height:18px}.review-chart-col:nth-child(1) .review-chart-track i{background:linear-gradient(#72d4c1,#20a486)}.review-chart-col:nth-child(2) .review-chart-track i{background:linear-gradient(#78a9f7,#3973d2)}.review-chart-col:nth-child(3) .review-chart-track i{background:linear-gradient(#b69df6,#7558c9)}.review-chart-col:nth-child(4) .review-chart-track i{background:linear-gradient(#f4b66c,#df8129)}.review-chart-col:nth-child(5) .review-chart-track i{background:linear-gradient(#ef8aa1,#c95370)}

/* REVIEW — cấp độ Sổ tay, streak và phản hồi chạm thống nhất */
.review-check{background:#e3e7ed!important;color:#4a5565!important;box-shadow:0 2px 8px rgba(65,78,95,.08);transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.review-check:disabled{background:#eef1f5!important;color:#a4adba!important;opacity:1}.review-check:active:not(:disabled),.review-start:active,.review-next:active{transform:scale(.975);box-shadow:0 1px 5px rgba(31,45,85,.15)}.review-start,.review-next{transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}.review-start:active,.review-next:active{filter:brightness(.94)}
.review-tier-demo{width:100%;margin:0 0 10px;border:1px solid #d9e1ec;background:#fff;color:#49576b;border-radius:999px;padding:12px;font:700 14px inherit;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}.review-tier-demo:active{transform:scale(.98);box-shadow:0 2px 8px rgba(31,45,85,.1)}
.review-notebook-card{position:relative;isolation:isolate;overflow:hidden;min-height:92px}.review-notebook-card>*{position:relative;z-index:2}.review-notebook-card span.review-notebook-copy{display:grid;gap:3px;flex:1;min-width:0}.review-notebook-copy em{font-style:normal;font-size:11px;line-height:1.35;letter-spacing:-.01em;white-space:nowrap;color:#7d8898}.review-notebook-card span.review-notebook-icon{display:grid;place-items:center;flex:0 0 43px}.review-notebook-icon svg{width:23px;height:23px}
.notebook-tier-rookie{background:#eef1f5;color:#536073}.notebook-tier-rookie .review-notebook-icon{background:#e1e6ec;color:#8a96a6}.notebook-tier-rookie small,.notebook-tier-rookie .review-notebook-copy em,.notebook-tier-rookie i{color:#8792a1}
.notebook-tier-diligent{background:#fff;border:1px solid #e4e8ef}.notebook-tier-diligent .review-notebook-icon{background:#f0f3f7;color:#58677c}
.notebook-tier-bookworm{background:linear-gradient(145deg,#fff6d9,#feeba2);color:#332b1a;border:1px solid rgba(232,184,45,.3);box-shadow:0 7px 22px rgba(210,161,28,.16)}.notebook-tier-bookworm .review-notebook-icon{background:rgba(255,255,255,.52);color:#6a4a05;border:1px solid rgba(221,172,32,.22)}.notebook-tier-bookworm small,.notebook-tier-bookworm .review-notebook-copy em,.notebook-tier-bookworm i{color:#715a27}.notebook-tier-bookworm::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.72) 48%,transparent 66%);transform:translateX(-120%) skewX(-10deg);animation:notebookShine 13s cubic-bezier(.4,0,.2,1) infinite}
.notebook-tier-master{background:linear-gradient(145deg,#d94242,#a61c28);color:#fff;box-shadow:0 8px 25px rgba(183,39,47,.27)}.notebook-tier-master small,.notebook-tier-master .review-notebook-copy em,.notebook-tier-master i{color:#ffe0df}.notebook-tier-master .review-notebook-icon{position:relative;overflow:hidden;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.24)}.notebook-tier-master .review-notebook-icon::after{content:'';position:absolute;inset:-50% auto -50% -42%;width:20px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);transform:rotate(12deg);animation:notebookIconShine 5.6s cubic-bezier(.4,0,.2,1) infinite}
.notebook-tier-scholar{background:linear-gradient(145deg,#278ce6,#174eab);color:#fff;box-shadow:0 8px 25px rgba(31,112,211,.3)}.notebook-tier-scholar small,.notebook-tier-scholar .review-notebook-copy em,.notebook-tier-scholar i{color:#d7ecff}.notebook-tier-scholar .review-notebook-icon{position:relative;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.23)}
.notebook-tier-legendary,.notebook-tier-legendary-lit{background:linear-gradient(145deg,#9a6cff,#5b27b8);color:#fff;box-shadow:0 8px 27px rgba(112,70,213,.34)}.notebook-tier-legendary small,.notebook-tier-legendary-lit small,.notebook-tier-legendary .review-notebook-copy em,.notebook-tier-legendary-lit .review-notebook-copy em,.notebook-tier-legendary i,.notebook-tier-legendary-lit i{color:#eadfff}.notebook-tier-legendary .review-notebook-icon,.notebook-tier-legendary-lit .review-notebook-icon{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.24)}.notebook-tier-legendary-lit .review-notebook-icon{background:rgba(255,255,255,.3);box-shadow:0 0 8px rgba(255,255,255,.72),0 0 19px rgba(223,201,255,.75)}
.notebook-tier-legendary-lit{outline:1px solid rgba(238,225,255,.76);outline-offset:2px}
@keyframes notebookShine{0%,68%{transform:translateX(-120%) skewX(-10deg)}84%,100%{transform:translateX(150%) skewX(-10deg)}}@keyframes notebookIconShine{0%,8%{transform:translateX(0) rotate(12deg)}55%,100%{transform:translateX(118px) rotate(12deg)}}

/* Tinh chỉnh vòng sáng: đốm bám viền và để lại dải ánh sáng mảnh, mờ dần. */

/* Các nút hành động của phiên ôn tập */
.review-check{background:#2c3e7a!important;color:#fff!important;box-shadow:0 4px 12px rgba(44,62,122,.22)}.review-check:disabled{background:#96a3c6!important;color:#f7f8ff!important;opacity:.56}.review-check:active:not(:disabled),.review-start:active,.review-next:active{transform:scale(.972);box-shadow:0 1px 5px rgba(31,45,85,.2)}.review-next{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#27ae60!important;color:#fff!important;box-shadow:0 4px 12px rgba(39,174,96,.22)}.review-next svg{width:18px;height:18px}

/* Streak ở thanh tiêu đề xanh toàn app, không nằm trong màn câu hỏi. */
.header-right{display:flex;align-items:center;justify-content:flex-end;min-width:44px}.header .review-header-streak{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:39px;height:34px;padding:0 7px;border:0;border-radius:11px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.6);font:700 13px inherit;cursor:pointer;transition:transform .16s ease,background .16s ease}.header .review-header-streak svg{width:18px;height:18px}.header .review-header-streak b{font-size:13px;line-height:1}.header .review-header-streak.warm{background:rgba(255,205,74,.2);color:#ffd469}.header .review-header-streak.hot{background:rgba(255,127,89,.22);color:#ffb26c}.header .review-header-streak:active{transform:scale(.94)}

/* Trang chi tiết streak */
.review-streak-page{animation:reviewZoomIn .22s cubic-bezier(.2,.8,.2,1) both}.review-streak-hero.legend{background:linear-gradient(145deg,#ff7868,#dd342d);color:#fff;box-shadow:0 0 0 7px rgba(246,84,62,.1),0 9px 29px rgba(223,65,49,.42)}.review-streak-hero.legend span{filter:drop-shadow(0 0 5px rgba(255,246,193,.96)) drop-shadow(0 0 12px rgba(255,193,90,.7))}.review-streak-message.keep-fire{font-weight:800;color:#d94635;letter-spacing:.01em}.review-streak-goal-track{display:grid;grid-template-columns:31px 1fr 36px;align-items:center;gap:9px;margin-top:12px}.review-streak-goal-track>i{display:block;height:7px;margin:0;overflow:hidden;border-radius:99px;background:#edf0f4}.review-goal-calendar{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;background:#f1f4f7;color:#778497}.review-goal-calendar svg{width:17px;height:17px}.review-goal-fire{position:relative;width:34px;height:34px;display:grid;place-items:center;color:#aeb7c3}.review-goal-fire svg{position:absolute;width:31px;height:31px}.review-goal-fire b{position:relative;z-index:1;font-size:11px;color:#687586}.review-goal-fire.complete{color:#ed6039;filter:drop-shadow(0 0 5px rgba(239,125,49,.45))}.review-goal-fire.complete b{color:#fff}.review-goal-fire.complete svg{filter:drop-shadow(0 0 3px rgba(255,211,83,.9))}.review-calendar-card h2{margin-bottom:14px}.review-calendar-enter-left{animation:reviewCalendarInLeft .24s cubic-bezier(.2,.8,.2,1) both}.review-calendar-enter-right{animation:reviewCalendarInRight .24s cubic-bezier(.2,.8,.2,1) both}@keyframes reviewCalendarInLeft{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}@keyframes reviewCalendarInRight{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
.review-level-card.level-1{background:linear-gradient(135deg,#72d4c1,#20a486);color:#fff}.review-level-card.level-2{background:linear-gradient(135deg,#78a9f7,#3973d2);color:#fff}.review-level-card.level-3{background:linear-gradient(135deg,#b69df6,#7558c9);color:#fff}.review-level-card.level-4{background:linear-gradient(135deg,#f4b66c,#df8129);color:#fff}.review-level-card.level-5{background:linear-gradient(135deg,#ef8aa1,#c95370);color:#fff}.review-level-card[class*="level-"] i{color:rgba(255,255,255,.82)}
.review-tier-demo-page{padding-bottom:26px;user-select:none;-webkit-user-select:none}.review-tier-demo-page>p{margin:18px 18px 14px;text-align:center;color:#687588;font-size:13px;line-height:1.5}.review-tier-demo-list{display:grid;gap:15px;padding:0 13px}.review-tier-demo-item>small{display:block;margin:0 0 6px 3px;color:#7b8798;font-size:12px;font-weight:700}.review-tier-demo-item .review-notebook-card{cursor:default}
.review-session-bar .review-streak-button{display:inline-flex;align-items:center;justify-content:center;gap:3px;width:auto;min-width:38px;padding:0 7px;height:38px;border-radius:12px;background:#fff;color:#bbc3ce;font:inherit;justify-self:end}.review-streak-button svg{width:19px;height:19px}.review-session-bar .review-streak-button b{font-size:13px;line-height:1;color:currentColor}.review-session-bar .review-streak-button.warm{color:#e6a51e;background:#fff9e7}.review-session-bar .review-streak-button.hot{color:#dc4d35;background:#fff0ed}.review-streak-button:active{transform:scale(.94)}
.review-streak-page{min-height:calc(100vh - 70px);padding-bottom:28px;background:#f5f5f5;animation:reviewZoomIn .22s cubic-bezier(.2,.8,.2,1) both;user-select:none;-webkit-user-select:none}.review-streak-head{z-index:5;height:58px;padding:7px 13px;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;text-align:center;border-bottom:1px solid rgba(211,219,230,.75);color:#1f2d55}.review-streak-head button{width:38px;height:38px;border:0;border-radius:12px;background:#fff;color:#2c3e7a;font:400 30px/32px inherit;cursor:pointer}.review-streak-head b{font-size:17px}.review-streak-hero{margin:25px auto 10px;width:154px;height:154px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#eef1f5;color:#aeb7c3;box-shadow:inset 0 0 0 1px rgba(161,174,190,.12)}.review-streak-hero span{height:34px}.review-streak-hero svg{width:32px;height:32px}.review-streak-hero strong{font-size:48px;font-weight:300;letter-spacing:-2px;line-height:1}.review-streak-hero small{font-size:12px;font-weight:700;margin-top:4px}.review-streak-hero.warm{background:linear-gradient(145deg,#fff8d9,#fff0af);color:#d99b18;box-shadow:0 8px 24px rgba(218,165,38,.19)}.review-streak-hero.hot{background:linear-gradient(145deg,#fff0e7,#ffd2bc);color:#df5639;box-shadow:0 8px 24px rgba(218,85,53,.2)}.review-streak-message{margin:0 auto 22px;max-width:290px;text-align:center;font-size:14px;line-height:1.5;color:#657184}.review-streak-goal,.review-calendar-card{margin:0 16px 14px;padding:16px;background:#fff;border-radius:19px;box-shadow:0 3px 14px rgba(31,45,85,.055)}.review-streak-goal>div{display:flex;justify-content:space-between;gap:12px;color:#1f2d55;font-size:14px}.review-streak-goal span{color:#d38a18;font-weight:800}.review-streak-goal i{display:block;height:7px;margin-top:12px;overflow:hidden;border-radius:99px;background:#edf0f4}.review-streak-goal em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f2bc48,#e48727)}.review-calendar-card h2{font-size:15px;color:#1f2d55;margin-bottom:13px}.review-calendar-head{display:grid;grid-template-columns:35px 1fr 35px;align-items:center;text-align:center;margin-bottom:13px}.review-calendar-head b{font-size:14px;text-transform:capitalize;color:#3b485c}.review-calendar-head button{width:31px;height:31px;border:0;border-radius:10px;background:#f0f3f7;color:#2c3e7a;font:400 27px/22px inherit;cursor:pointer}.review-calendar-head button:disabled{opacity:.35}.review-calendar-weekdays,.review-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.review-calendar-weekdays{margin-bottom:6px;color:#9aa4b2;font-size:10px;font-weight:800}.review-calendar-grid{gap:5px}.review-calendar-day{height:29px;border-radius:9px;display:grid;place-items:center;font-size:12px;color:#566376}.review-calendar-day.outside{color:transparent}.review-calendar-day.learned{background:#f29a36;color:#fff;font-weight:800;box-shadow:0 2px 6px rgba(230,132,32,.23)}.review-calendar-day.today:not(.learned){box-shadow:inset 0 0 0 1px #d5dde8}.review-calendar-day.today{font-weight:800}@keyframes reviewZoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes reviewZoomOut{to{opacity:0;transform:scale(1.04)}}#main.review-zoom-out{animation:reviewZoomOut .21s ease both;pointer-events:none}

/* Hai nút thay nhau giữ nguyên đúng kích thước và vị trí. */
.review-check,.review-next{box-sizing:border-box;min-height:48px;margin-top:14px!important}.review-check{display:inline-flex;align-items:center;justify-content:center}.review-next{display:inline-flex;align-items:center;justify-content:center}

/* Học bá — giữ nguyên cơ chế blue.html: ba vệt đồng tâm và đúng một đốm. */
.review-notebook-icon>svg.review-scholar-edge{position:absolute!important;inset:0!important;z-index:1!important;width:43px!important;height:43px!important;overflow:visible;pointer-events:none}.review-scholar-glow,.review-scholar-dot{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;animation-duration:8s;animation-timing-function:linear;animation-iteration-count:infinite}.review-scholar-glow.soft{stroke:rgba(151,215,255,.28);stroke-width:1.2;stroke-dasharray:16 84;filter:drop-shadow(0 0 3px rgba(112,196,255,.55));animation-name:reviewScholarSoft}.review-scholar-glow.mid{stroke:rgba(203,239,255,.58);stroke-width:1.15;stroke-dasharray:10 90;filter:drop-shadow(0 0 2px rgba(183,230,255,.65));animation-name:reviewScholarMid}.review-scholar-glow.core{stroke:rgba(247,253,255,.95);stroke-width:1;stroke-dasharray:4 96;filter:drop-shadow(0 0 1.5px rgba(235,250,255,.8));animation-name:reviewScholarCore}.review-scholar-dot{stroke:#f4fcff;stroke-width:2.6;stroke-dasharray:.2 99.8;filter:drop-shadow(0 0 2px rgba(255,255,255,.98)) drop-shadow(0 0 6px rgba(173,224,255,.9)) drop-shadow(0 0 11px rgba(100,181,246,.48));animation-name:reviewScholarDot}.notebook-tier-scholar .review-notebook-icon::before,.notebook-tier-scholar .review-notebook-icon::after{content:none!important}@keyframes reviewScholarSoft{from{stroke-dashoffset:8}to{stroke-dashoffset:-92}}@keyframes reviewScholarMid{from{stroke-dashoffset:5}to{stroke-dashoffset:-95}}@keyframes reviewScholarCore{from{stroke-dashoffset:2}to{stroke-dashoffset:-98}}@keyframes reviewScholarDot{from{stroke-dashoffset:.1}to{stroke-dashoffset:-99.9}}

/* Huyền thoại — dùng đúng quỹ đạo theo kích thước thật của thẻ như violet.html. */
.review-notebook-card.notebook-tier-legendary,.review-notebook-card.notebook-tier-legendary-lit{overflow:visible}.review-notebook-card>svg.review-legend-edge{position:absolute!important;inset:0!important;z-index:1!important;width:100%!important;height:100%!important;overflow:visible;pointer-events:none}.review-legend-edge rect{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;x:.5px;y:.5px;width:calc(100% - 1px);height:calc(100% - 1px);rx:19.5px}.review-legend-glow{stroke:rgba(250,245,255,var(--opacity));stroke-width:var(--edge-width);stroke-dasharray:var(--dash) var(--gap);animation:reviewLegendFlow 12s linear infinite}.review-legend-dot{stroke:#fff;stroke-width:2.5;stroke-dasharray:.2 99.8;filter:drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 5px rgba(222,194,255,.62));animation:reviewLegendDot 12s linear infinite}@keyframes reviewLegendFlow{from{stroke-dashoffset:var(--start)}to{stroke-dashoffset:var(--end)}}@keyframes reviewLegendDot{from{stroke-dashoffset:.1}to{stroke-dashoffset:-99.9}}

/* Streak tối giản: chỉ còn thanh tiến trình nhỏ, nền xám và bo tròn. */
.review-streak-goal-title{display:block!important;text-align:left}.review-streak-goal-track{display:block!important;margin:12px auto 0!important;max-width:230px}.review-goal-progress{position:relative;display:grid!important;place-items:center;width:100%;height:18px;overflow:hidden;border-radius:999px!important;background:#e4e6ea!important;color:#485365!important}.review-goal-progress em{position:absolute;inset:0 auto 0 0;display:block;height:100%;margin:0!important;border-radius:999px!important;background:linear-gradient(90deg,#f4aaa3,#ed7770)!important}.review-goal-progress b{position:relative;z-index:1;color:#4c5563!important;font-size:11px!important;font-weight:800!important;line-height:1}.review-streak-hero.hot svg path:first-child,.review-streak-hero.legend svg path:first-child{fill:#e34a36;stroke:#cf3b2c}.review-streak-hero.hot svg path:last-child,.review-streak-hero.legend svg path:last-child{fill:#ffd34f;stroke:#edae22}.review-calendar-card{padding-bottom:22px}.review-calendar-grid{column-gap:5px;row-gap:11px}.review-calendar-day{width:32px;height:32px;justify-self:center;border-radius:9px}.review-calendar-day.learned{background:#f2a39d;color:#fff;box-shadow:0 2px 6px rgba(221,101,92,.2)}.review-calendar-day.outside{color:transparent!important;background:transparent!important;box-shadow:none!important}

/* Hai chỉ số streak nằm cùng hàng. */
.review-streak-stat-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(98px,.75fr);gap:10px;margin:0 16px 14px}.review-streak-stat-block{min-width:0;padding:14px;background:#fff;border-radius:19px;box-shadow:0 3px 14px rgba(31,45,85,.055);color:#1f2d55}.review-streak-stat-block>b,.review-calendar-card h2{display:block;font-size:16px;line-height:1.35}.review-streak-goal-block .review-streak-goal-track{width:100%;max-width:none;margin:12px 0 0!important}.review-streak-goal-block .review-goal-progress{height:17px;background:#e5e7eb!important}.review-streak-goal-block .review-goal-progress em{position:absolute;background:#f2bd3f!important}.review-streak-goal-block .review-goal-progress.has-progress em::after{content:'';position:absolute;top:0;right:0;width:3px;height:100%;background:#b98012}.review-streak-record-block{display:flex;flex-direction:column;justify-content:space-between;gap:8px}.review-streak-record-block>span{display:flex;align-items:baseline;gap:4px;color:#6b7585;font-size:11px;font-weight:700}.review-streak-record-block strong{color:#d58b16;font-size:31px;line-height:.95;letter-spacing:-1px}.review-calendar-day.learned{background:#e46f68!important;box-shadow:none!important}

.review-streak-record-block strong{color:#df5148;font-weight:500}

/* SEARCH BOX */
.search-box {
  background: #2c3e7a;
  padding: 12px 16px 0;
}
.search-input-wrap {
  display: flex;
  background: white;
  border-radius: 25px;
  overflow: hidden;
  align-items: center;
}
.search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 16px;
  font-size: 16px;
  background: transparent;
}
.search-btn {
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  padding: 11px;
  color: #2c3e7a;
  cursor: pointer;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
}
.search-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.search-clear-btn {
  background: #fff;
  color: #2c3e7a;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 21px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 5px rgba(31,45,85,.12);
}
.search-clear-btn:active { background: #eaf0ff; transform: scale(.94); }
.lookup-empty-note {
  color: #8a93a3;
  font-size: 13px;
  text-align: center;
  padding: 36px 24px;
  line-height: 1.5;
}

/* MODE TOGGLE */
.mode-toggle {
  display: flex;
  justify-content: center;
  padding: 12px 0 14px;
}
.toggle-track {
  position: relative;
  display: flex;
  background: rgba(255,255,255,0.2);
  border-radius: 25px;
  padding: 3px;
  width: 220px;
  cursor: pointer;
}
.toggle-option {
  flex: 1;
  text-align: center;
  padding: 7px 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  position: relative;
  z-index: 2;
  transition: color 0.25s;
  user-select: none;
}
.toggle-option.active { color: #2c3e7a; }
.toggle-indicator {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  bottom: 3px;
  background: white;
  border-radius: 22px;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  z-index: 1;
}
.toggle-indicator.right { transform: translateX(100%); }

/* LESSONS */
.loading {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 15px;
  line-height: 1.8;
}
.section-title {
  padding: 14px 16px 8px;
  font-size: 13px;
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.back-inline-btn {
  background: none;
  border: none;
  color: #2c3e7a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.collection-card {
  background: #27ae60;
  margin: 8px 12px;
  border-radius: 12px;
  padding: 16px;
  color: white;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 6px rgba(39,174,96,0.3);
}
.collection-name { font-size: 17px; font-weight: 700; }
.collection-meta { font-size: 12px; opacity: 0.85; margin-top: 4px; }
.collection-arrow { font-size: 24px; }
.topic-card {
  background: white;
  margin: 6px 12px;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.topic-name { font-size: 15px; font-weight: 600; }
.topic-vi { font-size: 13px; color: #666; margin-top: 2px; }
.topic-count {
  background: #e8f0fe;
  color: #2c3e7a;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}
.word-row {
  background: white;
  margin: 5px 12px;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.word-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}
.word-en { font-size: 16px; font-weight: 700; color: #1a1a1a; }
.word-pos-tag {
  font-size: 11px;
  background: #e8f0fe;
  color: #2c3e7a;
  padding: 2px 7px;
  border-radius: 6px;
}
.word-vi { font-size: 13px; color: #555; margin-top: 3px; }
.word-ipa { font-size: 12px; color: #aaa; }

/* SUGGEST DROPDOWN */
.lookup-area { position: relative; }
.suggest-dropdown {
  display: none;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  z-index: 200;
}
.suggest-item {
  padding: 11px 16px;
  font-size: 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover, .suggest-item:active { background: #f0f4ff; }

/* MISMATCH NOTICE */
.mismatch-notice {
  margin-top: 10px;
  text-align: center;
}
.mismatch-notice a {
  color: #2c3e7a;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* TOP ZONE - fix chiều cao để nút toggle không nhảy */
.top-zone {
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.translate-note {
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  text-align: center;
  padding: 0 20px;
  line-height: 1.5;
  min-height: 48px;
  align-items: center;
  justify-content: center;
}

/* GOOGLE-TRANSLATE STYLE CARD */
.translate-panel { padding: 12px; }
.gt-card {
  background: white;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  overflow: hidden;
}
.gt-section {
  padding: 14px 16px 10px;
}
.gt-lang-label {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  margin-bottom: 6px;
}
.gt-lang-to { color: #2c3e7a; }
.gt-textarea {
  width: 100%;
  border: none;
  outline: none;
  font-size: 17px;
  font-family: inherit;
  resize: none;
  min-height: 70px;
  overflow: hidden;
  line-height: 1.5;
  color: #1a1a1a;
  padding: 5px 40px 18px 0;
}
.gt-result {
  font-size: 17px;
  line-height: 1.5;
  color: #2c3e7a;
  min-height: 40px;
  padding: 4px 0;
}
.gt-actions {
  display: flex;
  gap: 22px;
  padding: 6px 0 2px;
}
.gt-icon-btn {
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
}
.gt-icon-btn:active { background: #f0f0f0; }
.gt-icon-btn.gt-blue { color: #2c3e7a; }
.gt-icon-btn.copied { color: #27ae60; }

/* NÚT GÓC Ô DỊCH: chỉ còn chức năng XÓA (X), chỉ hiện khi có chữ */
.gt-input-wrap { position: relative; }
.gt-corner-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 29px;
  height: 29px;
  background: #fff;
  border: none;
  color: #2c3e7a;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  box-shadow: 0 1px 5px rgba(31,45,85,.12);
  transition: background .15s, color .15s, transform .12s;
}
.gt-corner-btn:active { background: #eaf0ff; color: #2c3e7a; transform:scale(.94); }

/* LỊCH SỬ 5 CÂU DỊCH GẦN NHẤT — mỗi mục nằm cố định dưới nút switch.
   Vuốt sang trái để lộ nút Xóa màu đỏ phía sau (kiểu Mail/Messages iPhone),
   nút Xóa phóng to mượt mà khi lộ ra dần theo thao tác vuốt. */
.gt-history-section { margin-top: 14px; }
.gt-history-title { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.75); padding: 0 4px 6px; }
.gt-history-list { background: white; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.gt-history-row { position: relative; overflow: hidden; touch-action: pan-y; border-bottom: 1px solid #f0f0f0; }
.gt-history-row:last-child { border-bottom: none; }
.gt-history-actions { position: absolute; top: 0; right: 0; bottom: 0; width: 68px; display: flex; align-items: center; justify-content: center; background: #ff3b30; z-index: 1; }
.gt-history-delete { height: 100%; width: 100%; border: none; background: none; color: #fff; display: flex; align-items: center; justify-content: center; transform: scale(0.7); opacity: 0.7; cursor: pointer; }
.gt-history-content { position: relative; z-index: 2; background: white; padding: 10px 14px; cursor: pointer; }
.gt-history-tag { font-size: 10px; font-weight: 700; color: #2c3e7a; background: #e8f0fe; display: inline-block; padding: 1px 6px; border-radius: 4px; margin-bottom: 4px; }
.gt-history-src { font-size: 14px; color: #1a1a1a; line-height: 1.4; }
.gt-history-res { font-size: 12.5px; color: #888; line-height: 1.4; margin-top: 2px; }
/* DIVIDER + DỊCH NGAY */
.gt-divider {
  position: relative;
  border-top: 1.5px solid #cfe0f5;
  display: flex;
  justify-content: flex-end;
  padding: 0 16px;
}
.gt-translate-btn {
  position: relative;
  top: -18px;
  background: #a8c7fa;
  color: #1a3c7a;
  border: none;
  border-radius: 22px;
  padding: 9px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.gt-translate-btn:active { background: #8eb5f7; }
.gt-arrow { font-size: 16px; }
.gt-result-section { padding-top: 0; margin-top: -8px; }

/* LANG SWITCH BOTTOM */
.gt-lang-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.gt-lang-pill {
  background: white;
  border-radius: 20px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  min-width: 110px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);

}
.gt-swap-btn {
  background: none;
  border: none;
  color: #444;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
}
.gt-swap-btn:active { color: #2c3e7a; }

/* RESULT CARD (tra từ) */
.result-card {
  background: white;
  margin: 12px;
  border-radius: 14px;
  padding: 18px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.result-word-title {
  font-size: 28px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 10px;
}
.ipa-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.speak-btn {
  background: #f0f4ff;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.speak-btn:active { background: #d0d9ff; }
.ipa-text { font-size: 15px; color: #444; }
.meanings-container { margin-top: 14px; }
.meaning-divider {
  border: none;
  border-top: 1.5px solid #cfe0f5;
  margin: 14px -16px;
}
.meaning-block { padding: 2px 0; }
.meaning-text {
  font-size: 17px;
  font-weight: 600;
  color: #2c3e7a;
  margin-bottom: 8px;
  line-height: 1.5;
}
.pos-tag { color: #2c3e7a; font-size: 14px; }
.example-en {
  font-size: 14px;
  font-style: italic;
  color: #444;
  line-height: 1.6;
  margin-bottom: 3px;
}
.example-vi {
  font-size: 13px;
  color: #888;
  line-height: 1.5;
  margin-bottom: 8px;
}
.more-ex-btn {
  background: none;
  border: none;
  color: #2c3e7a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  margin-bottom: 6px;
  display: block;
}
.extra-example {
  padding: 0;
  border-top: none;
}
.save-word-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: none;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* ===== PHIÊN ÂM US / UK ===== */
.ipa-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-bottom: 10px;
}
.ipa-item {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ipa-accent-label {
  font-size: 10px;
  font-weight: 700;
  color: #2c3e7a;
  background: #e8f0fe;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.ipa-text {
  font-size: 15px;
  color: #444;
}

/* Màn hẹp: 2 dòng US / UK xếp dọc cho dễ đọc */
@media (max-width: 380px) {
  .ipa-row-dual { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Danh sách từ trong Bài học */
.word-ipa b {
  font-size: 10px;
  color: #2c3e7a;
  background: #e8f0fe;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 3px;
}

.lemma-note {
  font-size: 13px;
  color: #7a8699;
  background: #f0f4ff;
  border-left: 3px solid #2c3e7a;
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
  margin: -2px 0 14px;
}

/* Phiên ôn tập toàn màn hình: cộng safe-area vào chiều cao thanh trên,
   không ép nội dung 38px vào một hàng chỉ cao 56px trên iPhone tai thỏ. */
.review-session-bar {
  height: auto;
  min-height: 56px;
}
.review-home>.review-start {
  width: auto;
  min-width: 0;
  padding-left: 24px;
  padding-right: 24px;
  margin: 0 auto 10px;
}

/* PROFILE — minimalist iOS */
.bottom-nav .nav-btn {
  flex: 1;
  padding: 4px 7px;
}
.nav-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.header-logo svg {
  width: 23px;
  height: 23px;
}
.profile-bell {
  position: relative;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.profile-bell svg { width: 21px; height: 21px; }
.profile-bell b {
  position: absolute;
  right: -3px;
  top: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 99px;
  background: #ef5750;
  color: #fff;
  font-size: 10px;
  line-height: 17px;
}
.profile-page,.profile-auth,.profile-settings-page,.profile-password-page {
  /* 100vh trên Safari iOS = chiều cao khi đã ẩn thanh công cụ. Khi người dùng
     kéo lên, toolbar ẩn đi, nội dung vừa khít và trang tự bật ngược lại che
     mất dòng credit. 100dvh bám đúng vùng nhìn thấy thật nên không bị bật. */
  min-height: calc(100vh - 128px);
  min-height: calc(100dvh - 128px);
  padding: 24px 16px 20px;
  display: flex;
  flex-direction: column;
}
.profile-identity {
  padding: 8px 0 25px;
  text-align: center;
}
.profile-avatar-control {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 auto 15px;
  display: block;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #d7dee9,0 8px 24px rgba(31,45,85,.13);
  cursor: pointer;
}
.profile-avatar-img,.profile-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#5b74c6,#2c3e7a);
  color: #fff;
  font-size: 40px;
  font-weight: 800;
}
.profile-avatar-control>span:last-of-type {
  position: absolute;
  right: -2px;
  bottom: 2px;
  width: 29px;
  height: 29px;
  border: 2px solid #f5f5f5;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #2c3e7a;
  box-shadow: 0 2px 8px rgba(31,45,85,.18);
  font-size: 13px;
}
.profile-identity h1 {
  color: #1d2939;
  font-size: 23px;
  line-height: 1.25;
}
.profile-identity p {
  margin-top: 5px;
  color: #7a8594;
  font-size: 13px;
}
.profile-ios-group {
  margin: 8px 0;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(31,45,85,.055);
}
.profile-setting-row {
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 12px 15px;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  border-radius: 0;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #303c50;
  font: 500 14px inherit;
  text-align: left;
  cursor: pointer;
}
.profile-setting-row:last-child { border-bottom: 0; }
.profile-setting-row>span:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.profile-setting-row b { font-size: 15px; }
.profile-setting-row small { color: #8993a1; font-size: 11px; font-weight: 500; }
.profile-setting-row i { font-style: normal; font-size: 24px; color: #a0a9b6; }
.profile-setting-row.disabled { color: #aeb5bf; cursor: default; }
.profile-setting-row.disabled small,.profile-setting-row.disabled i { color: #bcc2ca; }
.profile-credit {
  margin: auto auto 0;
  padding-top: 30px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color: #99a2af;
  font-size: 11px;
  text-align: center;
}
.profile-credit a { color: #66758a; }
.profile-auth {
  justify-content: flex-start;
  text-align: center;
}
.profile-auth-mark {
  width: 68px;
  height: 68px;
  margin: 28px auto 15px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#4d65b5,#2c3e7a);
  color: #ffd700;
  font-size: 34px;
  font-weight: 900;
  box-shadow: 0 7px 20px rgba(44,62,122,.22);
}
.profile-auth h1 { color: #1f2d55; font-size: 24px; }
.profile-auth>p {
  max-width: 320px;
  margin: 8px auto 22px;
  color: #718095;
  font-size: 13px;
  line-height: 1.55;
}
.profile-auth>p b { color: #435168; }
.profile-auth-form {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  display: grid;
  gap: 11px;
}
/* Google Identity Services tự vẽ nút/iframe; phần app chỉ căn khung. */
.profile-oauth-slot {
  width: 100%;
  max-width: 360px;
  min-height: 44px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.profile-auth-divider {
  width: 100%;
  max-width: 360px;
  margin: 16px auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9aa4b2;
  font-size: 12px;
}
.profile-auth-divider::before,
.profile-auth-divider::after { content: ''; flex: 1; height: 1px; background: #e2e6ee; }
.profile-auth-form input {
  width: 100%;
  border: 1px solid #dbe1ea;
  /* Bo tròn dạng viên thuốc và cỡ chữ 16px giống hệt .search-input bên tab
     Từ điển, để ô nhập toàn app nhìn như một họ. */
  border-radius: 25px;
  background: #fff;
  padding: 15px 20px;
  color: #263247;
  /* Không dùng shorthand với `inherit`: WebKit bỏ cả khai báo đó và trả chữ
     nhập về cỡ native rất nhỏ. 17px cũng tránh cơ chế phóng to form của iOS. */
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
  -webkit-text-fill-color: currentColor;
  -webkit-text-size-adjust: 100%;
  outline: none;
  box-shadow: 0 1px 3px rgba(31,45,85,.035);
}
/* Placeholder dùng chung token màu với ô Tra từ. -webkit-text-fill-color là
   bắt buộc: Safari iOS ở dark mode sẽ ghi đè màu chữ nếu thiếu dòng này. */
.profile-auth-form input::placeholder,
.profile-auth-form input::-webkit-input-placeholder {
  color: var(--gv-faint);
  -webkit-text-fill-color: var(--gv-faint);
  font-size: 17px;
  opacity: 1;
}
.profile-auth-form input:focus {
  border-color: #687fc7;
  box-shadow: 0 0 0 3px rgba(74,99,180,.1);
}
.profile-auth-form > button {
  border: 0;
  border-radius: 999px;
  padding: 14px;
  background: #2c3e7a;
  color: #fff;
  font: 700 15px inherit;
  cursor: pointer;
}
.profile-auth-form > button:disabled { opacity: .55; }
.profile-password-field { position: relative; display: block; }
.profile-password-field input { padding-right: 52px; }
.profile-password-visibility {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 9px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--gv-raised);
  color: var(--gv-muted);
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.profile-password-visibility svg { display: block; width: 20px; height: 20px; }
.profile-password-visibility.visible { background: var(--gv-primary-soft); color: var(--gv-primary-ink); }
.profile-auth-switch {
  margin: 16px auto 0;
  border: 0;
  background: transparent;
  color: #2c3e7a;
  font: 600 13px inherit;
  cursor: pointer;
}
.profile-auth-forgot {
  margin: 13px auto -2px;
  border: 0;
  background: transparent;
  color: #657492;
  font: 600 12px inherit;
  cursor: pointer;
}
.profile-route-head {
  z-index: 4;
  height: 58px;
  margin: 0 -16px 15px;
  padding: 0 13px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  text-align: center;
  color: #263247;
}
.profile-route-head button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #2c3e7a;
  font: 400 32px/32px inherit;
  cursor: pointer;
}
.profile-route-head b { font-size: 17px; }
.profile-settings-page,.profile-password-page { padding-top: calc(var(--gv-route-h) + 15px); }
.profile-phone-line {
  margin: 5px auto 0;
  border: 0;
  background: transparent;
  color: #7a8594;
  font: 500 13px inherit;
  cursor: pointer;
}
.profile-phone-line i { margin-left: 4px; font-style: normal; font-size: 17px; }
.profile-edit-form { padding: 5px 15px 14px; }
.profile-edit-form label { padding: 11px 0; border-bottom: 1px solid #edf0f4; display: grid; gap: 6px; }
.profile-edit-form label>span { color: #8c96a4; font-size: 11px; font-weight: 650; }
.profile-edit-form input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: #253247;
  font: 550 15px inherit;
  outline: 0;
}
.profile-edit-form input:not([readonly]) { border-bottom-color: #9aa9c2; }
.profile-edit-form input::placeholder { color: #b0b7c1; }
.profile-edit-form>button {
  width: 100%;
  margin-top: 13px;
  padding: 11px;
  border: 0;
  border-radius: 999px;
  background: #eef2ff;
  color: #2c3e7a;
  font: 700 13px inherit;
  cursor: pointer;
}
.profile-edit-form>button:disabled { opacity: .58; }
.profile-switch {
  width: 47px;
  height: 28px;
  flex: 0 0 47px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  background: #d3d7de;
  position: relative;
  transition: background .2s ease;
}
.profile-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .2s ease;
}
.profile-switch:checked { background: #34c759; }
.profile-switch:checked::after { transform: translateX(19px); }
.profile-theme-control {
  padding: 3px;
  border-radius: 10px;
  background: #eef0f4;
  display: flex!important;
  gap: 2px!important;
}
.profile-theme-control button {
  min-width: 52px;
  border: 0;
  border-radius: 8px;
  padding: 6px 8px;
  background: transparent;
  color: #788392;
  font: 650 12px inherit;
}
.profile-theme-control button.active {
  background: #fff;
  color: #263247;
  box-shadow: 0 1px 4px rgba(31,45,85,.12);
}
.profile-language-picker {
  min-height: 58px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #303c50;
}
.profile-language-picker>span:first-child { min-width: 0; display: grid; gap: 3px; }
.profile-language-picker b { font-size: 15px; }
.profile-language-picker small { color: #8993a1; font-size: 11px; font-weight: 500; }
.profile-language-control { padding: 3px; border-radius: 10px; background: #eef0f4; display: flex; gap: 2px; }
.profile-language-control button {
  min-width: 62px; border: 0; border-radius: 8px; padding: 6px 8px; background: transparent;
  color: #788392; font: 650 12px inherit;
}
.profile-language-control button.active { background: #fff; color: #263247; box-shadow: 0 1px 4px rgba(31,45,85,.12); }
.profile-language-picker.compact { margin: 20px auto 0; max-width: 320px; border-radius: 14px; background: #f4f6fa; text-align: left; }
.profile-settings-logout {
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  border: 0;
  border-radius: 17px;
  background: #fff;
  color: #e0453a;
  font: 650 15px inherit;
  cursor: pointer;
}
.profile-password-copy {
  margin: 28px 0 20px;
  text-align: center;
}
.profile-password-copy h1 { color: #1f2d55; font-size: 23px; }
.profile-password-copy p { margin-top: 7px; color: #7d8898; font-size: 13px; }
.profile-notifications {
  position: fixed;
  inset: 0;
  z-index: 10020;
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  margin: auto;
  background: #f5f5f5;
  padding-top: var(--gv-header-h);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.profile-notification-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  height: var(--gv-header-h);
  margin: 0 auto;
  padding: env(safe-area-inset-top,0px) 13px 0;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid #dfe5ed;
}
.profile-notification-head button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #2c3e7a;
  font: 400 30px/32px inherit;
}
.profile-notification-list {
  display: grid;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  gap: 10px;
  padding: 14px 13px max(env(safe-area-inset-bottom,24px),24px);
}
.profile-notification-item {
  border: 0;
  border-radius: 17px;
  background: #fff;
  padding: 15px;
  display: grid;
  gap: 5px;
  text-align: left;
  color: #263247;
  box-shadow: 0 3px 13px rgba(31,45,85,.06);
}
.profile-notification-item b { font-size: 14px; }
.profile-notification-item span { color: #647186; font-size: 13px; line-height: 1.45; }
.profile-notification-item small { color: #9ba4b0; font-size: 10px; }
.profile-notification-empty { padding: 70px 25px; text-align: center; color: #8b96a5; font-size: 14px; }
@keyframes profileRouteForward {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes profileRouteBack {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
#main.profile-route-in-forward { animation: profileRouteForward .24s cubic-bezier(.2,.8,.2,1) both; }
#main.profile-route-in-back { animation: profileRouteBack .24s cubic-bezier(.2,.8,.2,1) both; }

/* ÔN TẬP KHI CHƯA ĐĂNG NHẬP */
.review-guest-home { display: flex; flex-direction: column; gap: 13px; }
.review-guest-note {
  padding: 17px;
  border-radius: 19px;
  background: #fff;
  display: grid;
  gap: 6px;
  text-align: left;
  box-shadow: 0 3px 14px rgba(31,45,85,.055);
}
.review-guest-note b { color: #253247; font-size: 15px; }
.review-guest-note span { color: #7f8997; font-size: 12px; line-height: 1.45; }
.review-guest-note button {
  justify-self: start;
  margin-top: 5px;
  border: 0;
  border-radius: 999px;
  padding: 9px 13px;
  background: #2c3e7a;
  color: #fff;
  font: 700 12px inherit;
}
.review-locked-card {
  min-height: 96px;
  padding: 16px;
  border-radius: 19px;
  background: #e7e9ed;
  color: #a7adb6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.review-locked-card>div { display: grid; gap: 4px; }
.review-locked-card b { color: #9ca3ad; font-size: 15px; }
.review-locked-card small { font-size: 11px; }
.review-locked-bars {
  height: 54px;
  display: flex;
  align-items: end;
  gap: 5px;
}
.review-locked-bars i { width: 8px; border-radius: 5px; background: #c8ccd2; }
.review-locked-bars i:nth-child(1) { height: 22%; }
.review-locked-bars i:nth-child(2) { height: 45%; }
.review-locked-bars i:nth-child(3) { height: 72%; }
.review-locked-bars i:nth-child(4) { height: 54%; }
.review-locked-bars i:nth-child(5) { height: 88%; }
.review-locked-action {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 13px;
  background: #dfe2e7;
  color: #a8afb8;
  font: 700 14px inherit;
}
.review-locked-row {
  min-height: 70px;
  justify-content: flex-start;
}
.review-locked-row>span { font-size: 25px; }
.review-locked-row>div { flex: 1; }
.review-locked-row>i { font-style: normal; font-size: 24px; }

/* SHARE SỔ TAY */
.review-notebook-share {
  width: 38px;
  height: 38px!important;
  border: 1px solid var(--gv-border)!important;
  border-radius: 12px!important;
  /* Cùng token với .review-back để hai nút trên back bar đồng bộ. */
  background: var(--gv-surface)!important;
  color: var(--gv-text)!important;
  box-shadow: var(--gv-shadow);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.review-notebook-share svg { width: 21px; height: 21px; }
.review-notebook-add {
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--gv-border);
  border-radius: 17px;
  background: var(--gv-surface);
  color: var(--gv-text);
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 11px 15px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: var(--gv-shadow);
}
.review-notebook-add>span {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--gv-primary-soft);
  color: var(--gv-primary-ink);
  font-size: 22px;
  line-height: 1;
}
.review-notebook-add>b { font-size: clamp(14.5px,4.15vw,16.5px); font-weight: 500; }
.review-notebook-add>i { color: var(--gv-faint); font-style: normal; font-size: 24px; font-weight: 400; line-height: 1; }
.review-notebook-add:active { transform: scale(.985); }
.review-start-loading { box-shadow: none!important; opacity: .72; cursor: wait; }
.notebook-share-overlay {
  position: fixed;
  inset: 0;
  z-index: 10030;
  padding-top: 20px;
  background: rgba(16,23,37,.48);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: shareBackdropIn .24s ease both;
  transition: background .22s ease;
}
.notebook-share-sheet {
  width: 100%;
  max-width: 480px;
  padding: 12px 16px max(env(safe-area-inset-bottom,18px),18px);
  border-radius: 25px 25px 0 0;
  background: #f5f5f5;
  animation: shareSheetIn .25s cubic-bezier(.2,.8,.2,1) both;
}
.notebook-share-head {
  height: 42px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  text-align: center;
  color: #263247;
}
.notebook-share-head button {
  grid-column: 1;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 11px;
  background: #fff;
  color: #2c3e7a;
  font: 400 28px/30px inherit;
}
.notebook-share-head b { grid-column: 2; font-size: 16px; }
.notebook-share-head span { grid-column: 3; }
.notebook-share-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 390px;
  aspect-ratio: 16/9;
  margin: 9px auto 14px;
  padding: 19px 20px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(135deg,var(--share-from),var(--share-to));
  color: #fff;
  box-shadow: 0 10px 25px rgba(31,45,85,.17);
  display: grid;
  grid-template-columns: minmax(0,1fr) 38%;
  gap: 12px;
}
.notebook-share-card::before,.notebook-share-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.notebook-share-card::before { width: 230px; height: 230px; right: -76px; top: -100px; }
.notebook-share-card::after { width: 180px; height: 180px; right: -45px; bottom: -100px; }
.notebook-share-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.notebook-share-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffd75e;
  font-size: 11px;
  letter-spacing: .035em;
}
.notebook-share-brand>span {
  width: 23px;
  height: 23px;
  border-radius: 8px;
  background: rgba(255,255,255,.16);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
}
.notebook-share-copy>small {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 720;
}
.notebook-share-count {
  margin-top: 2px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1;
}
.notebook-share-count strong { font-size: clamp(36px,11vw,52px); letter-spacing: -2px; }
.notebook-share-count span { font-size: 20px; font-weight: 800; }
.notebook-share-copy>p {
  margin-top: 5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
}
.notebook-share-copy>em {
  margin-top: auto;
  color: rgba(255,255,255,.72);
  font-size: 9px;
  font-style: normal;
}
.notebook-share-portrait {
  position: relative;
  display: grid;
  place-items: center;
}
.notebook-share-portrait::before {
  content: '';
  position: absolute;
  width: 104px;
  height: 104px;
  border: 12px solid rgba(255,212,70,.9);
  border-radius: 50%;
  background: rgba(255,255,255,.18);
}
.notebook-share-portrait .share-avatar {
  position: relative;
  z-index: 2;
  width: 83px;
  height: 83px;
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: none;
  font-size: 31px;
}
.notebook-share-portrait>i,.notebook-share-portrait>b {
  position: absolute;
  z-index: 3;
  color: #fff6a5;
  font-style: normal;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.12));
}
.notebook-share-portrait>i { right: 4px; top: 24px; font-size: 19px; }
.notebook-share-portrait>b { left: 5px; bottom: 26px; font-size: 17px; }
.notebook-share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.notebook-share-actions button {
  min-height: 45px;
  border: 0;
  border-radius: 999px;
  padding: 11px;
  background: #fff;
  color: #35435a;
  font: 700 14px inherit;
  box-shadow: 0 3px 12px rgba(31,45,85,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.notebook-share-actions button.primary { background: #2c3e7a; color: #fff; }
.notebook-share-actions svg { width: 20px; height: 20px; }
.notebook-share-overlay.closing {
  pointer-events: none;
  background: rgba(16,23,37,0);
}
.notebook-share-overlay.closing .notebook-share-sheet {
  animation: shareSheetOut .23s ease both;
}
@keyframes shareBackdropIn { from { background: rgba(16,23,37,0); } }
@keyframes shareSheetIn { from { transform: translateY(55px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes shareSheetOut { to { transform: translateY(60px); opacity: 0; } }

/* DARK MODE — toàn bộ ứng dụng */
html[data-theme="dark"] {
  --dark-bg: var(--gv-bg);
  --dark-surface: var(--gv-surface);
  --dark-raised: var(--gv-raised);
  --dark-border: var(--gv-border);
  --dark-text: var(--gv-text);
  --dark-muted: var(--gv-muted);
  --dark-accent: var(--gv-primary-ink);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .main,
html[data-theme="dark"] .review-session,
html[data-theme="dark"] .review-streak-page,
html[data-theme="dark"] .profile-notifications {
  background: var(--dark-bg);
  color: var(--dark-text);
}
html[data-theme="dark"] .header,
html[data-theme="dark"] .search-box { background: #17213b; }
html[data-theme="dark"] .bottom-nav {
  background: #141d2c;
  border-top-color: var(--dark-border);
}
html[data-theme="dark"] .nav-btn { color: #77859a; }
html[data-theme="dark"] .nav-btn.active { color: #b6c5ff; }

/* Từ điển và dịch câu */
html[data-theme="dark"] .search-input-wrap,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .search-clear-btn,
html[data-theme="dark"] .topic-card,
html[data-theme="dark"] .word-row,
html[data-theme="dark"] .suggest-dropdown,
html[data-theme="dark"] .gt-card,
html[data-theme="dark"] .gt-history-list,
html[data-theme="dark"] .gt-history-content,
html[data-theme="dark"] .gt-lang-pill,
html[data-theme="dark"] .result-card {
  background: var(--dark-surface);
  color: var(--dark-text);
}
html[data-theme="dark"] .search-input-wrap {
  background: #202938;
  border: 1px solid #354154;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 5px 18px rgba(0,0,0,.12);
}
html[data-theme="dark"] .search-input {
  background: transparent;
  color: #f3f6fb;
  caret-color: #aebeff;
  -webkit-text-fill-color: #f3f6fb;
}
html[data-theme="dark"] .search-btn { color: #bdcaff; }
html[data-theme="dark"] .search-clear-btn,
html[data-theme="dark"] .back-inline-btn,
html[data-theme="dark"] .mismatch-notice a,
html[data-theme="dark"] .gt-lang-to,
html[data-theme="dark"] .gt-result,
html[data-theme="dark"] .gt-icon-btn.gt-blue,
html[data-theme="dark"] .more-ex-btn,
html[data-theme="dark"] .meaning-text,
html[data-theme="dark"] .pos-tag { color: var(--dark-accent); }
html[data-theme="dark"] .toggle-track { background: rgba(255,255,255,.11); }
html[data-theme="dark"] .toggle-indicator { background: #dbe3f7; }
html[data-theme="dark"] .toggle-option.active { color: #1b294b; }
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .loading,
html[data-theme="dark"] .lookup-empty-note { color: var(--dark-muted); }
html[data-theme="dark"] .topic-name,
html[data-theme="dark"] .word-en,
html[data-theme="dark"] .gt-textarea,
html[data-theme="dark"] .gt-history-src,
html[data-theme="dark"] .result-word-title { color: var(--dark-text); }
html[data-theme="dark"] .topic-vi,
html[data-theme="dark"] .word-vi,
html[data-theme="dark"] .word-ipa,
html[data-theme="dark"] .gt-lang-label,
html[data-theme="dark"] .gt-history-res,
html[data-theme="dark"] .ipa-text,
html[data-theme="dark"] .example-en,
html[data-theme="dark"] .example-vi { color: var(--dark-muted); }
html[data-theme="dark"] .topic-count,
html[data-theme="dark"] .word-pos-tag,
html[data-theme="dark"] .gt-history-tag,
html[data-theme="dark"] .ipa-accent-label,
html[data-theme="dark"] .word-ipa b {
  background: #283754;
  color: #bdcaff;
}
html[data-theme="dark"] .suggest-item { border-bottom-color: var(--dark-border); }
html[data-theme="dark"] .suggest-item:hover,
html[data-theme="dark"] .suggest-item:active { background: var(--dark-raised); }
html[data-theme="dark"] .gt-textarea { background: transparent; }
html[data-theme="dark"] .gt-icon-btn { color: #a8b3c3; }
html[data-theme="dark"] .gt-icon-btn:active { background: var(--dark-raised); }
html[data-theme="dark"] .gt-corner-btn,
html[data-theme="dark"] .speak-btn {
  background: #26334a;
  color: #bac8ff;
}
html[data-theme="dark"] .gt-history-row,
html[data-theme="dark"] .meaning-divider { border-color: var(--dark-border); }
html[data-theme="dark"] .gt-divider { border-top-color: #40516c; }
html[data-theme="dark"] .gt-translate-btn { background: #7799d2; color: #102040; }
html[data-theme="dark"] .gt-swap-btn { color: #a7b2c2; }
html[data-theme="dark"] .lemma-note {
  background: #1e2a40;
  border-left-color: #8fa9ff;
  color: #aeb9c9;
}

/* Ôn tập, câu hỏi và streak */
html[data-theme="dark"] .review-chart-card,
html[data-theme="dark"] .review-empty,
html[data-theme="dark"] .review-push,
html[data-theme="dark"] .review-sentence,
html[data-theme="dark"] .review-option,
html[data-theme="dark"] .review-meaning,
html[data-theme="dark"] .review-scramble-answer,
html[data-theme="dark"] .review-chunk,
html[data-theme="dark"] .review-example-feedback,
html[data-theme="dark"] .review-demo-word,
html[data-theme="dark"] .review-tier-demo,
html[data-theme="dark"] .review-demo,
html[data-theme="dark"] .review-word-list,
html[data-theme="dark"] .review-session-bar button,
html[data-theme="dark"] .review-streak-stat-block,
html[data-theme="dark"] .review-calendar-card,
html[data-theme="dark"] .review-streak-head button,
html[data-theme="dark"] .review-back,
html[data-theme="dark"] .review-guest-note,
html[data-theme="dark"] .profile-notification-item {
  background: var(--dark-surface);
  color: var(--dark-text);
  box-shadow: 0 3px 14px rgba(0,0,0,.18);
}
html[data-theme="dark"] .review-topbar,
html[data-theme="dark"] .review-session-head,
html[data-theme="dark"] .review-streak-head {
  background: rgba(15,21,33,.94);
  border-color: var(--dark-border);
  color: var(--dark-text);
}
html[data-theme="dark"] .review-chart-title,
html[data-theme="dark"] .review-push,
html[data-theme="dark"] .review-word-row b,
html[data-theme="dark"] .review-feedback-word,
html[data-theme="dark"] .review-calendar-card h2,
html[data-theme="dark"] .review-calendar-head b,
html[data-theme="dark"] .review-streak-stat-block,
html[data-theme="dark"] .review-session-bar,
html[data-theme="dark"] .review-guest-note b { color: var(--dark-text); }
html[data-theme="dark"] .review-done h1 { color: var(--dark-text); }
html[data-theme="dark"] .review-chart-title small,
html[data-theme="dark"] .review-push small,
html[data-theme="dark"] .review-word-row p,
html[data-theme="dark"] .review-word-row small,
html[data-theme="dark"] .review-prompt,
html[data-theme="dark"] .review-count,
html[data-theme="dark"] .review-streak-message,
html[data-theme="dark"] .review-demo-picker>p,
html[data-theme="dark"] .review-tier-demo-page>p { color: var(--dark-muted); }
html[data-theme="dark"] .review-chart-track,
html[data-theme="dark"] .review-progress { background: #2b3546; }
html[data-theme="dark"] .review-word-row { border-bottom-color: var(--dark-border); }
html[data-theme="dark"] .review-row-speak,
html[data-theme="dark"] .review-audio,
html[data-theme="dark"] .review-chosen-chunk,
html[data-theme="dark"] .review-scramble-answer span {
  background: #263754;
  color: #becbff;
}
html[data-theme="dark"] .review-option.selected,
html[data-theme="dark"] .review-demo-word.selected { background: #293754; color: #e8edff; border-color: #8299e8; }
html[data-theme="dark"] .review-option.right-answer,
html[data-theme="dark"] .review-result.right {
  background: #17382b!important;
  color: #8ee4b3!important;
}
html[data-theme="dark"] .review-option.wrong-answer,
html[data-theme="dark"] .review-result.wrong {
  background: #432421!important;
  color: #ffaaa1!important;
}
html[data-theme="dark"] .review-answer-example { color: #c4cedb; border-top-color: var(--dark-border); }
html[data-theme="dark"] .review-word,
html[data-theme="dark"] .review-letter,
html[data-theme="dark"] .review-full-input,
html[data-theme="dark"] .review-letter-input { color: #c2ceff; }
html[data-theme="dark"] .review-full-input,
html[data-theme="dark"] .review-letter-input { border-color: #8299e8; }
html[data-theme="dark"] .notebook-tier-rookie { background: #202938; color: #bdc7d5; }
html[data-theme="dark"] .notebook-tier-rookie .review-notebook-icon { background: #2c3748; color: #9aa8bb; }
html[data-theme="dark"] .notebook-tier-diligent { background: var(--dark-surface); border-color: var(--dark-border); color: var(--dark-text); }
html[data-theme="dark"] .notebook-tier-diligent .review-notebook-icon { background: #263248; color: #b7c5f4; }
html[data-theme="dark"] .notebook-tier-bookworm {
  background: linear-gradient(145deg,#4a3c16,#302b1a);
  border-color: #665623;
  color: #fff0b8;
}
html[data-theme="dark"] .notebook-tier-bookworm .review-notebook-icon { background: rgba(255,220,112,.13); color: #ffe09a; }
html[data-theme="dark"] .notebook-tier-bookworm small,
html[data-theme="dark"] .notebook-tier-bookworm .review-notebook-copy em,
html[data-theme="dark"] .notebook-tier-bookworm i { color: #d4c185; }
html[data-theme="dark"] .review-streak-hero.idle { background: #202a39; color: #8996a8; }
html[data-theme="dark"] .review-streak-hero.warm { background: linear-gradient(145deg,#3a321d,#2c271b); color: #f2bd4f; }
html[data-theme="dark"] .review-streak-hero.hot { background: linear-gradient(145deg,#47261f,#35221d); color: #ff826d; }
html[data-theme="dark"] .review-calendar-head button,
html[data-theme="dark"] .review-goal-calendar { background: var(--dark-raised); color: #b9c7f6; }
html[data-theme="dark"] .review-calendar-day { color: #f4f7fb; }
html[data-theme="dark"] .review-calendar-day.today:not(.learned) { box-shadow: inset 0 0 0 1px #63718a; }
html[data-theme="dark"] .review-goal-progress,
html[data-theme="dark"] .review-streak-goal-block .review-goal-progress { background: #303a49!important; }
html[data-theme="dark"] .review-locked-card,
html[data-theme="dark"] .review-locked-action { background: #1b2432; color: #657184; }
html[data-theme="dark"] .review-locked-card b { color: #778396; }
html[data-theme="dark"] .review-row-delete { background: #432421; color: #ff9b91; }
html[data-theme="dark"] .review-session-bar .review-streak-button { background: var(--dark-raised); }
html[data-theme="dark"] .review-session-bar .review-streak-button.warm { background: #3a321d; }
html[data-theme="dark"] .review-session-bar .review-streak-button.hot { background: #47261f; }

/* Hồ sơ, form và modal */
html[data-theme="dark"] .profile-ios-group,
html[data-theme="dark"] .profile-auth-form input,
html[data-theme="dark"] .profile-settings-logout,
html[data-theme="dark"] .profile-route-head button {
  background: var(--dark-surface);
}
html[data-theme="dark"] .profile-identity h1,
html[data-theme="dark"] .profile-auth h1,
html[data-theme="dark"] .profile-password-copy h1,
html[data-theme="dark"] .profile-setting-row,
html[data-theme="dark"] .profile-route-head,
html[data-theme="dark"] .profile-edit-form input {
  color: var(--dark-text);
}
html[data-theme="dark"] .profile-phone-line,
html[data-theme="dark"] .profile-identity p,
html[data-theme="dark"] .profile-setting-row small,
html[data-theme="dark"] .profile-edit-form label>span { color: var(--dark-muted); }
html[data-theme="dark"] .profile-setting-row,
html[data-theme="dark"] .profile-edit-form label { border-color: var(--dark-border); }
html[data-theme="dark"] .profile-route-head button,
html[data-theme="dark"] .profile-auth-switch { color: var(--dark-accent); }
html[data-theme="dark"] .profile-theme-control { background: #0f1725; }
html[data-theme="dark"] .profile-language-control,
html[data-theme="dark"] .profile-language-picker.compact { background: #0f1725; }
html[data-theme="dark"] .profile-theme-control button.active {
  background: #344158;
  color: #fff;
}
html[data-theme="dark"] .profile-edit-form>button { background: #293754; color: #becbff; }
html[data-theme="dark"] .profile-avatar-control { border-color: var(--dark-surface); box-shadow: 0 0 0 1px #3e4a60; }
html[data-theme="dark"] .profile-avatar-control>span:last-of-type { border-color: var(--dark-bg); background: #2b3650; color: #c8d3ff; }
html[data-theme="dark"] .profile-auth-form input { border-color: #344055; color: #f2f5fa; }
html[data-theme="dark"] .profile-password-visibility { color: #9caaca; }
html[data-theme="dark"] .profile-password-visibility.visible { color: #bdc9ff; }
html[data-theme="dark"] .profile-auth-divider { color: #6b7891; }
html[data-theme="dark"] .profile-auth-divider::before,
html[data-theme="dark"] .profile-auth-divider::after { background: #344055; }
html[data-theme="dark"] .profile-auth-form input::placeholder,
html[data-theme="dark"] .profile-edit-form input::placeholder { color: #6f7b8e; }
html[data-theme="dark"] .profile-notification-head {
  background: rgba(15,21,33,.95);
  border-bottom-color: var(--dark-border);
  color: var(--dark-text);
}
html[data-theme="dark"] .notebook-share-sheet { background: #141e2e; }
html[data-theme="dark"] .notebook-share-head { color: var(--dark-text); }
html[data-theme="dark"] .notebook-share-head button,
html[data-theme="dark"] .notebook-share-actions button:not(.primary) {
  background: var(--dark-raised);
  color: var(--dark-text);
}

/* COBALT VIỆT — lớp giao diện chính thức cho cả light mode và dark mode. */
body,
.main,
.review-session,
.review-streak-page,
.profile-notifications,
.profile-page,
.profile-auth,
.profile-settings-page,
.profile-password-page {
  background: var(--gv-bg);
  color: var(--gv-text);
}

.header {
  background: var(--gv-surface);
  color: var(--gv-text);
  border-bottom: 1px solid var(--gv-border);
}
.header-logo { color: var(--gv-text); font-weight: 600; }
.header-logo span { color: var(--gv-gold); }
.search-box { background: var(--gv-bg); }
.bottom-nav {
  background: var(--gv-surface);
  border-top-color: var(--gv-border);
  box-shadow: 0 -5px 20px rgba(40,52,98,.045);
}
.nav-btn { color: var(--gv-faint); }
.nav-btn.active { color: var(--gv-primary); }
.header .review-header-streak { background: var(--gv-primary-soft); color: var(--gv-faint); }
.header .review-header-streak.warm { background: var(--gv-gold-soft); color: var(--gv-gold-strong); }
.header .review-header-streak.hot { background: var(--gv-danger-soft); color: var(--gv-danger); }

/* Từ điển và dịch câu */
.search-input-wrap {
  background: var(--gv-surface);
  border: 1px solid var(--gv-border);
  box-shadow: var(--gv-shadow);
}
.search-input { color: var(--gv-text); caret-color: var(--gv-primary); }
.search-input::placeholder,
.gt-textarea::placeholder {
  color: var(--gv-faint);
  -webkit-text-fill-color: var(--gv-faint);
  opacity: 1;
}
.search-input::-webkit-input-placeholder,
.gt-textarea::-webkit-input-placeholder {
  color: var(--gv-faint);
  -webkit-text-fill-color: var(--gv-faint);
  opacity: 1;
}
.search-btn,
.search-clear-btn,
.back-inline-btn,
.mismatch-notice a,
.gt-lang-to,
.gt-result,
.gt-icon-btn.gt-blue,
.more-ex-btn,
.meaning-text,
.pos-tag { color: var(--gv-primary); }
.search-clear-btn,
.gt-corner-btn,
.speak-btn { background: var(--gv-primary-soft); color: var(--gv-primary-ink); }
.toggle-track { background: var(--gv-raised); border: 1px solid var(--gv-border); }
.toggle-indicator { background: var(--gv-surface); box-shadow: 0 2px 8px rgba(40,52,98,.1); }
.toggle-option { color: var(--gv-muted); }
.toggle-option.active { color: var(--gv-primary-ink); }
.translate-note,
.gt-history-title { color: var(--gv-muted); }
.topic-card,
.word-row,
.suggest-dropdown,
.gt-card,
.gt-history-list,
.gt-history-content,
.gt-lang-pill,
.result-card {
  background: var(--gv-surface);
  color: var(--gv-text);
  border-color: var(--gv-border);
  box-shadow: var(--gv-shadow);
}
.collection-card { background: linear-gradient(135deg,var(--gv-primary),var(--gv-primary-strong)); box-shadow: 0 4px 14px rgba(79,95,215,.22); }
.topic-name,
.word-en,
.gt-textarea,
.gt-history-src,
.result-word-title { color: var(--gv-text); }
.topic-vi,
.word-vi,
.word-ipa,
.gt-lang-label,
.gt-history-res,
.ipa-text,
.example-en,
.example-vi,
.section-title,
.loading,
.lookup-empty-note { color: var(--gv-muted); }
.topic-count,
.word-pos-tag,
.gt-history-tag,
.ipa-accent-label,
.word-ipa b {
  background: var(--gv-primary-soft);
  color: var(--gv-primary-ink);
}
.suggest-item,
.gt-history-row,
.meaning-divider { border-color: var(--gv-border); }
.suggest-item:hover,
.suggest-item:active,
.gt-icon-btn:active { background: var(--gv-raised); }
.gt-divider { border-top-color: var(--gv-border); }
.gt-translate-btn,
.save-word-btn {
  background: var(--gv-primary);
  color: #fff;
  box-shadow: 0 4px 13px rgba(79,95,215,.24);
}
.gt-translate-btn:active,
.save-word-btn:active { background: var(--gv-primary-strong); }
.save-word-btn.saved,
html[data-theme="dark"] .save-word-btn.saved {
  appearance:none;
  -webkit-appearance:none;
  background:var(--gv-success)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff;
  opacity:1;
  box-shadow:none
}
.lemma-note { background: var(--gv-primary-soft); border-left-color: var(--gv-primary); color: var(--gv-muted); }

/* Ôn tập */
.review-hero { background: linear-gradient(135deg,var(--gv-primary),var(--gv-primary-strong)); }
.review-hero span { color: var(--gv-gold); }
.review-chart-card,
.review-empty,
.review-push,
.review-sentence,
.review-option,
.review-meaning,
.review-scramble-answer,
.review-chunk,
.review-example-feedback,
.review-demo-word,
.review-tier-demo,
.review-word-list,
.review-session-bar button,
.review-streak-stat-block,
.review-calendar-card,
.review-streak-head button,
.review-back,
.review-guest-note {
  background: var(--gv-surface);
  color: var(--gv-text);
  border-color: var(--gv-border);
  box-shadow: var(--gv-shadow);
}
.review-start,
.review-check:not(:disabled),
.review-next,
.review-done button {
  background: var(--gv-primary)!important;
  color: #fff!important;
  box-shadow: 0 4px 13px rgba(79,95,215,.24);
}
.review-check:disabled { background: var(--gv-raised)!important; color: var(--gv-faint)!important; opacity: 1; }
.review-demo { background: var(--gv-gold-soft); border-color: var(--gv-gold); color: var(--gv-gold-strong); }
.review-tier-demo { border-color: var(--gv-border); color: var(--gv-muted); }
.review-push-icon,
.review-audio,
.review-row-speak,
.review-chosen-chunk,
.review-scramble-answer span {
  background: var(--gv-primary-soft);
  color: var(--gv-primary-ink);
}
.review-chart-title,
.review-word-row b,
.review-feedback-word,
.review-calendar-card h2,
.review-calendar-head b,
.review-streak-stat-block,
.review-done h1,
.review-session-bar { color: var(--gv-text); }
.review-chart-title small,
.review-push small,
.review-word-row p,
.review-word-row small,
.review-prompt,
.review-count,
.review-streak-message,
.review-demo-picker>p,
.review-tier-demo-page>p { color: var(--gv-muted); }
.review-word,
.review-letter,
.review-full-input,
.review-letter-input,
.review-blank,
.review-answer-target,
.review-chart-col>b { color: var(--gv-primary-ink); }
.review-blank {
  display:inline-block;
  width:clamp(64px,20vw,88px);
  height:.9em;
  border-bottom:2px solid currentColor;
  vertical-align:.08em;
  letter-spacing:0
}
.review-full-input,
.review-letter-input { border-color: var(--gv-primary); }
.review-full-input.review-meaning-write-input {
  font-size: clamp(28px, 8vw, 34px);
  line-height: 1.25;
  padding-block: 12px;
}
.review-option.selected,
.review-demo-word.selected { background: var(--gv-primary-soft); color: var(--gv-primary-ink); border-color: var(--gv-primary); }
.review-chart-track,
.review-progress { background: var(--gv-raised); }
.review-progress i { background: var(--gv-primary); }
.review-topbar,
.review-session-head,
.review-streak-head {
  background: var(--gv-bg);
  border-color: var(--gv-border);
  color: var(--gv-text);
}
.review-calendar-head button,
.review-goal-calendar { background: var(--gv-raised); color: var(--gv-primary-ink); }
.review-calendar-day { color: var(--gv-text); }
.review-calendar-day.today:not(.learned) { box-shadow: inset 0 0 0 1px var(--gv-primary); }
.review-streak-goal-block .review-goal-progress { background: var(--gv-raised)!important; }
.review-streak-goal-block .review-goal-progress em { background: var(--gv-gold)!important; }
.review-streak-goal-block .review-goal-progress.has-progress em::after { background: var(--gv-gold-strong); }
.review-streak-record-block strong { color: var(--gv-primary); }
.notebook-tier-rookie { background: var(--gv-raised); color: var(--gv-muted); }
.notebook-tier-rookie .review-notebook-icon { background: var(--gv-primary-soft); color: var(--gv-primary-ink); }
.notebook-tier-diligent { background: var(--gv-surface); border-color: var(--gv-border); color: var(--gv-text); }
.notebook-tier-diligent .review-notebook-icon { background: var(--gv-primary-soft); color: var(--gv-primary-ink); }

/* Hồ sơ */
.profile-ios-group,
.profile-auth-form input,
.profile-settings-logout,
.profile-route-head button,
.profile-notification-item,
.notebook-share-sheet {
  background: var(--gv-surface);
  color: var(--gv-text);
  border-color: var(--gv-border);
  box-shadow: var(--gv-shadow);
}
.profile-auth-mark { background: linear-gradient(145deg,var(--gv-primary),var(--gv-primary-strong)); color: var(--gv-gold); }
.profile-identity h1,
.profile-auth h1,
.profile-password-copy h1,
.profile-setting-row,
.profile-route-head,
.profile-edit-form input,
.notebook-share-head { color: var(--gv-text); }
.profile-phone-line,
.profile-identity p,
.profile-setting-row small,
.profile-edit-form label>span,
.profile-credit { color: var(--gv-muted); }
.profile-setting-row,
.profile-edit-form label { border-color: var(--gv-border); }
.profile-route-head button,
.profile-auth-switch,
.profile-credit a { color: var(--gv-primary-ink); }
.profile-theme-control { background: var(--gv-raised); }
.profile-theme-control button.active { background: var(--gv-surface); color: var(--gv-primary-ink); }

/* Chọn giọng đọc trong trang Hồ sơ. Nhãn bên trái, dropdown bên phải; dropdown
   co giãn bằng clamp() để không tràn trên iPhone nhỏ. */
.profile-voice-row { cursor: default; }
.profile-voice-select {
  flex: 0 0 auto;
  width: clamp(140px, 46vw, 210px);
  max-width: 60%;
  border: 1px solid var(--gv-border);
  border-radius: 10px;
  padding: 8px 30px 8px 11px;
  background: var(--gv-raised);
  color: var(--gv-primary-ink);
  font: 600 clamp(12px, 3.3vw, 13px) inherit;
  cursor: pointer;
  /* Bỏ giao diện mặc định của Safari iOS rồi tự vẽ mũi tên bằng SVG inline,
     nếu không dropdown sẽ hiện nền trắng chói trong dark mode. */
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a90a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 15px;
}
.profile-voice-select:focus { outline: none; border-color: var(--gv-primary); }
.profile-voice-preview { cursor: pointer; }
.profile-voice-preview-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gv-raised);
  color: var(--gv-primary);
  font-style: normal;
}
.profile-voice-preview-icon svg { width: 18px; height: 18px; }

/* Ô đầu trang Xếp hạng khi chưa đăng nhập. */
.leaderboard-guest-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px dashed var(--gv-border);
  border-radius: 18px;
  background: var(--gv-surface);
  color: var(--gv-primary-ink);
  text-align: left;
  cursor: pointer;
}
.leaderboard-guest-cta span { display: grid; gap: 3px; min-width: 0; }
.leaderboard-guest-cta small { color: var(--gv-muted); font-size: 12px; }
.leaderboard-guest-cta strong { font: 650 clamp(14px, 3.8vw, 15px) inherit; }
.leaderboard-guest-cta i { color: var(--gv-faint); font-style: normal; font-size: 20px; }
.profile-auth-form input:focus { border-color: var(--gv-primary); box-shadow: 0 0 0 3px rgba(79,95,215,.15); }
.profile-auth-form > button,
.profile-edit-form>button,
.notebook-share-actions button.primary { background: var(--gv-primary); color: #fff; }
.notebook-share-head button,
.notebook-share-actions button:not(.primary) { background: var(--gv-raised); color: var(--gv-text); }

html[data-theme="dark"] .header,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .profile-notification-head { background: #151D2A; }
html[data-theme="dark"] .search-box { background: var(--gv-bg); }
html[data-theme="dark"] .search-input-wrap { background: var(--gv-surface); border-color: var(--gv-border); }
html[data-theme="dark"] .search-input { color: var(--gv-text); -webkit-text-fill-color: var(--gv-text); caret-color: var(--gv-primary-strong); }
html[data-theme="dark"] .search-btn { color: var(--gv-primary-ink); }
html[data-theme="dark"] .toggle-track { background: var(--gv-raised); border-color: var(--gv-border); }
html[data-theme="dark"] .toggle-indicator { background: #E9EDFF; }
html[data-theme="dark"] .toggle-option.active { color: #3544AF; }
html[data-theme="dark"] .topic-count,
html[data-theme="dark"] .word-pos-tag,
html[data-theme="dark"] .gt-history-tag,
html[data-theme="dark"] .ipa-accent-label,
html[data-theme="dark"] .word-ipa b,
html[data-theme="dark"] .gt-corner-btn,
html[data-theme="dark"] .speak-btn,
html[data-theme="dark"] .review-row-speak,
html[data-theme="dark"] .review-audio,
html[data-theme="dark"] .review-chosen-chunk,
html[data-theme="dark"] .review-scramble-answer span {
  background: var(--gv-primary-soft);
  color: var(--gv-primary-ink);
}
html[data-theme="dark"] .gt-translate-btn,
html[data-theme="dark"] .save-word-btn,
html[data-theme="dark"] .profile-auth-form > button,
html[data-theme="dark"] .profile-edit-form>button,
html[data-theme="dark"] .notebook-share-actions button.primary {
  background: var(--gv-primary);
  color: #fff;
}
html[data-theme="dark"] .review-option.selected,
html[data-theme="dark"] .review-demo-word.selected {
  background: var(--gv-primary-soft);
  color: var(--gv-primary-ink);
  border-color: var(--gv-primary);
}
html[data-theme="dark"] .profile-theme-control { background: var(--gv-raised); }
html[data-theme="dark"] .profile-theme-control button.active {
  background: var(--gv-surface);
  color: var(--gv-primary-ink);
}
html[data-theme="dark"] .profile-language-control button.active { background: var(--gv-surface); color: var(--gv-primary-ink); }
html[data-theme="dark"] .review-demo { background: var(--gv-gold-soft); color: var(--gv-gold-strong); border-color: var(--gv-gold); }
html[data-theme="dark"] .notebook-tier-rookie { background: var(--gv-raised); color: var(--gv-muted); }
html[data-theme="dark"] .notebook-tier-rookie .review-notebook-icon { background: var(--gv-primary-soft); color: var(--gv-primary-ink); }

/* MINIMALIST COBALT — typography và chi tiết theo mẫu giao diện đã duyệt. */
body { font-weight: 400; }

/* Tiêu đề tab: màu mực đậm vừa phải, nét mảnh và icon cobalt. */
.header-logo {
  color: var(--gv-text)!important;
  font-size: 18px;
  font-weight: 500!important;
  letter-spacing: -.015em;
}
.header-logo span { color: var(--gv-primary)!important; }
.header-logo svg { width: 22px; height: 22px; stroke-width: 1.75; }

/* Chuông luôn hiện rõ trên header sáng lẫn tối. */
.profile-bell,
html[data-theme="dark"] .profile-bell {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent!important;
  color: var(--gv-text)!important;
  box-shadow: none!important;
}
.profile-bell svg { width: 25px; height: 25px; }

/* Bottom navigation dùng các hàng cố định để icon và tên luôn bằng nhau. */
.bottom-nav {
  align-items: stretch;
  padding: 5px 0 max(env(safe-area-inset-bottom, 5px), 5px);
}
.bottom-nav .nav-btn {
  display: grid;
  grid-template-rows: 29px 16px;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 56px;
  padding: 3px 2px;
  font-size: 11px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav .nav-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  line-height: 1;
}
.bottom-nav .nav-icon svg { width: 25px; height: 25px; stroke-width: 1.75; }
.bottom-nav .nav-btn>span:last-child {
  display: block;
  height: 16px;
  line-height: 16px;
  white-space: nowrap;
}
.bottom-nav .nav-btn.active { font-weight: 500; }
.bottom-nav .nav-btn.active .nav-icon { transform: none; }
.bottom-nav .nav-btn:focus-visible {
  background: var(--gv-primary-soft);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(79,95,215,.18);
}

/* Tiêu đề con và văn bản: giảm độ đậm, phân cấp bằng màu thay vì bold. */
.section-title,
.review-chart-title,
.review-streak-stat-block>b,
.review-calendar-card h2,
.review-push b,
.review-notebook-card b,
.review-level-card span,
.review-word-row b,
.review-topbar b,
.review-session-bar b,
.review-streak-head b,
.profile-route-head b,
.profile-setting-row b,
.profile-identity h1,
.profile-auth h1,
.profile-password-copy h1,
.gt-history-title,
.gt-lang-label,
.topic-name,
.word-en,
.meaning-text {
  font-weight: 500!important;
  letter-spacing: -.01em;
}
.review-chart-title,
.review-streak-stat-block>b,
.review-calendar-card h2,
.review-push b,
.gt-history-title,
.gt-lang-label {
  color: var(--gv-muted)!important;
}
.review-notebook-card small,
.review-chart-title small,
.review-push small,
.review-word-row p,
.review-word-row small,
.review-streak-message,
.review-streak-record-block>span,
.profile-setting-row small,
.profile-identity p,
.profile-phone-line,
.topic-vi,
.word-vi {
  font-weight: 400!important;
}
.review-start,
.review-check,
.review-next,
.review-done button,
.profile-auth-form > button,
.profile-edit-form>button,
.gt-translate-btn {
  font-weight: 500!important;
}

/* Mục tiêu tuần: giá trị đứng riêng, thanh cobalt mảnh và không có vạch cuối. */
.review-streak-goal-value {
  display: block;
  margin-top: 18px;
  color: var(--gv-text);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.review-streak-goal-block .review-streak-goal-track { margin-top: 14px!important; }
.review-streak-goal-block .review-goal-progress {
  display: block!important;
  height: 7px!important;
  background: var(--gv-raised)!important;
  overflow: hidden;
}
.review-streak-goal-block .review-goal-progress em {
  background: var(--gv-primary)!important;
  border-radius: 999px!important;
}
.review-streak-goal-block .review-goal-progress b { display: none!important; }
.review-streak-goal-block .review-goal-progress em::after,
.review-streak-goal-block .review-goal-progress.has-progress em::after {
  content: none!important;
  display: none!important;
}
.review-streak-record-block>span {
  color: var(--gv-text);
  font-size: 16px;
  line-height: 1.2;
}
.review-streak-record-block strong {
  color: var(--gv-text)!important;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.02em;
}

/* Huyền thoại 1000 từ: stroke tím sáng nhìn rõ trên cả hai nền. */
.notebook-tier-legendary-lit {
  outline: 2px solid #D7BEFF!important;
  outline-offset: 3px!important;
  box-shadow: 0 0 0 1px rgba(239,229,255,.94), 0 8px 27px rgba(112,70,213,.36)!important;
}
html[data-theme="dark"] .notebook-tier-legendary-lit {
  outline-color: #E1CDFF!important;
  box-shadow: 0 0 0 1px rgba(199,167,255,.72), 0 9px 30px rgba(133,87,232,.42)!important;
}

/* Tinh chỉnh vòng hai: lịch thoáng theo chiều dọc và dùng cobalt cho ngày học. */
.review-calendar-grid {
  row-gap: 17px!important;
  column-gap: 5px!important;
}
.review-calendar-card { padding-bottom: 27px; }
.review-calendar-day { width: 32px; height: 32px; }
.review-calendar-day.learned,
html[data-theme="dark"] .review-calendar-day.learned {
  background: var(--gv-primary)!important;
  color: #fff!important;
  box-shadow: 0 2px 7px rgba(79,95,215,.24)!important;
}

/* Kính mờ đặt trực tiếp trên fixed layer. Không còn dùng sticky/pseudo layer,
   nên hiệu ứng này không đi qua compositor path đã gây mất bar khi bounce. */
.header,
.review-topbar,
.review-session-head,
.review-streak-head,
.profile-route-head,
.profile-notification-head,
.lm-header {
  background:var(--gv-bar-glass)!important;
  border-color:var(--gv-bar-border)!important;
  -webkit-backdrop-filter:saturate(155%) blur(18px);
  backdrop-filter:saturate(155%) blur(18px);
}

/* Back bar cố định ngay dưới header. Hai head của overlay phủ toàn màn hình
   dùng top:0 và scroller nội dung riêng. */
.review-topbar,
.review-streak-head,
.profile-route-head {
  /* -1px: env(safe-area-inset-top) có thể lẻ phần thập phân, để đúng bằng
     --gv-header-h sẽ hở một sợi tóc giữa hai thanh. */
  top: calc(var(--gv-header-h) - 1px);
}

/* Nút đóng thông báo dùng đúng surface như các nút đóng còn lại. */
.profile-notification-head button,
html[data-theme="dark"] .profile-notification-head button {
  background: var(--gv-surface)!important;
  color: var(--gv-primary-ink)!important;
  border: 1px solid var(--gv-border)!important;
  box-shadow: var(--gv-shadow)!important;
}

/* Stroke Huyền thoại sáng bám sát thẻ, mảnh và tím nhạt hơn. */
.notebook-tier-legendary-lit {
  outline: 1px solid rgba(222,201,255,.76)!important;
  outline-offset: 0!important;
  box-shadow: 0 8px 27px rgba(112,70,213,.32)!important;
}
html[data-theme="dark"] .notebook-tier-legendary-lit {
  outline-color: rgba(226,207,255,.70)!important;
  box-shadow: 0 9px 30px rgba(133,87,232,.36)!important;
}

/* Cỡ chữ thao tác: ưu tiên mức đọc rõ trên màn hình điện thoại. */
.review-home>.review-start {
  padding: 13px 25px;
  font-size: 17px!important;
  line-height: 1.25;
}
.review-check,
.review-next,
.review-done button {
  min-height: 48px;
  font-size: 16px!important;
  line-height: 1.3;
}
.review-option {
  padding: 17px 18px;
  font-size: 16px!important;
  line-height: 1.45!important;
  font-weight: 500!important;
}
.review-chunk,
.review-chosen-chunk,
.review-audio { font-size: 15px!important; }
.review-prompt { font-size: 15px; }
.review-count { font-size: 13px; }
.review-demo,
.review-tier-demo { font-size: 15px!important; }
.review-locked-action,
.review-guest-note button { font-size: 16px!important; }
.review-push b { font-size: 16px; }
.review-push small { font-size: 13px; }

.profile-edit-form { padding: 8px 16px 15px; }
.profile-edit-form label { padding: 13px 0; gap: 7px; }
.profile-edit-form label>span {
  font-size: 13px!important;
  font-weight: 500!important;
}
.profile-edit-form input {
  min-height: 25px;
  font-size: 16px!important;
  font-weight: 500!important;
}
.profile-edit-form>button {
  min-height: 46px;
  padding: 12px 15px;
  font-size: 15px!important;
}
.profile-setting-row { font-size: 15px; }
.profile-setting-row b { font-size: 16px; }
.profile-setting-row small { font-size: 13px; line-height: 1.35; }
.profile-theme-control button { font-size: 13px; }
.profile-auth>p { font-size: 14px; }
.profile-auth-form > button { font-size: 16px!important; }
.profile-auth-switch { font-size: 14px; }
.profile-settings-logout {
  min-height: 50px;
  color: var(--gv-danger)!important;
  font-size: 16px!important;
  font-weight: 500!important;
}

.notebook-share-head b { font-size: 17px; font-weight: 500; }
.notebook-share-brand { font-size: 12px; }
.notebook-share-copy>small { font-size: 15px; }
.notebook-share-copy>p { font-size: 12px; }
.notebook-share-copy>em { font-size: 10px; }
.notebook-share-actions button {
  min-height: 48px;
  font-size: 16px!important;
  font-weight: 500!important;
}

.gt-history-title { font-size: 14px; }
.gt-history-tag { font-size: 11px; }
.gt-history-src { font-size: 15px; }
.gt-history-res { font-size: 14px; }
.gt-translate-btn { font-size: 16px; }

/* Swipe lịch sử dịch: transform GPU, quán tính ngắn và easing kiểu iOS. */
.gt-history-actions { width: 72px; }
.gt-history-content {
  transform: translate3d(0,0,0);
  will-change: transform;
  backface-visibility: hidden;
}
.gt-history-delete {
  will-change: transform,opacity;
  -webkit-tap-highlight-color: transparent;
}

/* Quỹ đạo Học bá: 8 lớp đồng pha, tâm stroke trùng đúng tâm viền icon. */
.review-scholar-glow {
  fill: none;
  stroke: rgba(224,247,255,var(--opacity));
  stroke-width: var(--edge-width);
  stroke-dasharray: var(--dash) var(--gap);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(163,222,255,.58));
  animation: reviewScholarFlow 8s linear infinite;
}
.review-scholar-dot {
  fill: none;
  stroke: #F8FDFF;
  stroke-width: 2.2;
  stroke-dasharray: .18 99.82;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.98)) drop-shadow(0 0 6px rgba(160,220,255,.82));
  animation: reviewScholarDot 8s linear infinite;
}
@keyframes reviewScholarFlow {
  from { stroke-dashoffset: var(--start); }
  to { stroke-dashoffset: var(--end); }
}

/* Quỹ đạo Huyền thoại nằm ngay trên mép thẻ; stroke rực sáng dùng cùng mép đó. */
.review-legend-edge rect {
  x: 0!important;
  y: 0!important;
  width: 100%!important;
  height: 100%!important;
  rx: 20px!important;
}
.notebook-tier-legendary-lit,
html[data-theme="dark"] .notebook-tier-legendary-lit {
  outline: 0!important;
}
.notebook-tier-legendary-lit {
  box-shadow: 0 0 0 1px rgba(222,201,255,.72), 0 8px 27px rgba(112,70,213,.32)!important;
}
html[data-theme="dark"] .notebook-tier-legendary-lit {
  box-shadow: 0 0 0 1px rgba(226,207,255,.66), 0 9px 30px rgba(133,87,232,.36)!important;
}

/* Chuyển tháng đủ dài để nhận biết rõ hướng trượt. */
#reviewCalendarViewport { overflow: hidden; }
.review-calendar-enter-left {
  animation: reviewCalendarInLeftLong .46s cubic-bezier(.22,1,.36,1) both!important;
  pointer-events: none;
}
.review-calendar-enter-right {
  animation: reviewCalendarInRightLong .46s cubic-bezier(.22,1,.36,1) both!important;
  pointer-events: none;
}
@keyframes reviewCalendarInLeftLong {
  from { opacity: .18; transform: translate3d(-76px,0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes reviewCalendarInRightLong {
  from { opacity: .18; transform: translate3d(76px,0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

/* Typography và control co giãn theo viewport nhưng vẫn giữ ngưỡng dễ đọc. */
.header-logo,
.review-topbar b,
.review-streak-head b,
.profile-route-head b {
  font-size: clamp(16px,4.4vw,18px)!important;
}
.review-notebook-card {
  padding: clamp(13px,4.2vw,17px);
  gap: clamp(10px,3.2vw,13px);
}
.review-notebook-card b,
.review-level-card span,
.profile-setting-row b {
  font-size: clamp(14.5px,4.15vw,17px)!important;
}
.review-notebook-card small,
.review-notebook-copy em,
.profile-setting-row small {
  font-size: clamp(11px,3.25vw,13px)!important;
  overflow-wrap: anywhere;
}
.review-notebook-copy em { font-size:clamp(10px,3vw,11px)!important; white-space:nowrap; overflow-wrap:normal!important; }
.review-home>.review-start,
.review-check,
.review-next,
.review-done button,
.notebook-share-actions button,
.profile-auth-form > button {
  font-size: clamp(15px,4.2vw,17px)!important;
  padding-inline: clamp(14px,5vw,25px);
}
.review-option,
.profile-edit-form input,
.profile-settings-logout,
.gt-translate-btn {
  font-size: clamp(14.5px,4.1vw,16px)!important;
}
.review-option {
  padding: clamp(14px,4.3vw,17px) clamp(14px,4.6vw,18px);
  overflow-wrap: anywhere;
}
.profile-edit-form label>span,
.profile-theme-control button,
.gt-history-title,
.gt-history-res {
  font-size: clamp(12px,3.45vw,14px)!important;
}
.notebook-share-card {
  padding: clamp(14px,4.8vw,19px) clamp(14px,5vw,20px);
  gap: clamp(7px,3vw,12px);
}
.notebook-share-head b { font-size: clamp(15px,4.3vw,17px); }
.notebook-share-copy>small { font-size: clamp(12px,3.8vw,15px); }
.notebook-share-copy>p { font-size: clamp(10.5px,3vw,12px); }
.notebook-share-brand { font-size: clamp(10px,3vw,12px); }
.bottom-nav .nav-btn { font-size: clamp(10px,2.9vw,11px); }

@media (max-width: 350px) {
  .review-streak-stat-row { grid-template-columns: minmax(0,1.2fr) minmax(92px,.8fr); margin-inline: 10px; }
  .review-calendar-card { margin-inline: 10px; padding-inline: 12px; }
  .profile-page,.profile-auth,.profile-settings-page,.profile-password-page { padding-inline: 12px; }
  .notebook-share-sheet { padding-inline: 12px; }
}

/* Năm tab chia đều và giữ nhãn vừa cả màn hình 320px. */
.bottom-nav { justify-content:stretch; padding-inline:clamp(2px,1.5vw,7px) }
.bottom-nav .nav-btn {
  min-width:0;
  padding-inline:clamp(1px,1.5vw,7px);
  white-space:nowrap;
}
.bottom-nav .nav-btn>span:last-child { font-size:clamp(9px,2.7vw,11px) }

/* Quỹ đạo SVG bắt đầu từ padding box của icon; kéo ngược đúng 1px để tâm
   stroke trùng tâm border-box ở cả cạnh phải và cạnh dưới. */
.review-notebook-icon>svg.review-scholar-edge {
  transform:translate3d(-1px,-1px,0)!important;
}

/* LEADERBOARD — tier trước, streak sau; bề mặt iOS tối giản. */
.leaderboard-page {
  min-height:calc(100dvh - 122px);
  padding:clamp(14px,4vw,19px) clamp(12px,4vw,18px) 28px;
  color:var(--gv-text);
}
.leaderboard-demo-note {
  margin-bottom:10px;
  padding:9px 11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  border:1px solid rgba(217,153,24,.24);
  border-radius:14px;
  background:rgba(255,190,55,.10);
  color:#9a6810;
  font-size:clamp(10px,3vw,12px);
  line-height:1.35;
}
.leaderboard-demo-note button { flex:0 0 auto;border:0;background:transparent;color:var(--gv-primary);font:inherit;font-weight:600;cursor:pointer }
.leaderboard-me {
  margin-top:14px;
  padding:clamp(14px,4vw,17px);
  display:grid;
  grid-template-columns:.72fr 1.25fr 1fr;
  gap:10px;
  border-radius:20px;
  color:#fff;
  background:linear-gradient(135deg,var(--gv-primary),#3148b8);
}
.leaderboard-me>span { min-width:0;display:grid;align-content:center;gap:4px }
.leaderboard-me small { color:rgba(255,255,255,.72);font-size:clamp(9px,2.65vw,11px);font-weight:500 }
.leaderboard-me strong { font-size:clamp(23px,7vw,30px);font-weight:500;letter-spacing:-.04em }
.leaderboard-me b { overflow:hidden;text-overflow:ellipsis;font-size:clamp(11px,3.25vw,14px);font-weight:550;line-height:1.35 }
.leaderboard-title { margin:22px 2px 10px;display:flex;align-items:baseline;justify-content:space-between;gap:12px }
.leaderboard-title-main { min-width:0;display:flex;align-items:center;gap:7px }
.leaderboard-title h2 { margin:0;font-size:clamp(17px,4.8vw,20px);font-weight:500;letter-spacing:-.02em }
.leaderboard-title small { color:var(--gv-muted);font-size:clamp(10px,3vw,12px) }
.leaderboard-info-wrap { position:relative;display:inline-grid;place-items:center }
.leaderboard-info-wrap>button {
  width:21px;
  height:21px;
  padding:0;
  border:1px solid var(--gv-border);
  border-radius:50%;
  background:var(--gv-surface);
  color:var(--gv-muted);
  font:600 12px/1 var(--gv-font);
  cursor:pointer;
}
.leaderboard-info-tooltip {
  position:absolute;
  z-index:12;
  top:29px;
  left:-82px;
  width:min(270px,calc(100vw - 44px));
  padding:11px 13px;
  border:1px solid var(--gv-border);
  border-radius:14px;
  background:var(--gv-surface);
  color:var(--gv-text);
  box-shadow:0 10px 28px rgba(30,40,72,.16);
  font-size:clamp(11px,3.2vw,13px);
  font-weight:400;
  line-height:1.5;
  animation:leaderboardTooltipIn .16s cubic-bezier(.2,.8,.2,1) both;
}
.leaderboard-info-tooltip[hidden] { display:none!important }
@keyframes leaderboardTooltipIn { from { opacity:0;transform:translateY(-5px) scale(.97) } to { opacity:1;transform:none } }
.leaderboard-list {
  overflow:hidden;
  border:1px solid var(--gv-border);
  border-radius:20px;
  background:var(--gv-surface);
}
.leaderboard-row {
  min-height:clamp(67px,19vw,76px);
  padding:10px clamp(10px,3.4vw,15px);
  display:grid;
  grid-template-columns:clamp(25px,7vw,31px) clamp(39px,11vw,45px) minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(7px,2.5vw,11px);
  border-bottom:1px solid var(--gv-border);
}
.leaderboard-row:last-child { border-bottom:0 }
.leaderboard-row.is-current { background:var(--gv-primary-soft) }
.leaderboard-rank { text-align:center;color:var(--gv-muted);font-size:clamp(13px,3.8vw,16px);font-weight:550 }
.leaderboard-row.gold .leaderboard-rank { color:#d39912 }
.leaderboard-row.silver .leaderboard-rank { color:#8490a3 }
.leaderboard-row.bronze .leaderboard-rank { color:#b47445 }
.leaderboard-avatar {
  width:clamp(39px,11vw,45px);
  height:clamp(39px,11vw,45px);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--gv-primary-soft);
  color:var(--gv-primary);
  font-size:clamp(14px,4vw,17px);
  font-weight:600;
}
.leaderboard-row.tier-scholar .leaderboard-avatar { background:#e5f2ff;color:#1970cb }
.leaderboard-row.tier-legendary .leaderboard-avatar,
.leaderboard-row.tier-legendary-lit .leaderboard-avatar { background:#efe8ff;color:#7449d0 }
.leaderboard-person { min-width:0;display:grid;gap:4px }
.leaderboard-person b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(13px,3.8vw,15px);font-weight:550 }
.leaderboard-person small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gv-muted);font-size:clamp(9.5px,2.8vw,11px) }
.leaderboard-streak { min-width:42px;display:grid;grid-template-columns:15px auto;align-items:center;justify-content:end;column-gap:3px;text-align:right;color:var(--gv-faint) }
.leaderboard-streak svg { width:15px;height:15px }
.leaderboard-streak b { font-size:clamp(13px,3.7vw,15px);font-weight:600 }
.leaderboard-streak small { grid-column:1/-1;color:var(--gv-muted);font-size:9px }
.leaderboard-locked,.leaderboard-error { min-height:calc(100dvh - 150px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center }
.leaderboard-lock-icon,.leaderboard-error>div { width:62px;height:62px;display:grid;place-items:center;border-radius:20px;background:var(--gv-primary-soft);color:var(--gv-primary) }
.leaderboard-lock-icon svg,.leaderboard-error svg { width:29px;height:29px }
.leaderboard-locked h1 { margin:18px 0 7px;font-size:clamp(19px,5.5vw,23px);font-weight:550 }
.leaderboard-locked p,.leaderboard-error p { max-width:330px;margin:0;color:var(--gv-muted);font-size:clamp(12px,3.5vw,14px);line-height:1.55 }
.leaderboard-locked button,.leaderboard-error button { margin-top:18px;border:0;border-radius:999px;padding:12px 21px;background:var(--gv-primary);color:#fff;font:inherit;font-size:clamp(14px,4vw,16px);font-weight:550 }
.leaderboard-locked-actions { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px }
.leaderboard-locked-actions button.secondary { background:var(--gv-primary-soft);color:var(--gv-primary-ink) }
.leaderboard-error>b { margin-top:16px;font-size:17px;font-weight:550 }
.leaderboard-empty { padding:45px 20px;text-align:center;color:var(--gv-muted);font-size:14px }
.leaderboard-pagination { margin:14px auto 0;display:flex;align-items:center;justify-content:center;gap:14px }
.leaderboard-pagination button {
  width:42px;
  height:42px;
  padding:0;
  border:1px solid var(--gv-border);
  border-radius:50%;
  background:var(--gv-surface);
  color:var(--gv-primary-ink);
  font:400 29px/36px var(--gv-font);
  cursor:pointer;
  box-shadow:var(--gv-shadow);
}
.leaderboard-pagination button:disabled { opacity:.28;cursor:default;box-shadow:none }
.leaderboard-pagination span { min-width:38px;text-align:center;color:var(--gv-muted);font-size:clamp(12px,3.4vw,14px);font-weight:500 }
.leaderboard-page-next { animation:leaderboardPageNext .22s cubic-bezier(.2,.8,.2,1) both }
.leaderboard-page-prev { animation:leaderboardPagePrev .22s cubic-bezier(.2,.8,.2,1) both }
@keyframes leaderboardPageNext { from { opacity:0;transform:translateX(24px) } to { opacity:1;transform:none } }
@keyframes leaderboardPagePrev { from { opacity:0;transform:translateX(-24px) } to { opacity:1;transform:none } }

html[data-theme="dark"] .leaderboard-row.tier-scholar .leaderboard-avatar { background:rgba(43,134,224,.2);color:#9bcbff }
html[data-theme="dark"] .leaderboard-row.tier-legendary .leaderboard-avatar,
html[data-theme="dark"] .leaderboard-row.tier-legendary-lit .leaderboard-avatar { background:rgba(137,88,231,.2);color:#d7c1ff }
html[data-theme="dark"] .leaderboard-demo-note { background:rgba(215,156,48,.12);border-color:rgba(236,183,79,.2);color:#e7c071 }

@media (max-width:350px) {
  .leaderboard-page { padding-inline:10px }
  .leaderboard-me { grid-template-columns:.65fr 1.2fr 1fr;padding-inline:12px;gap:7px }
  .leaderboard-row { padding-inline:8px }
}

/* Hồ sơ xếp hạng và popup người học dùng chung một hệ màu theo cấp Sổ tay. */
.tier-rookie { --leader-accent:#77869a;--leader-soft:rgba(119,134,154,.12) }
.tier-diligent { --leader-accent:#4f5fd7;--leader-soft:rgba(79,95,215,.12) }
.tier-bookworm { --leader-accent:#d49a16;--leader-soft:rgba(212,154,22,.14) }
.tier-master { --leader-accent:#c6404a;--leader-soft:rgba(198,64,74,.13) }
.tier-scholar { --leader-accent:#2486dc;--leader-soft:rgba(36,134,220,.13) }
.tier-legendary,.tier-legendary-lit { --leader-accent:#8a5be1;--leader-soft:rgba(138,91,225,.14) }

#profileRankSummary .leaderboard-me { margin:0 0 10px }
.leaderboard-featured { margin-top:14px }
.leaderboard-row {
  width:100%;
  border-top:0;
  border-left:0;
  border-right:0;
  background:transparent;
  color:var(--gv-text);
  font:inherit;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease,transform .16s ease;
}
.leaderboard-row:active { transform:scale(.985);background:var(--leader-soft) }
.leaderboard-row.is-current { background:var(--leader-soft) }

.leaderboard-row.gold,.leaderboard-person-card.gold { --rank-glow:211,153,18 }
.leaderboard-row.silver,.leaderboard-person-card.silver { --rank-glow:132,144,163 }
.leaderboard-row.bronze,.leaderboard-person-card.bronze { --rank-glow:180,116,69 }
.leaderboard-row:is(.gold,.silver,.bronze) .leaderboard-person b,
:is(.leaderboard-person-popup,.leaderboard-featured) .leaderboard-person-card:is(.gold,.silver,.bronze) .leaderboard-person-identity h2 {
  color:#fff!important;
  text-shadow:0 1px 1px rgba(0,0,0,.28),0 0 8px rgba(var(--rank-glow),.95),0 0 16px rgba(var(--rank-glow),.58)
}
.leaderboard-row.has-hot-streak .leaderboard-streak svg {
  color:#ff6b2f!important;
  stroke:#ff6b2f!important;
  filter:none;
  animation:none;
}
.leaderboard-row.has-hot-streak .leaderboard-streak svg path:first-child { fill:#ff6b2f;stroke:#ff6b2f }
.leaderboard-row.has-hot-streak .leaderboard-streak svg path:last-child { fill:#ffd064;stroke:#ffd064 }
.leaderboard-row.is-streak-champion .leaderboard-streak {
  color:#ff6b2f;
  text-shadow:0 0 9px rgba(255,102,42,.55);
}
.leaderboard-row.is-streak-champion .leaderboard-streak svg {
  color:#ff6b2f!important;
  stroke:#ff6b2f!important;
  filter:drop-shadow(0 0 3px rgba(255,113,48,.95)) drop-shadow(0 0 7px rgba(255,80,25,.6));
  animation:leaderboardFireGlow 2.8s ease-in-out infinite;
}
.leaderboard-row.is-streak-champion .leaderboard-streak svg path:first-child { fill:#ff6b2f;stroke:#ff6b2f }
.leaderboard-row.is-streak-champion .leaderboard-streak svg path:last-child { fill:#ffd064;stroke:#ffd064 }
@keyframes leaderboardFireGlow {
  0%,100% { transform:scale(1);filter:drop-shadow(0 0 3px rgba(255,113,48,.8)) drop-shadow(0 0 6px rgba(255,80,25,.45)) }
  50% { transform:scale(1.1);filter:drop-shadow(0 0 4px rgba(255,149,65,1)) drop-shadow(0 0 10px rgba(255,69,20,.75)) }
}

.leaderboard-person-card {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(15px,4.5vw,19px);
  border:1px solid var(--gv-border);
  border-color:color-mix(in srgb,var(--leader-accent) 24%,var(--gv-border));
  border-radius:24px;
  background:var(--gv-surface);
  color:var(--gv-text);
  box-shadow:0 12px 32px rgba(32,43,79,.10);
}
.leaderboard-person-card::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0 0 auto;
  height:112px;
  background:linear-gradient(145deg,var(--leader-soft),transparent 78%);
  pointer-events:none;
}
.leaderboard-person-identity {
  display:grid;
  grid-template-columns:clamp(58px,17vw,72px) minmax(0,1fr);
  align-items:center;
  gap:clamp(12px,4vw,17px);
}
.leaderboard-person-avatar,
.leaderboard-detail-avatar {
  width:clamp(58px,17vw,72px);
  height:clamp(58px,17vw,72px);
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:var(--leader-soft);
  color:var(--leader-accent);
  font-size:clamp(20px,6vw,26px);
  font-weight:550;
}
.leaderboard-person-avatar {
  box-shadow:0 0 0 2px var(--gv-surface),0 0 0 4px var(--leader-soft);
  box-shadow:0 0 0 2px var(--gv-surface),0 0 0 4px color-mix(in srgb,var(--leader-accent) 42%,transparent)
}
.leaderboard-person-avatar>* { width:100%;height:100%;object-fit:cover }
.leaderboard-person-identity small { color:var(--leader-accent);font-size:clamp(10px,3vw,12px);font-weight:550 }
.leaderboard-person-identity h2 { margin:4px 0 0;font-size:clamp(19px,5.6vw,23px);font-weight:550;letter-spacing:-.025em }
.leaderboard-person-identity .leaderboard-person-joined { display:block;margin-top:5px;color:var(--gv-muted)!important;font-size:clamp(11px,3.2vw,13px);font-weight:400 }
.leaderboard-person-stats {
  margin:17px 0 13px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.leaderboard-person-stats>span {
  min-width:0;
  padding:12px 13px;
  display:grid;
  gap:5px;
  border:1px solid var(--gv-border);
  border-radius:16px;
  background:var(--gv-surface);
  background:color-mix(in srgb,var(--gv-surface) 88%,var(--leader-soft));
}
.leaderboard-person-stats small { color:var(--gv-muted);font-size:clamp(10px,3vw,12px) }
.leaderboard-person-stats b { font-size:clamp(14px,4vw,16px);font-weight:550 }
.leaderboard-person-notebook .review-notebook-card { min-height:82px }
.leaderboard-level-breakdown {
  margin-top:10px;
  padding:5px 13px 11px;
  overflow:hidden;
  border:1px solid var(--gv-border);
  border-radius:17px;
  background:var(--gv-bg);
  animation:leaderboardLevelsIn .22s cubic-bezier(.2,.8,.2,1) both;
}
.leaderboard-level-breakdown[hidden] { display:none!important }
.leaderboard-level-breakdown>span { padding:10px 1px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--gv-border) }
.leaderboard-level-breakdown i { color:var(--gv-muted);font-style:normal;font-size:clamp(12px,3.5vw,14px) }
.leaderboard-level-breakdown b { font-size:clamp(12px,3.5vw,14px);font-weight:550 }
.leaderboard-level-breakdown>small { display:block;padding-top:10px;color:var(--gv-faint);font-size:clamp(9.5px,2.8vw,11px);line-height:1.45 }
@keyframes leaderboardLevelsIn { from { opacity:0;transform:translateY(-8px) } to { opacity:1;transform:none } }

.leaderboard-person-overlay {
  position:fixed;
  z-index:6200;
  inset:0;
  padding:max(env(safe-area-inset-top),14px) 14px max(env(safe-area-inset-bottom),14px);
  display:flex;
  align-items:center;
  justify-content:center;
  /* Cùng công thức kính mờ với các thanh dính, chỉ khác tông tối để làm nổi
     popup. Phần nền chứa thông tin bên trong (.leaderboard-person-popup) cố
     tình KHÔNG mờ để chữ luôn sắc nét. */
  background:rgba(13,20,38,.38);
  backdrop-filter:saturate(145%) blur(18px);
  -webkit-backdrop-filter:saturate(145%) blur(18px);
  animation:leaderboardOverlayIn .22s ease both;
}
.leaderboard-person-popup {
  width:min(100%,430px);
  max-height:calc(100dvh - 28px);
  overflow:auto;
  padding:10px;
  border:1px solid var(--gv-border);
  border-color:color-mix(in srgb,var(--leader-accent) 26%,var(--gv-border));
  border-radius:28px;
  background:var(--gv-bg);
  box-shadow:0 24px 70px rgba(8,14,31,.26);
  animation:leaderboardPopupIn .24s cubic-bezier(.2,.8,.2,1) both;
}
.leaderboard-person-popup-head {
  height:48px;
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  text-align:center;
}
.leaderboard-person-popup-head button {
  width:38px;
  height:38px;
  border:1px solid var(--gv-border);
  border-radius:12px;
  background:var(--gv-surface);
  color:var(--gv-primary-ink);
  font:400 29px/1 var(--gv-font);
  cursor:pointer;
}
.leaderboard-person-popup-head b { font-size:clamp(15px,4.3vw,17px);font-weight:550 }
.leaderboard-person-overlay.closing { animation:leaderboardOverlayOut .2s ease both }
.leaderboard-person-overlay.closing .leaderboard-person-popup { animation:leaderboardPopupOut .2s ease both }
@keyframes leaderboardOverlayIn { from { opacity:0 } to { opacity:1 } }
@keyframes leaderboardOverlayOut { to { opacity:0 } }
@keyframes leaderboardPopupIn { from { opacity:0;transform:scale(.94) translateY(10px) } to { opacity:1;transform:none } }
@keyframes leaderboardPopupOut { to { opacity:0;transform:scale(.96) translateY(8px) } }

html[data-theme="dark"] .leaderboard-person-card,
html[data-theme="dark"] .leaderboard-person-popup { box-shadow:0 18px 45px rgba(0,0,0,.28) }
@media (prefers-reduced-motion:reduce) {
  .leaderboard-row.is-streak-champion .leaderboard-streak svg { animation:none!important }
}

/* Safari iOS: toàn bộ thanh điều hướng dùng fixed viewport, không còn đi qua
  pipeline sticky khi document rubber-band. Document vẫn là vùng cuộn chính. */
.review-topbar,
.review-streak-head,
.profile-route-head,
.lm-header {
  position:fixed!important;
  top:calc(var(--gv-header-h) - 1px);
  left:0;
  right:0;
  width:100%;
  max-width:480px;
  height:var(--gv-route-h);
  margin:0 auto!important;
  z-index:50;
}
.review-notebook-page,
.review-demo-picker,
.review-tier-demo-page,
.review-streak-page {
  padding-top:var(--gv-route-h);
}

/* Hai màn phủ toàn màn hình giữ head cố định và chỉ cuộn phần nội dung. */
.review-session {
  padding-top:var(--gv-review-head-h)!important;
  display:flex;
  flex-direction:column;
  overflow:hidden!important;
}
.review-session-head {
  position:fixed!important;
  top:0;
  left:0;
  right:0;
  width:100%;
  max-width:480px;
  height:var(--gv-review-head-h);
  margin:0 auto;
  padding-top:env(safe-area-inset-top,0px);
  border-bottom:0!important;
  box-shadow:inset 0 -1px rgba(210,217,229,.70);
  z-index:10000;
}
.review-session-bar {
  height:var(--gv-route-h);
  padding:7px 13px;
}
.review-question-stage {
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:none;
}

/* Fixed descendants không được nằm dưới ancestor có transform trên WebKit. */
@keyframes reviewRouteOutForward { to { opacity:0 } }
@keyframes reviewRouteInForward { from { opacity:0 } to { opacity:1 } }
@keyframes reviewRouteOutBack { to { opacity:0 } }
@keyframes reviewRouteInBack { from { opacity:0 } to { opacity:1 } }
@keyframes profileRouteForward { from { opacity:0 } to { opacity:1 } }
@keyframes profileRouteBack { from { opacity:0 } to { opacity:1 } }
@keyframes reviewZoomIn { from { opacity:0 } to { opacity:1 } }
@keyframes reviewZoomOut { to { opacity:0 } }