:root{
  --bg:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --primary:#3b82f6;
  --primary-weak:#e8f0fe;
  --danger:#ef4444;
  --success:#16a34a;
  --card:#f9fafb;
  --border:#e5e7eb;
}

*{box-sizing:border-box}

.gv-alarm-wrap{
  max-width:880px;margin:28px auto;padding:0 16px;color:var(--text);
}

.gv-clock-now{
  font-size:76px; letter-spacing:4px; text-align:center;
  color:#9ca3af; margin:0 0 20px 0; line-height:1.1;
}

/* Card / grid */
.gv-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  margin:22px 0;
}
.gv-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gv-full{grid-column:1 / -1}
.gv-row{display:flex;gap:12px;align-items:center}
.gv-row.between{
  justify-content:space-between;
  gap:12px;
  margin-top:16px;   /* <-- dãn khỏi phần "Dữ liệu cài đặt..." */
}

.gv-field label{
  display:block;font-size:14px;margin-bottom:8px;color:#374151;font-weight:600;
}

.gv-select select,.gv-input{
  width:100%;border:1px solid var(--border);border-radius:12px;
  padding:12px 14px;background:#fff;color:var(--text);line-height:1.4;
}

.gv-quick{display:flex;flex-wrap:wrap;gap:10px}
.gv-chip{
  border:1px solid var(--border);background:#fff;border-radius:999px;
  padding:8px 14px;font-size:14px;cursor:pointer;line-height:1.2
}
.gv-chip:hover{background:#f3f4f6}

.gv-btn{
  border:none;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer
}
.gv-btn.primary{background:var(--primary);color:#fff}
.gv-btn.ghost{background:#fff;border:1px solid var(--border)}
.gv-btn.success{background:var(--success);color:#fff}
.gv-btn.danger{background:var(--danger);color:#fff}
.danger-text{color:var(--danger);border-color:var(--danger)}

.gv-muted{color:var(--muted);font-weight:400}

/* Active area */
.gv-active{text-align:center; margin-top:8px}
.gv-ring{display:flex;justify-content:center;margin:12px 0 8px}
.gv-ring-svg{width:320px;height:320px}
.gv-ring-svg .bg{fill:none;stroke:#e5effe;stroke-width:18}
.gv-ring-svg .fg{
  fill:none;stroke:#60a5fa;stroke-width:18;
  stroke-linecap:butt; /* bỏ dot đầu */
  transform:rotate(-90deg);transform-origin:50% 50%;
  stroke-dasharray:628;stroke-dashoffset:628
}
.gv-ring-svg .gv-label{font-size:16px;fill:#6b7280}
.gv-ring-svg .gv-time{font-size:46px;fill:#2563eb}

.gv-next{margin:10px 0 12px;color:#f59e0b;font-weight:600}
.gv-progress{
  height:10px;background:#eee;border-radius:999px;margin:10px auto 16px;
  max-width:420px
}
.gv-progress #gvProgressBar{
  height:100%;width:0;background:#60a5fa;border-radius:999px;transition:width .2s
}

/* Table */
.gv-table-head{font-weight:800;margin-bottom:10px}
.gv-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px;background:#fff}
.gv-table{width:100%;border-collapse:collapse}
.gv-table th,.gv-table td{
  padding:12px 14px;border-bottom:1px solid var(--border);
  text-align:left;font-size:14px;white-space:nowrap;line-height:1.4
}
.gv-table td:last-child{text-align:center}
.gv-table .del{cursor:pointer;color:var(--danger);font-weight:800}

@media (max-width:640px){
  .gv-grid{grid-template-columns:1fr}
  .gv-clock-now{font-size:56px;margin-bottom:16px}
}