/* Khung trang: nền, phần đầu ảnh hồ, đăng nhập, điều hướng, thanh bản thử. */
.bg { position: fixed; inset: -80px; z-index: -1; background: url(../img/lake-hero.jpg) 70% 8% / 320%; filter: blur(46px) saturate(.6) brightness(1.3); }
.frame { position: relative; margin: clamp(8px, 1.2vw, 18px); border-radius: var(--r-frame); overflow: clip; box-shadow: 0 30px 60px -36px rgba(6, 40, 54, .55); background: var(--paper); min-height: calc(100vh - 2 * clamp(8px, 1.2vw, 18px)); display: flex; flex-direction: column; }

/* Phần đầu có ảnh hồ */
.hero { position: relative; padding-inline: var(--g); isolation: isolate; overflow: hidden; }
.hero .photo { position: absolute; left: 0; bottom: 0; height: 240%; width: auto; min-width: 100%; max-width: none; object-fit: cover; object-position: left bottom; z-index: -4; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background: linear-gradient(180deg, rgba(6, 38, 58, .42), rgba(6, 38, 58, .05) 70%); }
.wave { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; z-index: -2; }
.wave.m2 { clip-path: url(#clip-m2); background: rgba(255, 255, 255, .22); }
.wave.m1 { clip-path: url(#clip-m1); background: rgba(240, 250, 248, .44); }
.wave.sand { clip-path: url(#clip-sand); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .26 0 0 0 0 .08 0 0 0 .55 -.14'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(120deg, #F3C793 0%, var(--sand) 46%, var(--sand-2) 100%); }
.inner { position: relative; max-width: var(--max); margin-inline: auto; }

.topbar { display: flex; align-items: center; gap: 12px 20px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -.2px; text-decoration: none; color: var(--deep); }
.top-end { margin-left: auto; display: flex; align-items: center; gap: 12px; position: relative; }
.me { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 15px; font-weight: 700; background: #fff; color: var(--deep); border: 0; }
.me:focus-visible { outline-color: #fff; }

.hero-app { padding-bottom: 22px; }
.hero-app .hero-title { padding-top: 6px; padding-bottom: 8px; max-width: min(500px, 40vw); }
.hero-app h1 { font-size: clamp(32px, 3.6vw, 48px); }
.hero-app p { margin-top: 6px; }

.hero-trip { padding-bottom: 16px; }
.trip-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 24px; flex-wrap: wrap; padding-top: 2px; }
.trip-head .ttl { max-width: min(470px, 36vw); }
.trip-head h1 { font-size: clamp(30px, 3.5vw, 46px); margin-top: 2px; }
.trip-facts { display: flex; gap: 8px; flex-wrap: wrap; }
.trip-facts .tag { background: var(--glass-strong); padding: 5px 11px 5px 9px; backdrop-filter: blur(8px); }

.route { display: flex; gap: 2px; margin-top: 16px; padding: 4px; border-radius: 14px; background: var(--glass); border: 1px solid rgba(255, 255, 255, .8); backdrop-filter: blur(14px) saturate(1.3); overflow-x: auto; scrollbar-width: none; }
.route a { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 15px; border-radius: 10px; text-decoration: none; font-size: 15px; font-weight: 500; }
.route a:hover { background: rgba(11, 52, 64, .08); }
.route a[aria-current] { background: var(--deep); color: #fff; font-weight: 700; }

.subnav { padding: 12px var(--g) 0; }
.subnav .inner { border-bottom: 1px solid var(--line); padding-bottom: 10px; }

.page { flex: 1; padding: 24px var(--g) 44px; }
.page > .inner { display: grid; gap: 24px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.page-head p { max-width: 70ch; color: var(--deep-soft); margin-top: 4px; }

.foot { padding: 14px var(--g) 18px; background: var(--paper); color: var(--deep-soft); font-size: 12px; line-height: 18px; }
.foot .inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 24px; padding-top: 12px; border-top: 1px solid var(--line); }

/* Tài khoản */
.auth { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: center; gap: 24px; padding: 20px var(--g) 28px; isolation: isolate; overflow: hidden; min-height: 680px; }
.auth .photo { position: absolute; left: 0; bottom: 0; height: 154%; width: auto; min-width: 100%; max-width: none; object-fit: cover; object-position: left bottom; z-index: -4; }
.auth .wave { width: 70%; }
.auth-art { align-self: stretch; display: flex; flex-direction: column; }
.auth-art .brand { min-height: 56px; }
.auth-art .copy { margin-block: auto; padding-bottom: 32px; max-width: 460px; }
.auth-art h1 { font-size: clamp(38px, 4.4vw, 62px); }
.auth-art p { margin-top: 12px; font-size: 17px; line-height: 26px; }
.auth-card { padding: 28px; display: grid; gap: 16px; background: var(--glass-strong); }
.auth-card h2 { font-size: 28px; }

/* Thanh bản thử */
.dock { position: fixed; right: 14px; bottom: 14px; z-index: 50; font-size: 14px; line-height: 20px; }
.dock-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--deep); color: #fff; font-weight: 600; box-shadow: var(--shadow-float); }
.dock-btn:focus-visible { outline-color: var(--sand); }
.dock-panel { position: absolute; right: 0; bottom: calc(100% + 8px); width: min(320px, calc(100vw - 28px)); max-height: min(70vh, 560px); overflow: auto; padding: 14px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-float); display: grid; gap: 12px; }
.dock-panel h4 { font-size: 13px; line-height: 18px; color: var(--deep-soft); font-weight: 600; margin-bottom: 5px; }
.dock-panel .select { min-height: 44px; padding: 8px 10px; font-size: 14px; }
.dock-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.dock-roles button { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 8px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-size: 14px; font-weight: 500; text-align: left; }
.dock-roles button[aria-pressed=true] { border-color: var(--deep); background: var(--sand-soft); font-weight: 700; }

@media (max-width: 1000px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-art .copy { padding-block: 8px 12px; margin: 0; }
  .auth .wave { width: 100%; }
  .auth .wave.sand { clip-path: url(#clip-sand-s); }
  .auth .wave.m1 { clip-path: url(#clip-m1-s); }
  .auth .wave.m2 { clip-path: url(#clip-m2-s); }
}
@media (max-width: 720px) {
  :root { --r-frame: 22px; }
  .wave { width: 100%; }
  .hero .wave.sand { clip-path: url(#clip-band); }
  .hero .wave.m1 { clip-path: url(#clip-band-m1); }
  .hero .wave.m2 { clip-path: url(#clip-band-m2); }
  .trip-head .ttl, .hero-app .hero-title { max-width: none; }
  .top-end .btn { display: none; }
  .auth .photo { height: 100%; }
  .auth-card { padding: 20px; }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger > div { border-left: 0; border-top: 1px solid var(--line); }
  .ledger > div:nth-child(-n+2) { border-top: 0; }
  .ledger > div:nth-child(even) { border-left: 1px solid var(--line); }
  .foot { padding-bottom: 68px; }
}