/* up.1driver.net — giao dien chung cho ca ba trang.
 *
 * Y niem: so giao nhan tai lieu. Nen giay, chu muc, tai lieu xep theo ngay voi
 * cot ngay lam truc ben trai. Do son CHI dung de danh dau tep dang cong khai,
 * vi do la thu duy nhat mang rui ro; khong dung lam trang tri o bat ky cho nao khac.
 */

:root{
  --paper:#E8EDF0;
  --sheet:#FFFFFF;
  --ink:#16232E;
  --ink-2:#4A5C6A;
  --ink-3:#8493A0;
  --rule:#D7DFE5;
  --rule-2:#E4EAEE;

  --seal:#B5372B;          /* do son: chi danh dau tep cong khai */
  --seal-bg:#FAEDEB;
  --ok:#1C6148;
  --ok-bg:#E6F1EC;
  --warn:#7E5B14;
  --warn-bg:#FAF2E2;

  /* Thang chu: 13 / 16 / 20 / 25 / 31 / 39 */
  --t-s:0.8125rem;
  --t-b:1rem;
  --t-m:1.25rem;
  --t-l:1.5625rem;
  --t-xl:1.9375rem;
  --t-xxl:2.4375rem;

  --w:960px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",
    Roboto,Arial,sans-serif;
  font-size:var(--t-b);
  line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{margin:0;line-height:1.15;font-weight:600;letter-spacing:-0.015em}
h1{font-size:var(--t-xl)}
h2{font-size:var(--t-m)}
p{margin:0}

a{color:var(--ink-2);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline}

:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}

/* ------------------------------------------------------------- thanh tren */

.bar{
  background:var(--sheet);
  border-bottom:1px solid var(--rule);
  padding:0 20px;
}
.bar-in{
  max-width:var(--w);margin:0 auto;
  min-height:56px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.bar .me{font-weight:500;font-size:var(--t-s);color:var(--ink)}
.bar .spacer{flex:1}
.bar nav{display:flex;gap:18px}
.bar nav a{font-size:var(--t-s);cursor:pointer}

.page{max-width:var(--w);margin:0 auto;padding:32px 20px 72px}
/* Trang quan ly co nhieu cot hon nen duoc rong hon trang thuong. */
.page-wide{--w:1160px}

/* ---------------------------------------------------------------- khoi giay */

.sheet{
  background:var(--sheet);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:26px 28px;
  margin-bottom:24px;
}
.sheet > h2{margin-bottom:4px}
.sheet .lead{color:var(--ink-2);font-size:var(--t-s);margin-bottom:20px}

.head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.head .count{color:var(--ink-3);font-size:var(--t-s)}

/* ------------------------------------------------------------------- nhap */

label{display:block;font-size:var(--t-s);font-weight:500;margin-bottom:6px}

input[type=text],input[type=email],select{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--rule);
  border-radius:3px;
  background:var(--sheet);
  color:var(--ink);
  font:inherit;
  font-size:var(--t-b);
}
input::placeholder{color:var(--ink-3)}
input:focus,select:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(22,35,46,.08)}

/* ----------------------------------------------------------------- nut bam */

button{font:inherit;cursor:pointer;border-radius:3px;border:1px solid transparent}

.btn{
  padding:11px 20px;
  background:var(--ink);
  color:#fff;
  font-weight:500;
  font-size:var(--t-b);
}
.btn:hover{background:#0D1820}
.btn:disabled{opacity:.45;cursor:default}

.btn-quiet{
  padding:7px 12px;
  background:transparent;
  border-color:var(--rule);
  color:var(--ink-2);
  font-size:var(--t-s);
}
.btn-quiet:hover{border-color:var(--ink-3);color:var(--ink);background:var(--sheet)}
.btn-quiet:disabled{opacity:.45;cursor:default}

.btn-seal{color:var(--seal);border-color:#EBCCC8}
.btn-seal:hover{background:var(--seal-bg);border-color:var(--seal);color:var(--seal)}

/* ------------------------------------------------------------- thong bao */

.note{
  border-radius:3px;
  padding:12px 14px;
  font-size:var(--t-s);
  white-space:pre-line;
  margin-top:18px;
}
.note-ok{background:var(--ok-bg);color:var(--ok)}
.note-err{background:var(--seal-bg);color:var(--seal)}
.note-warn{background:var(--warn-bg);color:var(--warn)}

.hint{color:var(--ink-3);font-size:var(--t-s)}

/* ------------------------------------------------------------ o keo tha */

.drop{
  border:1px dashed var(--rule);
  border-radius:3px;
  background:#FBFCFD;
  padding:30px 20px;
  text-align:center;
  transition:border-color .15s,background .15s;
}
.drop.hot{border-color:var(--ink);background:#F4F7F9}
.drop p{font-size:var(--t-s);color:var(--ink-2)}
.drop .pick{
  display:inline-block;margin-bottom:6px;
  font-size:var(--t-b);font-weight:500;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;
  pointer-events:none}

/* ------------------------------------------------------------- muc da chon */

.picked{margin-top:20px;border-top:1px solid var(--rule-2)}
.pick-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px 16px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--rule-2);
}
.pick-row .file{grid-column:1/-1;font-size:var(--t-s);color:var(--ink-3);
  word-break:break-all}
.pick-row .drop-off{
  background:none;border:0;padding:4px 8px;color:var(--ink-3);font-size:var(--t-s);
}
.pick-row .drop-off:hover{color:var(--seal)}
.pick-row .track{grid-column:1/-1;height:2px;background:var(--rule-2);
  border-radius:2px;overflow:hidden}
.pick-row .track i{display:block;height:100%;width:0;background:var(--ink);
  transition:width .2s}
.pick-row .track i.done{background:var(--ok)}
.pick-row .track i.fail{background:var(--seal)}
.pick-row .state{grid-column:1/-1;font-size:var(--t-s);color:var(--ink-2)}

/* --------------------------------------------------------------- han muc */

.meter{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule-2);
  font-size:var(--t-s);color:var(--ink-2)}
