/* coodau.com · giao diện */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0}
[hidden]{display:none!important}
img,svg{max-width:100%}
.ts{min-height:0}
.ts:not(:empty){min-height:65px}
/* Layout: quiet reference-desk — serif wordmark and a single structured query line ("___ có ở đâu?"), then two indexed panels (đã có chỗ / đang hỏi). One deep moss accent, hairlines, no pills. */
:root{
  --bg:#F6F7F6; --surface:#FFFFFF; --ink:#121816; --muted:#65706C; --faint:#9AA39F; --line:#E2E6E4; --line-strong:#CDD3D0;
  --accent:#164C43; --accent-ink:#FFFFFF; --accent-soft:#EDF3F1; --amber:#A8741A; --danger:#A3352C;
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:6px; --r-lg:10px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0D100F; --surface:#141917; --ink:#E9EDEB; --muted:#929C98; --faint:#68726E; --line:#232A28; --line-strong:#323B38;
  --accent:#7CC4B3; --accent-ink:#0A1A16; --accent-soft:#18272390; --amber:#D9A54A; --danger:#E58A80; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0D100F; --surface:#141917; --ink:#E9EDEB; --muted:#929C98; --faint:#68726E; --line:#232A28; --line-strong:#323B38;
  --accent:#7CC4B3; --accent-ink:#0A1A16; --accent-soft:#18272390; --amber:#D9A54A; --danger:#E58A80; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.top .mini{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{border:1px solid var(--line-strong);background:transparent;border-radius:var(--r);padding:8px 14px;font-weight:500;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--ink)}
.btn.pri{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.pri:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink);border-color:var(--line-strong)}
.btn.danger{color:var(--danger)}
.btn.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn[disabled]{opacity:.45;cursor:default}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--accent);font-weight:500}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-size:11.5px;font-weight:600;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}

/* hero */
.hero{padding-block:clamp(48px,9vw,96px) 40px;display:grid;gap:26px}
.mark{font-family:var(--serif);font-weight:500;font-size:clamp(46px,8.6vw,88px);line-height:1;letter-spacing:-.025em;margin:0;text-wrap:balance}
.mark{white-space:nowrap;letter-spacing:-.03em}
.mark .qm{height:.8em;width:.432em;vertical-align:-.081em;margin-left:.025em;color:var(--accent)}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);margin-bottom:32px}
.how div{padding:16px 20px;display:grid;gap:2px;min-width:0}
.how div+div{border-left:1px solid var(--line)}
.how b{font-weight:500;font-size:14.5px}
.how span{font-size:13.5px;color:var(--muted)}
.how .k{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:15px}
@media (max-width:680px){.how{grid-template-columns:1fr}.how div+div{border-left:0;border-top:1px solid var(--line)}}
.areas{display:flex;gap:6px 18px;flex-wrap:wrap;align-items:baseline;margin:0 0 18px;font-size:13.5px;color:var(--muted)}
.areas button{border:0;background:none;padding:2px 0;cursor:pointer;font-size:13.5px;color:var(--muted);border-bottom:1.5px solid transparent}
.areas button:hover{color:var(--ink)}
.areas button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:500}
select.sel{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r);padding:10px 12px;width:100%;font:inherit;color:inherit}
.topic{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.src{display:grid;gap:4px;margin:0;padding-left:18px}
.src a{color:var(--accent);overflow-wrap:anywhere}
.ans{display:grid;gap:4px;border-left:2px solid var(--accent);padding:4px 0 4px 14px}
.ans .lbl{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ans b{font-size:18px;font-weight:500;overflow-wrap:anywhere;line-height:1.5}
.ans span{color:var(--muted);font-size:14px}
mark{background:var(--accent-soft);color:inherit;border-radius:2px;padding:0 1px}
.recent{display:inline-flex;gap:4px;align-items:baseline}
.recent .rm{color:var(--faint);font-size:12px}
.acts2{display:flex;gap:8px;flex-wrap:wrap}
a.btn{text-decoration:none;color:var(--ink)}
.lede{margin:0;color:var(--muted);font-size:17px;max-width:none;line-height:1.65}
p,li,.how span,.how b,.empty,.byline,.info,.note,.field small,.row .t,.row .s{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance}
.lede b{color:var(--ink);font-weight:500}
form.search{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);max-width:760px;transition:border-color .15s,box-shadow .15s}
form.search:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px var(--accent-soft)}
form.search input{flex:1;min-width:0;border:0;background:transparent;font-size:19px;padding:18px 0 18px 22px;outline:none}
form.search input::placeholder{color:var(--faint)}
form.search .suffix{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--muted);white-space:nowrap;align-self:center;padding:0 16px 0 10px}
form.search .go{border:0;border-left:1px solid var(--line-strong);background:transparent;padding:0 26px;font-weight:600;cursor:pointer;font-size:15px;border-radius:0 var(--r-lg) var(--r-lg) 0;transition:background .15s,color .15s}
form.search .go:hover{background:var(--ink);color:var(--bg)}
.hints{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:baseline;font-size:13.5px;color:var(--muted)}
.hints button{border:0;background:none;padding:0;cursor:pointer;font-size:13.5px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.hints button:hover{text-decoration-color:var(--accent);color:var(--accent)}
@media (max-width:560px){
  form.search{flex-wrap:wrap}
  form.search input{font-size:17px;padding:15px 0 15px 16px}
  form.search .suffix{font-size:17px}
  form.search .go{width:100%;border-left:0;border-top:1px solid var(--line-strong);padding:13px;border-radius:0 0 var(--r-lg) var(--r-lg)}
}

/* results */
.results{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;margin-bottom:32px;display:grid;gap:10px}
.results h2{margin:0;font-family:var(--serif);font-weight:500;font-size:22px;text-wrap:balance}
.results .note{color:var(--muted);margin:0}
.rhead{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}

/* panels */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-bottom:64px}
@media (max-width:780px){.cols{grid-template-columns:1fr}}
.col{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px 12px}
.colhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.colhead h3{margin:0;font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-.01em}
.colhead .n{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.list{list-style:none;margin:0;padding:0}
.list li+li .row{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr auto;gap:3px 16px;padding:14px 0;cursor:pointer;width:100%;text-align:left;background:none;border:0}
.row:hover .t{color:var(--accent)}
.row .t{font-weight:500;font-size:15.5px;min-width:0;overflow-wrap:anywhere;transition:color .12s}
.row .t em{font-family:var(--serif);font-style:italic;color:var(--muted);font-weight:400}
.row .s{grid-column:1/2;color:var(--muted);font-size:13.5px;min-width:0;overflow-wrap:anywhere;display:flex;gap:7px;align-items:center}
.row .m{grid-row:1/3;grid-column:2;align-self:center;text-align:right;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.7}
.pin{width:12px;height:14px;flex:none;color:var(--faint)}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--muted)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;flex:none}
.pill.open::before{background:var(--amber)}
.pill.done{color:var(--accent)}
.pill.done::before{background:var(--accent)}
.empty{padding:26px 0;color:var(--muted);font-size:14px}
.more{margin:8px 0 6px}

