/* Giao diện nền trắng hiện đại, sạch sẽ, chuẩn sắc nét */

:root {
  --giay:        #ffffff;
  --giay-2:      #ffffff;
  --giay-3:      #f8fafc;
  --vien:        #e2e8f0;
  --vien-dam:    #cbd5e1;
  --muc:         #0f172a;
  --muc-nhat:    #334155;
  --muc-mo:      #64748b;
  --che:         #15803d;
  --che-sang:    #16a34a;
  --che-mo:      #dcfce7;
  --dat:         #b45309;
  --dat-mo:      #fef3c7;
  --do:          #dc2626;
  --bong:        0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  --bong-sau:    0 4px 12px rgba(0,0,0,0.06), 0 16px 36px rgba(0,0,0,0.08);
  --tron:        12px;
  --tron-nho:    8px;
}

* { box-sizing: border-box; }

[hidden] {
  display: none !important;
}

::placeholder {
  color: #94a3b8;
  opacity: 0.85;
}

html, body {
  margin: 0;
  background: #ffffff !important;
  color: var(--muc);
  font: 15px/1.6 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 28px; font-weight: 750; margin: 0 0 8px; letter-spacing: -.01em; color: var(--muc); }
h2 { font-size: 17px; font-weight: 700; margin: 0; color: var(--muc); }
h3 { font-size: 14px; margin: 0 0 8px; text-transform: uppercase;
     letter-spacing: .07em; color: var(--muc-nhat); font-weight: 700; }
p  { margin: 0 0 14px; }
em { color: var(--muc-nhat); font-style: italic; }

.dan { color: var(--muc-nhat); font-size: 15px; font-weight: 500; max-width: 82ch; line-height: 1.65; }
.mo-nhat { color: var(--muc-mo); font-weight: 500; }

/* Màn hình SPA cơ bản */
/* ------------------------------------------------------------------- màn */
.man { display: none; background: #ffffff; }
.man.dang-mo { display: block; }

#man-kho, #man-xong, #man-tai-khoan, #man-dung, #man-kiem-duyet, #man-lich-content { 
  margin: 0 auto; 
  padding: 24px 32px 70px;
  background: #ffffff;
}
.gioi-thieu { margin-bottom: 26px; }
.gioi-thieu p { color: var(--muc-nhat); max-width: 60ch; }