/* ============================================================
   08-parental.css — Cửa khóa & Cài đặt phụ huynh
   Dùng design system trong 08-parent-system.css.
   Chỉ chứa style ĐẶC THÙ của 2 màn này.
   ============================================================ */

/* ---- biểu tượng khóa ---- */
.p-lock-ico{width:60px;height:60px;border-radius:18px;background:var(--p-brand-soft);
  display:grid;place-items:center;margin:0 auto 14px}
.p-lock-ico svg{width:30px;height:30px}

/* ---- phép tính ---- */
.p-gate-q{font-weight:700;font-size:30px;color:var(--p-ink);margin-bottom:14px;letter-spacing:.02em}
.p-gate-err{color:var(--p-bad);font-weight:600;font-size:14px;min-height:20px;margin-bottom:2px}

/* ---- bộ chọn vị trí dock (4 nút icon) ---- */
.dock-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
@media(max-width:440px){.dock-pick{grid-template-columns:1fr 1fr}}
.dock-pick button{border:2px solid var(--p-line);background:var(--p-surface);cursor:pointer;
  font-family:inherit;font-weight:600;font-size:13px;color:var(--p-ink-2);
  border-radius:var(--p-radius-sm);padding:12px 6px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:border-color .15s, color .15s, background .15s}
.dock-pick button:active{transform:scale(.95)}
.dock-pick button.on{border-color:var(--p-brand);background:var(--p-brand-soft);color:var(--p-brand)}
/* icon minh hoạ layout */
.dp-ico{width:40px;height:30px;border-radius:6px;background:var(--p-line);position:relative;display:block}
.dp-ico::after{content:"";position:absolute;background:var(--p-brand);border-radius:3px}
.dp-trai::after{left:0;top:0;bottom:0;width:32%}
.dp-phai::after{right:0;top:0;bottom:0;width:32%}
.dp-duoi::after{left:0;right:0;bottom:0;height:34%}
.dp-tat{background:repeating-linear-gradient(45deg,var(--p-line),var(--p-line) 4px,var(--p-surface-2) 4px,var(--p-surface-2) 8px)}
.dp-tat::after{display:none}