* {
  box-sizing: border-box;
}

/* The hidden attribute always hides. Without this a class that sets display wins over the
   browser's own [hidden] rule: the change-password dialog opened with an empty red error box
   (.note sets its own display). */
[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  /* Left-aligned text breaks lines the usual way: a last word or two may sit alone (owner, Part 7
     m17e, 08/10/2026). Only centred text keeps one or two words from hanging alone: it sets
     `balance` on its own block (lines of near-equal length). */
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0;
}

button,
input,
textarea,
select {
  font: inherit;
}

input,
select,
textarea {
  color: var(--ink);
}

/* Set here, not left to the browser (Safari's default grey is about 2.3:1 on white, review V07). */
::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

/* On a Mac the arrow is the pointer for a control; the pointing hand means a link (HIG). */
button {
  border: 0;
  background: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Keyboard focus is always visible (audit R21); :focus-visible keeps it off mouse clicks. Fields
   have their own focus style (.input:focus). */
:where(a[href], button, [tabindex], summary, select):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

::selection {
  background: rgba(0, 122, 255, 0.18);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  transition: 0.18s ease;
}

.btn-primary {
  background: var(--blue-fill);
  color: #fff;
}

.btn-primary:hover {
  background: var(--blue-fill-deep);
}

.btn-ghost {
  border: 1.5px solid var(--line-strong);
  background: var(--paper-2);
  color: var(--blue);
}

.btn-clay {
  background: var(--blue-fill);
  color: #fff;
}

.btn-clay:hover {
  background: var(--blue-fill-deep);
}

/* A destructive action (HIG, Buttons): a red title on the secondary button's outline, never the
   filled, prominent button, which people press without reading. A confirming dialog uses it too,
   beside "Hủy". */
.btn-danger {
  border: 1.5px solid var(--line-strong);
  background: var(--paper-2);
  color: var(--bad);
}

.btn-danger:hover {
  border-color: var(--bad);
  background: rgba(255, 59, 48, 0.06);
}

.btn-sm {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 8px;
  font-size: 13px;
}

.btn-block {
  width: 100%;
}

/* Drawn as a link and goes somewhere, so it takes a link's pointing hand. */
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  color: var(--blue);
  font-size: 13.5px;
  font-weight: 600;
  background: none;
  cursor: pointer;
}

.link-btn:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .btn-ghost:hover {
    border-color: var(--blue);
    background: rgba(0, 122, 255, 0.05);
  }
}

.btn:disabled {
  cursor: default;
  opacity: 0.56;
}

.btn:disabled:hover {
  box-shadow: none;
  transform: none;
}

.field {
  display: grid;
  gap: 7px;
}

.field label,
.lbl,
.field-lbl {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 650;
}

/* Inside a field the grid gap spaces label and control; a <span> label for a group of buttons
   sits as close as a <label> does. */
.field label,
.field .field-lbl {
  margin-bottom: 0;
}

.field-hint {
  color: var(--ink-soft);
  font-size: 12px;
}

.input {
  width: 100%;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--ink);
  padding: 12px 13px;
  transition: 0.18s ease;
}

.input:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(0, 122, 255, 0.14);
}

/* Apple HIG: comfortable 44px touch targets on tablet/phone */
.check-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Choices of one kind (the grades) are equal columns, as many as fit: one that wraps to the next line
   keeps the others' width instead of stretching across (HIG, Layout). Empty columns fold away, so on
   a wide screen the choices still share the row. */
.check-row.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.75em, 1fr));
}

/* A choice is its column's width: a system font wider than SF takes from the padding instead. */
.check-row.check-grid > .check {
  min-width: 0;
  white-space: nowrap;
}

.check {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: max-content;
  min-height: 44px;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  transition: 0.15s ease;
}

.check input {
  display: none;
}

.check.is-on {
  border-color: var(--blue);
  background: rgba(0, 122, 255, 0.08);
  color: var(--blue-deep);
}

/* Where several options can be chosen at once (the grades, .is-multi), a chosen one also shows a check
   mark, so a set of choices reads as a set (HIG). A single choice (Cá nhân / Theo lớp) shows it by its
   fill, border and colour, as in the approved images (spec 01 §H5, owner 2026-10-06). Drawn with
   borders, so a screen reader reads nothing extra; aria-pressed already says it. */
.check-row.is-multi .check.is-on::before {
  content: "";
  flex: 0 0 auto;
  width: 0.3em;
  height: 0.62em;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-0.1em) rotate(45deg);
}

/* macOS density: a wide screen used with a mouse or trackpad. An iPad held sideways is as wide but
   is touched with a finger, so it keeps the touch sizes (HIG: 44×44px targets on touch screens). */
@media (min-width: 981px) and (pointer: fine) {
  body {
    font-size: 13.5px;
  }

  .btn {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 7px;
    font-size: 13.5px;
  }

  .btn-sm {
    min-height: 30px;
    padding: 0 11px;
    font-size: 12.5px;
  }

  .input {
    padding: 8px 11px;
    border-radius: 7px;
    font-size: 13.5px;
  }
}

@media (max-width: 980px), (pointer: coarse) {
  .btn,
  .input {
    min-height: 44px;
  }
}

/* Hit areas (HIG): at least 44×44px on a touch screen, 28×28px with a mouse or trackpad. Text
   buttons, links and icon buttons keep the size they are drawn at and get an invisible hit area
   of that size centred on them, so the layout does not move. */
:root {
  --hit: 28px;
}

@media (pointer: coarse) {
  :root {
    --hit: 44px;
  }

  /* Safari on iPhone zooms the page in when a field under 16px takes focus. */
  :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    font-size: 16px;
  }
}

:where(.link-btn, .row-link, .row-go, .sec-link, .mtop-add, .notification-text-button, .notification-del, .notification-trigger, .mtop-ava, .log-details summary, .login-policy a, .lp-foot a, .doc-foot a, .su-link) {
  position: relative;
}

:where(.link-btn, .row-link, .row-go, .sec-link, .mtop-add, .notification-text-button, .notification-del, .notification-trigger, .mtop-ava, .log-details summary, .login-policy a, .lp-foot a, .doc-foot a, .su-link)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: var(--hit);
  min-height: var(--hit);
  transform: translate(-50%, -50%);
}

@media (max-width: 720px) {
  body {
    font-size: 16px;
  }
}

@media (prefers-color-scheme: dark) and (hover: hover) {
  .btn-ghost:hover {
    background: rgba(10, 132, 255, 0.14);
  }

  .btn-danger:hover {
    background: rgba(255, 105, 97, 0.14);
  }
}