/* sheet */
.veil{position:fixed;inset:0;background:rgba(8,12,11,.42);backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;z-index:50;overflow-y:auto;
  padding:max(24px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.sheet{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);width:100%;max-width:640px;box-shadow:0 24px 60px rgba(0,0,0,.18);padding:28px 28px 26px;display:grid;gap:18px;margin-top:5vh}
.sheet header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sheet h2{margin:0;font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.2;letter-spacing:-.015em;text-wrap:balance;overflow-wrap:anywhere}
.sheet h2 .suf{font-style:italic;font-weight:400;color:var(--accent)}
.x{border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:var(--faint);padding:2px 6px;border-radius:var(--r)}
.x:hover{color:var(--ink)}
.where{display:flex;gap:12px;align-items:flex-start;border-left:2px solid var(--accent);padding:4px 0 4px 14px}
.where .pin{width:14px;height:17px;margin-top:4px;color:var(--accent)}
.where b{display:block;font-size:17px;font-weight:500;overflow-wrap:anywhere}
.where span{color:var(--muted);font-size:14px}
.desc{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}
.tags{display:flex;gap:6px 14px;flex-wrap:wrap}
.tag{border:0;background:none;padding:0;font-size:13.5px;cursor:pointer;color:var(--accent);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.byline{font-size:13px;color:var(--muted)}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sec{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:0}
.field{display:grid;gap:6px}
.field label{font-weight:500;font-size:14px}
.field small{color:var(--muted);font-size:12.5px}
.field input,.field textarea{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r);padding:11px 13px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{min-height:92px;resize:vertical;line-height:1.6}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}.sheet{padding:22px 18px}}
.err{color:var(--danger);font-size:13.5px;margin:0}
.info{font-size:14px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0;line-height:1.6}
.mrow{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:16px 0;border-top:1px solid var(--line);align-items:start}
.mrow .nm{font-weight:500;min-width:0;overflow-wrap:anywhere}
.mrow .em{color:var(--muted);font-size:13.5px;overflow-wrap:anywhere;user-select:all}
.mrow .nt{font-size:13.5px;margin:0;color:var(--muted);overflow-wrap:anywhere}
.mrow .b{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:520px){.mrow{grid-template-columns:1fr}.mrow .b{justify-content:flex-start}}
.foot{border-top:1px solid var(--line);padding-block:24px 44px;color:var(--muted);font-size:13px;display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:space-between}
.foot nav{display:flex;gap:6px 20px;flex-wrap:wrap}
.lnk{border:0;background:none;padding:0;color:var(--ink);cursor:pointer;font-size:13px;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.lnk:hover{color:var(--accent);text-decoration-color:var(--accent)}
.disc{font-size:12.5px;color:var(--faint);border-top:1px solid var(--line);padding-top:12px;margin:0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.check input{width:17px;height:17px;margin-top:3px;accent-color:var(--accent);flex:none}
.tabs{display:flex;gap:22px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tabs button{border:0;background:none;padding:0 0 10px;font-weight:500;font-size:14px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.legal{display:grid;gap:12px;max-height:60vh;overflow-y:auto;padding-right:6px}
.legal h4{margin:8px 0 0;font-family:var(--serif);font-weight:500;font-size:17px}
.legal p,.legal li{margin:0;font-size:14.5px;line-height:1.7}
.legal ul{margin:0;padding-left:20px;display:grid;gap:5px}
.legal .ver{font-size:12.5px;color:var(--faint)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.mrow{grid-template-columns:1fr}.mrow .b{justify-content:flex-start}

a.home{color:inherit;text-decoration:none;cursor:pointer}
.top a.home:hover{color:var(--ink,inherit)}
.mark a.home:hover .qm{opacity:.85}
a.home:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}