Cân bằng của thanh AB

/* === HATEDUONE STYLE – PANEL TẠO n BÀI TOÁN (ORCHID) === */
:root {
–primary: #1a73e8;
–primary-hover: #155ab6;
–bg-light: #f4f7f9;
–card: #ffffff;
–text: #1f2937;
–muted: #6b7280;
–radius: 10px;
–shadow: 0 4px 12px rgba(0,0,0,0.08);
}

body {
background: var(–bg-light);
font-family: “Inter”, Roboto, Arial, sans-serif;
color: var(–text);
}

/* ===== CARD CHÍNH ===== */
.container {
max-width: 900px;
margin: 40px auto;
padding: 0 16px;
}

.card {
background: var(–card);
border-radius: var(–radius);
box-shadow: var(–shadow);
padding: 32px;
transition: all 0.3s ease;
}

.card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(26,115,232,0.15);
}

/* ===== HEADER ===== */
.header {
text-align: center;
margin-bottom: 28px;
}

.title {
font-size: 26px;
font-weight: 700;
color: var(–primary);
margin: 0 0 8px;
}

.subtitle {
font-size: 16px;
color: var(–muted);
}

/* ===== PANEL ===== */
.panel {
background: var(–bg-light);
border-radius: var(–radius);
padding: 20px;
margin-bottom: 20px;
border: 1px dashed var(–primary);
}

.controls {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}

label {
font-weight: 600;
color: var(–text);
}

.input {
width: 100px;
padding: 8px 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 15px;
}

/* ===== BUTTONS ===== */
.btn {
border: none;
cursor: pointer;
font-size: 15px;
padding: 10px 16px;
border-radius: 6px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
}

.btn-primary {
background: var(–primary);
color: #fff;
font-weight: 600;
}

.btn-primary:hover {
background: var(–primary-hover);
transform: translateY(-2px);
}

.btn-ghost {
background: transparent;
color: var(–primary);
font-weight: 600;
border: 1px solid var(–primary);
}

.btn-ghost:hover {
background: var(–primary);
color: #fff;
}

/* ===== KHU VỰC HIỂN THỊ BÀI ===== */
.problems {
background: #fff;
border-radius: var(–radius);
padding: 20px;
border: 1px solid #e0e7ff;
box-shadow: var(–shadow);
margin-top: 20px;
min-height: 120px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
.controls {
flex-direction: column;
align-items: stretch;
}

.input {
width: 100%;
}

.btn {
width: 100%;
justify-content: center;
}
}