/* Trang chọn hướng + trang nguồn ảnh. */
.dir-chooser { --bg: #F3F5F8; --muted: #56636F; --line: #DCE3EA; }
.ch-head { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; padding-bottom: 8px; }
.ch-head img { height: 56px; width: auto; }
.ch-head .lang-toggle { color: var(--ink); }
.dir-chooser main { padding-top: 40px; padding-bottom: 80px; }
.dir-chooser h1 { font-size: clamp(var(--step-4), 5vw, var(--step-6)); letter-spacing: -.02em; max-width: 18ch; }
.dir-chooser .lede { font-size: var(--step-1); color: var(--muted); margin: 16px 0 48px; max-width: 52ch; }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.choice a { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: #fff;
  border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.choice a:hover { border-color: var(--ink); }
.shots { position: relative; aspect-ratio: 16 / 11; background: #E4E9EF; overflow: hidden; }
.shots .desk { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shots .mob { position: absolute; right: 14px; bottom: -40px; width: 26%; border-radius: 14px;
  border: 4px solid var(--ink); box-shadow: 0 10px 24px rgba(16, 36, 55, .25); }
.choice-text { padding: 22px 24px 26px; display: grid; gap: 8px; flex: 1; align-content: start; }
.choice h2 { font-size: var(--step-3); }
.choice p { color: var(--muted); }
.open { margin-top: 8px; font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 960px) { .choices { grid-template-columns: 1fr; max-width: 560px; } }

.credits h1 { margin-top: 24px; }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.credits table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
.credits th, .credits td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.credits td a { word-break: break-all; }