/* page-sms — dựng theo client_sms-service.html của ceoacc (số đo từ getComputedStyle bản gốc).
Mọi luật gói trong #page-sms. */
#page-sms {
--sms-blue: #2869d5;
--sms-button: #2869d5;
--sms-line: #dce5f1;
--sms-text: #20334c;
--sms-muted: #5d6f89;
--sms-surface: #fff;
--sms-input: #fff;
--sms-soft: #eef4fe;
--sms-warning: #fff5de;
--sms-warning-text: #775609;
color: var(--sms-text);
}
html.cg-dark #page-sms {
--sms-blue: #92bdff;
--sms-line: #40516a;
--sms-text: #e6edf7;
--sms-muted: #b1c0d4;
--sms-surface: #192638;
--sms-input: #132031;
--sms-soft: #243751;
--sms-warning: #3c301b;
--sms-warning-text: #f8d994;
}
#page-sms [hidden] { display: none !important; }
/* ---------- Tiêu đề + số dư ---------- */
#page-sms .sms-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 10px 0 25px;
}
#page-sms h1 {
margin: 0 0 8px;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 27px;
font-weight: 750;
line-height: 1.2;
color: var(--sms-text);
}
#page-sms p { margin: 0; color: var(--sms-muted); line-height: 1.65; }
#page-sms .sms-balance { white-space: nowrap; text-align: right; }
#page-sms .sms-balance strong { display: block; color: var(--sms-blue); font-size: 23px; font-weight: 700; }
/* ---------- Tab gạch chân ---------- */
#page-sms .sms-tabs {
display: flex;
gap: 26px;
margin-bottom: 22px;
border-bottom: 1px solid var(--sms-line);
}
#page-sms .sms-tabs button {
min-height: 44px;
padding: 12px 2px;
border: 0;
border-bottom: 3px solid transparent;
background: none;
color: var(--sms-muted);
font: inherit;
font-weight: 650;
cursor: pointer;
}
#page-sms .sms-tabs button[aria-selected="true"] { color: var(--sms-blue); border-bottom-color: var(--sms-blue); }
#page-sms .sms-message {
margin: 0 0 18px;
padding: 13px 16px;
border-radius: 8px;
background: var(--sms-warning);
color: var(--sms-warning-text);
white-space: pre-wrap;
}
/* ---------- Bố cục 2 cột ---------- */
#page-sms .sms-layout {
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(270px, 1fr);
align-items: start;
gap: 22px;
}
#page-sms .sms-form,
#page-sms .sms-receiver {
min-width: 0;
padding: 24px;
border: 1px solid var(--sms-line);
border-radius: 14px;
background: var(--sms-surface);
color: var(--sms-text);
}
#page-sms label {
display: block;
margin-bottom: 8px;
color: var(--sms-muted);
font-size: 13px;
font-weight: 500;
}
#page-sms select,
#page-sms input {
display: inline-block;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 48px;
padding: 10px 12px;
border: 1px solid var(--sms-line);
border-radius: 8px;
background: var(--sms-input);
color: var(--sms-text);
font: inherit;
font-size: 16px;
}
#page-sms select option { background: var(--sms-input); color: var(--sms-text); }
#page-sms input::placeholder { color: var(--sms-muted); opacity: 1; }
#page-sms :is(input, select):focus {
outline: none;
border-color: #8bafe7;
box-shadow: 0 0 0 2px rgba(40, 105, 213, .08);
}
#page-sms .sms-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#page-sms .sms-fields > div { min-width: 0; }
#page-sms .sms-service-field { margin-top: 20px; }
#page-sms .sms-service-field input { margin-bottom: 10px; }
#page-sms #sms-search-status { margin: 0 0 10px; font-size: 12px; color: var(--sms-muted); }
#page-sms small { display: block; margin-top: 5px; color: var(--sms-muted); font-size: 80%; }
/* Kết quả tìm dịch vụ */
#page-sms .sms-search-results {
max-height: 280px;
overflow: auto;
margin: 10px 0;
border: 1px solid var(--sms-line);
border-radius: 8px;
}
#page-sms .sms-search-result {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 15px;
width: 100%;
min-height: 48px;
padding: 12px;
border: 0;
border-bottom: 1px solid var(--sms-line);
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
#page-sms .sms-search-result:last-child { border-bottom: 0; }
#page-sms .sms-search-result span { min-width: 0; overflow-wrap: anywhere; }
#page-sms .sms-search-result strong { white-space: nowrap; color: var(--sms-blue); }
#page-sms .sms-search-result:hover,
#page-sms .sms-search-result[aria-pressed="true"] { background: var(--sms-soft); }
/* Tổng tiền + kho */
#page-sms .sms-details {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 8px;
padding: 20px 0;
border-bottom: 1px solid var(--sms-line);
}
#page-sms .sms-price { color: var(--sms-blue); font-size: 26px; font-weight: 750; }
#page-sms #sms-stock { text-align: right; font-size: 14px; }
#page-sms .sms-help { margin-top: 14px; font-size: 13px; line-height: 1.7; }
/* Nút */
#page-sms .sms-primary,
#page-sms .sms-secondary {
min-height: 44px;
padding: 10px 17px;
border: 1px solid var(--sms-line);
border-radius: 8px;
background: var(--sms-input);
color: var(--sms-blue);
font: inherit;
font-weight: 650;
cursor: pointer;
}
#page-sms .sms-primary { background: var(--sms-button); border-color: var(--sms-button); color: #fff; }
#page-sms button:disabled { opacity: .55; cursor: not-allowed; }
#page-sms .sms-submit { width: 100%; margin-top: 20px; }
/* Ô nhận SMS */
#page-sms h2 {
margin: 0 0 18px;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
color: var(--sms-text);
}
#page-sms .sms-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 260px;
padding: 35px 16px;
text-align: center;
}
#page-sms .sms-empty .sms-help { margin-top: 0; }
#page-sms .sms-empty-icon {
display: flex;
flex: none;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
margin: 0 0 4px;
border-radius: 50%;
background: var(--sms-soft);
color: var(--sms-blue);
}
#page-sms .sms-empty-icon svg { display: block; }
#page-sms .sms-number {
margin: 12px 0;
font-size: 25px;
font-weight: 700;
letter-spacing: .5px;
word-break: break-all;
font-variant-numeric: tabular-nums;
}
#page-sms .sms-text {
min-height: 90px;
margin: 15px 0;
padding: 16px;
border: 1px solid var(--sms-line);
border-radius: 9px;
background: var(--sms-soft);
color: var(--sms-text);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
#page-sms .sms-code { color: var(--sms-blue); font-weight: 700; letter-spacing: 1px; }
/* ---------- Tab "Số của tôi" ---------- */
#page-sms .sms-table-wrap {
overflow: auto;
padding: 5px 18px;
border: 1px solid var(--sms-line);
border-radius: 12px;
background: var(--sms-surface);
}
#page-sms .sms-table { width: 100%; min-width: 730px; border-collapse: collapse; }
#page-sms .sms-table th,
#page-sms .sms-table td { padding: 15px 10px; border-bottom: 1px solid var(--sms-line); text-align: left; }
#page-sms .sms-table th { font-size: 12px; font-weight: 700; color: var(--sms-muted); }
#page-sms .sms-table td { font-size: 13px; }
#page-sms .sms-table td:first-child { max-width: 260px; overflow-wrap: anywhere; }
#page-sms .sms-state { display: inline-block; padding: 4px 9px; border-radius: 6px; background: var(--sms-soft); white-space: nowrap; }
#page-sms .sms-order-actions { min-width: 104px; }
#page-sms .sms-order-action-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
#page-sms .sms-order-action-buttons button { white-space: nowrap; }
#page-sms .sms-pager { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 16px; }
/* ---------- Hộp xác nhận ---------- */
#page-sms .sms-dialog {
width: calc(100% - 32px);
max-width: 450px;
max-height: calc(100dvh - 32px);
margin: auto;
padding: 27px;
overflow: auto;
border: 1px solid var(--sms-line);
border-radius: 16px;
background: var(--sms-surface);
color: var(--sms-text);
box-shadow: 0 18px 60px #1234;
}
#page-sms .sms-dialog::backdrop { background: rgba(18, 35, 63, .35); }
#page-sms .sms-dialog h2 { font-size: 21px; }
#page-sms .sms-dialog p { line-height: 1.7; overflow-wrap: anywhere; }
#page-sms .sms-dialog-price { margin: 18px 0; color: var(--sms-blue); font-size: 30px; font-weight: 750; }
#page-sms .sms-dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
/* ---------- Hộp xem API của từng số ---------- */
#page-sms .sms-api-dialog { max-width: 720px; padding: 24px; }
#page-sms .sms-api-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
#page-sms .sms-api-heading h2 { margin: 0; }
#page-sms .sms-api-close { padding: 6px 12px; font-size: 22px; line-height: 1; }
#page-sms .sms-api-meta { margin-bottom: 16px; overflow-wrap: anywhere; }
#page-sms .sms-api-text {
display: block;
width: 100%;
min-height: 132px;
margin: 12px 0 0;
padding: 13px;
border: 1px solid var(--sms-line);
border-radius: 8px;
background: var(--sms-input);
color: var(--sms-text);
font: 14px/1.7 monospace;
resize: vertical;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
#page-sms .sms-api-text:focus { outline: none; border-color: #8bafe7; box-shadow: 0 0 0 2px rgba(40, 105, 213, .08); }
#page-sms .sms-api-status { min-height: 24px; margin-top: 12px; font-size: 13px; }
/* ---------- Khổ nhỏ (theo media query của bản gốc) ---------- */
@media (max-width: 1100px) {
#page-sms .sms-layout { grid-template-columns: minmax(0, 1.3fr) minmax(250px, 1fr); }
}
@media (max-width: 900px) {
#page-sms .sms-layout { grid-template-columns: minmax(0, 1fr); }
#page-sms .sms-heading { align-items: flex-start; }
#page-sms .sms-form, #page-sms .sms-receiver { padding: 18px; }
#page-sms .sms-empty { min-height: 210px; padding: 24px 12px; }
#page-sms .sms-table-wrap { padding: 0; background: transparent; border: 0; overflow: visible; }
#page-sms .sms-table { display: block; min-width: 0; }
#page-sms .sms-table thead { display: none; }
#page-sms .sms-table tbody { display: grid; gap: 14px; }
#page-sms .sms-table tr { display: block; padding: 16px; border: 1px solid var(--sms-line); border-radius: 12px; background: var(--sms-surface); }
#page-sms .sms-table td { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border: 0; overflow-wrap: anywhere; }
#page-sms .sms-table td[data-label]::before { content: attr(data-label); flex-shrink: 0; color: var(--sms-muted); }
#page-sms .sms-table td span { min-width: 0; text-align: right; }
#page-sms .sms-table td.sms-order-name { display: block; max-width: none; padding: 0 0 12px; margin-bottom: 6px; border-bottom: 1px solid var(--sms-line); font-size: 15px; font-weight: 600; }
#page-sms .sms-table td.sms-order-name::before { content: none; }
#page-sms .sms-order-name small { font-size: 12px; font-weight: 400; }
#page-sms .sms-table td.sms-order-actions { padding: 12px 0 0; }
#page-sms .sms-order-actions button { width: 100%; }
#page-sms .sms-order-action-buttons { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#page-sms .sms-pager { justify-content: space-between; gap: 8px; }
}
@media (max-width: 520px) {
/* ceoacc: riêng .sms-page .container-fluid lề 12px (khung chung .content lề 15px) */
#page-sms { margin: 0 -3px; }
#page-sms .sms-heading { flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
#page-sms .sms-heading > div:first-child { width: 100%; }
#page-sms h1 { font-size: 23px; }
#page-sms .sms-balance { display: flex; align-items: center; gap: 12px; text-align: left; font-size: 12px; }
#page-sms .sms-balance strong { font-size: 20px; }
#page-sms .sms-fields { grid-template-columns: 1fr; gap: 16px; }
#page-sms .sms-form, #page-sms .sms-receiver { padding: 17px 15px; border-radius: 12px; }
#page-sms .sms-tabs { gap: 24px; margin-bottom: 16px; }
#page-sms .sms-dialog { padding: 21px; }
#page-sms .sms-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
#page-sms .sms-primary, #page-sms .sms-secondary { padding: 10px 13px; }
#page-sms .sms-search-result { gap: 10px; }
#page-sms .sms-search-results { max-height: 245px; }
#page-sms .sms-api-dialog { padding: 18px; }
#page-sms .sms-api-close { padding: 6px 12px; }
#page-sms .sms-api-text { font-size: 16px; min-height: 160px; }
}