.meter .track{display:block;margin-top:8px;height:4px;max-width:300px;
  background:#DBE3E8;border-radius:2px;overflow:hidden}
.meter .track i{display:block;height:100%;background:var(--ink-2);width:0;
  min-width:2px;border-radius:2px}
.meter .track i.full{background:var(--seal)}

/* -------------------------------------------------------------- so ghi ngay */

.ledger{list-style:none;margin:0;padding:0}

.day{display:grid;grid-template-columns:76px 1fr;gap:0 24px;
  border-top:1px solid var(--rule)}
.day:first-child{border-top:0}

.day-mark{padding:18px 0 18px;text-align:right;color:var(--ink-3);
  border-right:1px solid var(--rule-2)}
.day-mark b{display:block;font-size:var(--t-l);font-weight:600;color:var(--ink);
  line-height:1;letter-spacing:-0.02em}
.day-mark span{display:block;font-size:var(--t-s);margin-top:3px}
.day-mark i{display:block;font-size:var(--t-s);font-style:normal;opacity:.7}

.entries{list-style:none;margin:0;padding:0}
.entry{padding:18px 0;border-bottom:1px solid var(--rule-2)}
.entry:last-child{border-bottom:0}
.entry .name{font-weight:500;word-break:break-word}
.entry .name .ext{color:var(--ink-3);font-weight:400}
.entry .facts{margin-top:2px;font-size:var(--t-s);color:var(--ink-3)}
.entry .acts{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}

.seal{color:var(--seal);font-weight:500}
.seal::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--seal);margin-right:6px;
  vertical-align:.08em}

.link-row{margin-top:10px;display:flex;gap:8px;align-items:center;max-width:520px}
.link-row input{font-size:var(--t-s);padding:7px 10px;color:var(--ink-2);
  background:#FBFCFD}

/* ----------------------------------------------------------------- bang */

table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--rule-2);
  vertical-align:middle}
th{font-size:var(--t-s);font-weight:500;color:var(--ink-3);
  border-bottom-color:var(--rule)}
td.right{text-align:right;white-space:nowrap}
td.right button{margin-left:6px}
tbody tr:last-child td{border-bottom:0}

.tag{font-size:var(--t-s);color:var(--ink-3)}
.tag-on{color:var(--ok)}
.tag-off{color:var(--seal)}
.tag-wait{color:var(--warn)}
.tags{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
td .who{font-weight:500}
td .sub{font-size:var(--t-s);color:var(--ink-3);white-space:nowrap}
td.tight{white-space:nowrap}

/* ------------------------------------------------------------------ tabs */

.tabs{border-bottom:1px solid var(--rule);margin-bottom:24px;
  display:flex;gap:4px;overflow-x:auto}
.tabs button{
  background:none;border:0;border-bottom:2px solid transparent;
  padding:12px 14px;font-size:var(--t-s);font-weight:500;color:var(--ink-3);
  white-space:nowrap;margin-bottom:-1px;
}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}

section[hidden]{display:none}

/* ------------------------------------------------------------------ trong */

.empty{color:var(--ink-3);font-size:var(--t-s);padding:22px 0}

/* ------------------------------------------------------------ trang vao */

.enter{min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:32px 20px}
.enter .box{width:100%;max-width:392px}
.enter h1{margin-bottom:10px}
.enter .lead{color:var(--ink-2);font-size:var(--t-s);margin-bottom:28px;
  max-width:34ch}
.enter form > * + *{margin-top:14px}
.enter .btn{width:100%}
.enter .below{margin-top:16px;font-size:var(--t-s);display:flex;gap:14px;
  align-items:baseline;flex-wrap:wrap}
.enter .below a{cursor:pointer;color:var(--ink);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--rule)}
.enter .below a:hover{text-decoration-color:var(--ink)}
.enter .below a.off{color:var(--ink-3);cursor:default;text-decoration:none}
.enter .sig{margin-top:34px;padding-top:16px;border-top:1px solid var(--rule);
  font-size:var(--t-s);color:var(--ink-3)}

#code{font-size:var(--t-l);font-weight:600;letter-spacing:.3em;text-align:center;
  padding-left:.3em}
#target{font-weight:400;color:var(--ink-2)}

/* ------------------------------------------------------------------- nho */

@media (max-width:680px){
  :root{--t-xl:1.5625rem}
  .page{padding:22px 16px 56px}
  .sheet{padding:20px 18px;border-left:0;border-right:0;border-radius:0;
    margin-left:-16px;margin-right:-16px}
  .bar{padding:0 16px}
  .day{grid-template-columns:1fr;gap:0}
  .day-mark{text-align:left;border-right:0;padding:16px 0 0;
    display:flex;align-items:baseline;gap:7px}
  .day-mark b{font-size:var(--t-b)}
  .day-mark span,.day-mark i{margin-top:0}
  th.opt,td.opt{display:none}
  .link-row{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}