/* my.digiz.vn — DIGIZ client portal */
:root {
	--pink: #ff5794;
	--coral: #f87263;
	--ink: #2b3445;
	--ink-2: #4a5468;
	--muted: #7a8191;
	--line: #eef0f4;
	--line-2: #e3e6ec;
	--bg: #fbf8f9;
	--surface: #fff;
	--soft: #fff3f6;
	--grad: linear-gradient(120deg, #ff5794 0%, #f87263 100%);
	--shadow-sm: 0 1px 2px rgba(43, 52, 69, .05);
	--shadow: 0 14px 34px -18px rgba(43, 52, 69, .22), 0 2px 6px rgba(43, 52, 69, .04);
	--shadow-pink: 0 14px 30px -12px rgba(255, 87, 148, .5);
	--r: 18px;
	--r-sm: 12px;
	--head: "Montserrat", system-ui, sans-serif;
	--font: "Be Vietnam Pro", system-ui, sans-serif;
	--ease: cubic-bezier(.22, 1, .36, 1);
	--green: #18a067; --green-bg: #e7f7ef;
	--orange: #e2711d; --orange-bg: #fff2e6;
	--red: #e0345f; --red-bg: #ffe9ef;
	--blue: #3b6ef5; --blue-bg: #ebf1ff;
	--gray: #6b7486; --gray-bg: #f1f2f5;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.6 var(--font); color: var(--ink-2); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--head); color: var(--ink); letter-spacing: -.02em; line-height: 1.25; }
p { margin: 0; }
.i { flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
::selection { background: var(--pink); color: #fff; }

/* ---------- Sidebar ---------- */
.sb { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 264px; display: flex; flex-direction: column; padding: 22px 16px; background: #fff; border-right: 1px solid var(--line); overflow-y: auto; }
.sb__logo { display: block; padding: 4px 10px 18px; }
.sb__logo img { height: 40px; width: auto; }
.sb__tag { align-self: flex-start; margin: -8px 10px 14px; padding: 3px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sb__nav { display: grid; gap: 4px; }
.sb__nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; font-weight: 500; color: var(--ink-2); transition: background-color .2s, color .2s; }
.sb__nav a:hover { background: var(--soft); color: var(--pink); }
.sb__nav a.is-active { background: var(--grad); color: #fff; box-shadow: var(--shadow-pink); }
.sb__count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--pink); color: #fff; font: 700 11px/18px var(--font); font-style: normal; text-align: center; }
.sb__nav a.is-active .sb__count { background: #fff; color: var(--pink); }
.sb__foot { margin-top: auto; padding-top: 20px; display: grid; gap: 12px; }
.sb__switch { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1.5px dashed var(--line-2); font-weight: 600; font-size: 14px; color: var(--ink); }
.sb__switch:hover { border-color: var(--pink); color: var(--pink); }
.sb__help { display: grid; gap: 2px; padding: 16px; border-radius: 14px; background: var(--soft); font-size: 13px; }
.sb__help strong { color: var(--ink); font-size: 14px; }
.sb__help a { color: var(--pink); font-weight: 600; }
.sb-backdrop { display: none; }

/* ---------- Top bar ---------- */
.main { margin-left: 264px; min-height: 100vh; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; height: 72px; padding: 0 clamp(20px, 3vw, 48px); background: rgba(251, 248, 249, .85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top__burger { display: none; width: 42px; height: 42px; border: 0; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); cursor: pointer; align-items: center; justify-content: center; }
.top__title { font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.top__bell { border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; -webkit-appearance: none; appearance: none; position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); }
.top__bell { transition: color .2s, box-shadow .2s, background .2s; }
.top__bell:hover { color: var(--pink); box-shadow: 0 0 0 1px rgba(255, 87, 148, .45), 0 4px 14px rgba(255, 87, 148, .14); }
.top__bell:focus { outline: none; }
.top__bell:focus-visible { outline: 0; box-shadow: 0 0 0 1px var(--pink), 0 0 0 4px rgba(255, 87, 148, .16); }
.top__bell i { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--pink); color: #fff; font: 700 11px/20px var(--font); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.top__user { position: relative; }
.top__user summary { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; list-style: none; }
.top__user summary::-webkit-details-marker { display: none; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #fff; font: 700 15px var(--head); flex-shrink: 0; }
.top__name { display: grid; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25; max-width: 180px; }
.top__name small { font-size: 12px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; font: 500 14px var(--font); color: var(--ink-2); text-align: left; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--soft); color: var(--pink); }
.content { flex: 1; width: 100%; max-width: 1640px; margin: 0 auto; padding: 28px clamp(20px, 3vw, 48px) 60px; }

/* ---------- Generic ---------- */
.grid { display: grid; gap: 20px; }
/* Phần tử con của lưới được co theo cột (mặc định min-width:auto khiến bảng rộng đẩy tràn sang cột bên cạnh) */
.grid > *, .stack > *, .form > *, .form__row > *, .field > *, fieldset > *, .list > * { min-width: 0; }
.items, .table-wrap { max-width: 100%; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--side { grid-template-columns: minmax(0, 1fr) clamp(340px, 30%, 460px); align-items: start; }
/* Danh sách (cột hẹp) + form sửa (cột rộng) */
.grid--list { grid-template-columns: clamp(300px, 30%, 420px) minmax(0, 1fr); align-items: start; }
.stack { display: grid; gap: 20px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.mt { margin-top: 20px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.strong { font-weight: 600; color: var(--ink); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.text-pink { color: var(--pink); }

.card { position: relative; padding: 24px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.card--flush { padding: 0; overflow: hidden; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card--flush .card__head { margin: 0; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.card__title { font-size: 17px; font-weight: 700; }
.card__sub { margin-top: 2px; font-size: 13px; color: var(--muted); }
.card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--pink); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h2 { font-size: 24px; font-weight: 800; }
.page-head p { margin-top: 4px; color: var(--muted); }

/* Hero chào mừng */
.welcome { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px 32px; border-radius: 22px; background: var(--grad); color: #fff; box-shadow: var(--shadow-pink); }
.welcome::before, .welcome::after { content: ""; position: absolute; border-radius: 50%; border: 36px solid rgba(255, 255, 255, .1); }
.welcome::before { width: 300px; height: 300px; right: -80px; top: -150px; }
.welcome::after { width: 180px; height: 180px; right: 22%; bottom: -120px; border-width: 24px; }
.welcome h2 { color: #fff; font-size: 24px; }
.welcome p { margin-top: 6px; opacity: .92; max-width: 560px; }
.welcome .btn { position: relative; z-index: 1; }

/* KPI */
.kpi { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
a.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.kpi__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: var(--soft); color: var(--pink); flex-shrink: 0; }
.kpi__icon--green { background: var(--green-bg); color: var(--green); }
.kpi__icon--orange { background: var(--orange-bg); color: var(--orange); }
.kpi__icon--pink { background: color-mix(in srgb, var(--pink) 12%, transparent); color: var(--pink); }
.kpi__icon--blue { background: var(--blue-bg); color: var(--blue); }
.kpi b { display: block; font: 800 26px/1.1 var(--head); color: var(--ink); letter-spacing: -.03em; }
.kpi span { font-size: 13px; color: var(--muted); }

/* Badge */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--green { background: var(--green-bg); color: var(--green); }
.badge--orange { background: var(--orange-bg); color: var(--orange); }
.badge--red { background: var(--red-bg); color: var(--red); }
.badge--blue { background: var(--blue-bg); color: var(--blue); }
.badge--gray { background: var(--gray-bg); color: var(--gray); }
.badge--pink { background: var(--soft); color: var(--pink); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px; background: var(--gray-bg); font-size: 12px; font-weight: 600; color: var(--ink-2); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; font: 600 14px var(--font); cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s, background-color .2s, color .2s; text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--grad); color: #fff; box-shadow: var(--shadow-pink); }
.btn--primary:hover { box-shadow: 0 18px 34px -12px rgba(255, 87, 148, .65); transform: translateY(-1px); }
.btn--white { background: #fff; color: var(--pink); }
.btn--ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn--ghost:hover { color: var(--pink); box-shadow: inset 0 0 0 1.5px rgba(255, 87, 148, .45); }
.btn--danger { background: var(--red-bg); color: var(--red); }
.btn--danger:hover { background: var(--red); color: #fff; }
.btn--success { background: var(--green); color: #fff; }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Alerts */
.alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; padding: 14px 16px; border-radius: 14px; font-size: 14px; font-weight: 500; }
.alert .i { margin-top: 1px; }
.alert--success { background: var(--green-bg); color: #137a50; }
.alert--error { background: var(--red-bg); color: #b4234a; }
.alert--info { background: var(--blue-bg); color: #2e57c4; }
.alert--warning { background: var(--orange-bg); color: #b0560f; }

/* Tables */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { padding: 12px 16px; background: #fcfafb; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: left; white-space: nowrap; }
.table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color .15s; }
.table tbody tr:hover { background: #fffafb; }
.table .title { font-weight: 600; color: var(--ink); }
.table .title a:hover { color: var(--pink); }
.table .sub { display: block; font-size: 12px; color: var(--muted); }

/* Forms */
.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: grid; gap: 6px; align-content: start; }
.field label, .label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field small { font-size: 12px; color: var(--muted); }
.input, select.input, textarea.input { width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; font: 500 14px var(--font); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
textarea.input { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
select.input { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8191' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 36px; }
.input:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255, 87, 148, .12); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pink); }
.form__actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg label { cursor: pointer; display: grid; }
.seg span { height: 100%; align-content: start; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: grid; gap: 2px; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line-2); font-size: 13px; font-weight: 600; color: var(--ink); transition: all .2s; }
.seg span small { font-weight: 400; color: var(--muted); }
.seg input:checked + span { border-color: var(--pink); background: var(--soft); color: var(--pink); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.filters .input { height: 40px; width: auto; min-width: 180px; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs a { white-space: nowrap; padding: 8px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--muted); }
.tabs a.is-active { background: var(--soft); color: var(--pink); }

/* Lists */
.list { display: grid; }
.list__item { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.list__item:last-child { border-bottom: 0; }
a.list__item:hover { background: #fffafb; }
.list__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--soft); color: var(--pink); flex-shrink: 0; }
.list__body { flex: 1; min-width: 0; }
.list__body b { display: block; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list__body span { font-size: 13px; color: var(--muted); }

.dl { display: grid; grid-template-columns: 150px 1fr; gap: 12px 16px; font-size: 14px; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; font-weight: 600; color: var(--ink); word-break: break-word; }

/* Empty */
.empty { text-align: center; padding: 48px 24px; }
.empty__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 20px; background: var(--soft); color: var(--pink); }
.empty h2, .empty h3 { font-size: 18px; }
.empty p { margin: 8px auto 20px; max-width: 420px; color: var(--muted); }

/* Meter (dung lượng) */
.meter { display: grid; gap: 8px; }
.meter__top { display: flex; justify-content: space-between; font-size: 13px; }
.meter__top b { color: var(--ink); }
.meter__bar { height: 10px; border-radius: 999px; background: var(--gray-bg); overflow: hidden; }
.meter__bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); width: var(--v); animation: grow 1s var(--ease); }
.meter--warn .meter__bar i { background: linear-gradient(90deg, #f7a23b, #e2711d); }
.meter--danger .meter__bar i { background: linear-gradient(90deg, #ff6b8b, #e0345f); }
@keyframes grow { from { width: 0; } }

/* Project stepper */
.stepper { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 0; counter-reset: s; }
.step { position: relative; display: grid; justify-items: center; gap: 10px; padding: 0 6px; text-align: center; }
.step::before { content: ""; position: absolute; top: 21px; left: -50%; width: 100%; height: 3px; background: var(--line-2); z-index: 0; }
.step:first-child::before { display: none; }
.step.is-done::before, .step.is-current::before { background: var(--grad); }
.step__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--line-2); font: 700 15px var(--head); color: var(--muted); transition: all .3s; }
.step.is-done .step__dot { background: var(--grad); color: #fff; box-shadow: none; }
.step.is-current .step__dot { background: #fff; color: var(--pink); box-shadow: 0 0 0 3px var(--pink), 0 0 0 9px rgba(255, 87, 148, .14); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px var(--pink), 0 0 0 13px rgba(255, 87, 148, .06); } }
.step b { font-size: 14px; color: var(--ink); }
.step small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.mini-steps { display: flex; gap: 4px; }
.mini-steps i { width: 22px; height: 6px; border-radius: 4px; background: var(--line-2); }
.mini-steps i.on { background: var(--grad); }

/* Timeline */
.tl { display: grid; gap: 0; }
.tl__item { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding-bottom: 22px; }
.tl__item::before { content: ""; position: absolute; left: 19px; top: 42px; bottom: 0; width: 2px; background: var(--line); }
.tl__item:last-child::before { display: none; }
.tl__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--soft); color: var(--pink); }
.tl__icon--client { background: var(--blue-bg); color: var(--blue); }
.tl__icon--ok { background: var(--green-bg); color: var(--green); }
.tl__icon--warn { background: var(--orange-bg); color: var(--orange); }
.tl__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.tl__meta b { color: var(--ink); }
.tl__msg { margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: #fcfafb; box-shadow: 0 0 0 1px var(--line); font-size: 14px; white-space: pre-line; }
.tl__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--pink); }

/* Acceptance box */
.accept { padding: 22px; border-radius: var(--r); background: linear-gradient(135deg, #fff4ec, #fff0f5); box-shadow: 0 0 0 1.5px rgba(255, 87, 148, .25); }
.accept h3 { font-size: 17px; }

/* Invoice */
.inv { padding: 36px; }
.inv__head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px dashed var(--line-2); }
.inv__head img { height: 40px; width: auto; }
.inv__code { text-align: right; }
.inv__code b { display: block; font: 800 22px var(--head); color: var(--ink); }
.inv__total { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding: 18px 20px; border-radius: 14px; background: var(--soft); }
.inv__total b { font: 800 26px var(--head); color: var(--pink); }
.pay-box { padding: 24px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.pay-box__amount { font: 800 30px var(--head); color: var(--ink); letter-spacing: -.03em; }
.pay-methods { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.pay-methods span { padding: 4px 9px; border-radius: 8px; background: var(--gray-bg); font-size: 11px; font-weight: 700; color: var(--ink-2); }

/* Notifications */
.notif { display: flex; gap: 14px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.notif:last-child { border-bottom: 0; }
.notif.is-unread { background: #fff8fa; }
.notif.is-unread .notif__title::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--pink); vertical-align: middle; }
.notif__title { font-weight: 600; color: var(--ink); }
.notif__msg { font-size: 14px; color: var(--ink-2); }
.notif__time { font-size: 12px; color: var(--muted); }

/* Service card */
.svc { display: grid; gap: 14px; padding: 22px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
.svc:hover { transform: translateY(-3px); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.svc__top { display: flex; align-items: flex-start; gap: 14px; }
.svc > *, .svc__top > * { min-width: 0; }
.svc__top .badge, .svc__foot .badge { flex-shrink: 0; white-space: nowrap; }
.svc__top h3 { overflow-wrap: break-word; }
.svc__badge { margin-top: 8px; }
.svc .row--between { flex-wrap: wrap; gap: 4px 12px; }
.svc__top h3 { font-size: 16px; }
.svc__top .muted { font-size: 13px; }
.svc__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }

/* Auth */
.auth { background: #fff; }
.auth__wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth__side { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 56px clamp(32px, 6vw, 88px); background: radial-gradient(70% 60% at 100% 0%, #ffd3e2 0%, transparent 60%), radial-gradient(60% 60% at 0% 100%, #ffe0d3 0%, transparent 60%), var(--bg); }
.auth__side img { height: 48px; width: auto; }
.auth__side h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1.15; max-width: 480px; }
.auth__side h2 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth__side ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; max-width: 440px; }
.auth__side li { display: flex; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .75); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), var(--shadow-sm); }
.auth__side li .i { color: var(--pink); margin-top: 2px; }
.auth__side li b { display: block; color: var(--ink); }
.auth__side li span { font-size: 13px; color: var(--muted); }
.auth__blob { position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%; border: 50px solid rgba(255, 87, 148, .08); }
.auth__main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; }
.auth__card { width: 100%; max-width: 420px; }
.auth__card h1 { font-size: 28px; font-weight: 800; }
.auth__card .lead { margin: 8px 0 26px; color: var(--muted); }
.auth__links { display: flex; justify-content: space-between; font-size: 14px; }
.auth__links a, .link { color: var(--pink); font-weight: 600; }
.auth__foot { margin-top: 32px; font-size: 13px; color: var(--muted); }
.auth__foot a:hover { color: var(--pink); }
.pw { position: relative; }
.pw button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); font: 600 12px var(--font); cursor: pointer; padding: 6px 8px; }

/* Ticket */
.thread { display: grid; gap: 16px; }
.msg { padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.msg--staff { background: linear-gradient(135deg, #fff6f9, #fff9f6); box-shadow: 0 0 0 1px rgba(255, 87, 148, .18); }
.msg--client { margin-right: 10%; }
.msg--staff { margin-left: 10%; }
.msg--note { background: #fffaf0; box-shadow: 0 0 0 1.5px dashed #f6c98f; }
.msg__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font-size: 14px; color: var(--ink); }
.msg__head .muted { margin-left: auto; }
.msg__body { font-size: 15px; line-height: 1.7; word-break: break-word; }
.msg__files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.msg__img img { width: 140px; height: 100px; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); transition: transform .25s var(--ease); }
.msg__img:hover img { transform: scale(1.03); }
.avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.file-pick { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1.5px dashed var(--line-2); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.file-pick:hover { border-color: var(--pink); color: var(--pink); }
.file-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-list { display: flex; flex-wrap: wrap; gap: 6px; }
.file-list:empty { display: none; }
.stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.stars input { position: absolute; opacity: 0; }
.stars label { font-size: 28px; line-height: 1; color: var(--line-2); cursor: pointer; transition: color .15s, transform .15s; }
.stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label { color: #ffb020; }
.stars label:hover { transform: scale(1.15); }
.dz-tips { display: grid; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; }
.dz-tips li { display: grid; gap: 4px; }

/* 2FA */
.twofa { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
.twofa__qr { padding: 12px; border-radius: 16px; background: #fff; box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.twofa__qr svg { display: block; }
.twofa__steps { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 10px; font-size: 14px; }
.twofa__key { display: inline-block; margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: var(--gray-bg); font: 600 14px ui-monospace, Menlo, monospace; letter-spacing: .06em; }
.codes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.codes code { padding: 8px; border-radius: 8px; background: #fff; text-align: center; font: 600 14px ui-monospace, Menlo, monospace; box-shadow: 0 0 0 1px var(--line); }
.otp { font: 700 20px ui-monospace, Menlo, monospace; letter-spacing: .3em; text-align: center; }
.captcha { display: flex; justify-content: center; min-height: 78px; }

/* Picker (tìm khách hàng) */
.picker { position: relative; }
.picker__input { padding-left: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a8191' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center; }
.picker__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); max-height: 300px; overflow-y: auto; padding: 6px; border-radius: 14px; background: #fff; box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.picker__opt { display: grid; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.picker__opt b { font-weight: 600; color: var(--ink); font-size: 14px; }
.picker__opt small { font-size: 12px; color: var(--muted); }
.picker__opt.is-active, .picker__opt:hover { background: var(--soft); }
.picker__opt.is-active b { color: var(--pink); }
.picker__empty { padding: 12px; color: var(--muted); font-size: 14px; }

/* Gói & hạng mục */
.pkg-pick { padding: 14px 16px; border-radius: 14px; background: var(--soft); box-shadow: inset 0 0 0 1px rgba(255, 87, 148, .18); transition: box-shadow .4s; }
.pkg-pick label { display: flex; align-items: center; gap: 6px; color: var(--pink); }
.pkg-pick.is-applied { box-shadow: inset 0 0 0 2px var(--pink), 0 0 0 6px rgba(255, 87, 148, .12); }
.items__table td { vertical-align: top; padding: 8px 6px; }
.items__table .input { height: 38px; padding: 0 10px; font-size: 13px; }
.items__table textarea.input { height: auto; min-height: 54px; margin-top: 6px; padding: 8px 10px; }
.items__table td[data-line] { padding-top: 18px; }
.items__table tfoot td { background: #fcfafb; }

/* Hồ sơ (khổ A4) */
.doc-paper { padding: 28px; border-radius: var(--r); background: #eef0f4; overflow-x: auto; }
.doc { width: 210mm; max-width: 100%; min-height: 297mm; margin: 0 auto; padding: 20mm 18mm; background: #fff; box-shadow: 0 10px 30px rgba(43, 52, 69, .12); font: 13.5px/1.6 "Times New Roman", Times, serif; color: #111; }
.doc[contenteditable="true"] { outline: none; box-shadow: 0 10px 30px rgba(43, 52, 69, .12), 0 0 0 2px rgba(255, 87, 148, .25); }
.doc[contenteditable="true"]:focus { box-shadow: 0 10px 30px rgba(43, 52, 69, .12), 0 0 0 2px var(--pink); }
.doc h1 { margin: 14px 0 6px; font: 700 20px/1.35 "Times New Roman", serif; text-align: center; color: #111; letter-spacing: 0; }
.doc h2 { margin: 16px 0 6px; font: 700 14px "Times New Roman", serif; color: #111; letter-spacing: 0; }
.doc h3 { margin: 12px 0 4px; font: 700 13.5px "Times New Roman", serif; color: #111; letter-spacing: 0; }
.doc p { margin: 0 0 8px; text-align: justify; }
.doc ul, .doc ol { margin: 0 0 8px; padding-left: 22px; }
.doc li { margin-bottom: 4px; text-align: justify; }
.doc .c { text-align: center; }
.doc .r { text-align: right; }
.doc-head { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.doc-head td { vertical-align: top; width: 50%; font-size: 13px; }
.doc-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 12.5px; }
.doc-table th, .doc-table td { border: 1px solid #333; padding: 5px 6px; vertical-align: top; }
.doc-table th { background: #f2f2f2; text-align: center; }
.doc-detail { margin-top: 4px; font-size: 12px; white-space: normal; }
.doc-sign { width: 100%; margin-top: 26px; text-align: center; }
.doc-sign td { width: 50%; vertical-align: top; }
.doc-sign__space { height: 90px; }
.doc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.doc-flow { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.doc-flow li.done { color: var(--green); }
.doc-flow li.done::marker { content: "✓  "; }
.doc-flow li.now { color: var(--ink); font-weight: 600; }
.doc-new { padding: 14px 24px 20px; border-top: 1px solid var(--line); }
.doc-new summary { list-style: none; cursor: pointer; }
.doc-new summary::-webkit-details-marker { display: none; }
.doc-new[open] summary { margin-bottom: 14px; }
.var-list { display: flex; flex-wrap: wrap; gap: 6px; }
.var-list .chip { border: 0; cursor: pointer; font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.var-list .chip:hover { background: var(--soft); color: var(--pink); }
.pdf-frame { display: block; width: 100%; height: 80vh; border: 0; background: #eef0f4; }
@media print {
	@page { size: A4; margin: 0; }
	body { background: #fff; }
	.sb, .top, .sb-backdrop, .no-print, .alert, .page-head { display: none !important; }
	.main { margin: 0; }
	.content { padding: 0; max-width: none; }
	.doc-paper { padding: 0; background: none; }
	.doc { box-shadow: none !important; width: auto; min-height: 0; }
}

/* Phân quyền */
.perm-table td.c, .perm-table th.c { text-align: center; }
.perm-group td { background: #fcfafb; font-weight: 700; color: var(--ink); font-size: 13px; letter-spacing: .02em; }
.perm-check { width: 18px; height: 18px; accent-color: var(--pink); cursor: pointer; }

/* Tạm khoá / mở tạm */
.lock-box { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--red-bg); color: #b4234a; }
.lock-box b { display: flex; align-items: center; gap: 6px; }
.lock-box--temp { background: var(--orange-bg); color: #b0560f; }
.lock-banner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: var(--r); background: linear-gradient(135deg, #ffe9ef, #fff4ec); box-shadow: 0 0 0 1.5px rgba(224, 52, 95, .25); margin-bottom: 20px; }
.lock-banner--temp { background: linear-gradient(135deg, #fff4e6, #fffaf0); box-shadow: 0 0 0 1.5px rgba(226, 113, 29, .3); }
.lock-banner__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--red); flex-shrink: 0; }
.lock-banner--temp .lock-banner__icon { color: var(--orange); }
.lock-banner__body { flex: 1; min-width: 220px; }
.lock-banner__body b { display: block; font: 700 16px var(--head); color: var(--ink); }
.lock-banner__body span { font-size: 14px; color: var(--ink-2); }
.countdown { font: 700 15px ui-monospace, Menlo, monospace; color: var(--orange); }

/* Chọn phiên bản PHP của máy chủ */
.php-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.php-pick label { cursor: pointer; }
.php-pick input { position: absolute; opacity: 0; }
.php-pick span { display: inline-block; min-width: 46px; padding: 7px 10px; border-radius: 10px; text-align: center; font: 600 13px var(--font); background: var(--gray-bg); color: var(--muted); box-shadow: inset 0 0 0 1.5px transparent; transition: all .2s; }
.php-pick input:checked + span { background: var(--soft); color: var(--pink); box-shadow: inset 0 0 0 1.5px var(--pink); }
.php-pick input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }

/* Thanh tiến trình chuyển trang & tải file */
.navbar-progress { position: fixed; top: 0; left: 0; z-index: 9999; height: 3px; width: 0; background: var(--grad); box-shadow: 0 0 10px rgba(255, 87, 148, .5); transition: width .3s ease, opacity .4s; pointer-events: none; }
.upbar { display: grid; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.upbar__track { height: 8px; border-radius: 99px; background: var(--gray-bg); overflow: hidden; }
.upbar__track i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width .2s; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line-2); border-top-color: var(--pink); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.pay-wait { margin-top: 12px; font-size: 13px; color: var(--muted); }
.copy { display: flex; gap: 8px; }
.copy .input { flex: 1; min-width: 0; height: 36px; font-size: 12px; }

/* Trang thanh toán bằng link */
.paylink .auth__head { text-align: center; }
.paylink__ok { width: 64px; height: 64px; margin: 14px auto 6px; display: grid; place-items: center; border-radius: 50%; background: #e7f8ef; color: #1f9d5c; }
.paylink__box { display: grid; gap: 12px; margin: 18px 0; padding: 18px; border-radius: 16px; background: var(--gray-bg); }
.paylink__box .row { align-items: flex-start; gap: 16px; }
.paylink__amount { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.paylink__amount b { font: 800 24px var(--head); color: var(--pink); }
.paylink__bank { margin-top: 14px; font-size: 14px; }
.paylink__bank summary { cursor: pointer; font-weight: 600; }

/* Chọn nhu cầu khi đăng ký dịch vụ */
.topic-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.topic-pick label { cursor: pointer; }
.topic-pick input { position: absolute; opacity: 0; }
.topic-pick span { display: grid; justify-items: center; gap: 8px; padding: 16px 10px; border-radius: 14px; text-align: center; font-weight: 600; font-size: 14px; background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: all .2s; }
.topic-pick span .i { color: var(--muted); }
.topic-pick input:checked + span { background: var(--soft); color: var(--pink); box-shadow: inset 0 0 0 2px var(--pink); }
.topic-pick input:checked + span .i { color: var(--pink); }
.topic-pick input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }

[hidden] { display: none !important; }

/* Hồ sơ: bố cục 2 cột + bình luận */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.doc-side { position: sticky; top: 84px; display: grid; gap: 16px; max-height: calc(100vh - 100px); overflow: auto; }
.cmts .card__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmts__new { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--soft); }
.cmts__quote { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid #ffc94d; background: #fff8e1; border-radius: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: pre-line; }
.cmts__list { display: grid; gap: 10px; margin-top: 12px; }
.cmt { padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .3s, background .3s; }
.cmt.is-focus { background: var(--soft); box-shadow: inset 0 0 0 2px var(--pink); }
.cmt.is-resolved { display: none; opacity: .7; }
.show-resolved .cmt.is-resolved { display: block; }
.cmt__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.cmt__body { margin-top: 4px; font-size: 14px; }
.cmt__reply { margin: 8px 0 0 12px; padding-left: 10px; border-left: 2px solid var(--line-2); }
.cmt__actions { margin-top: 8px; font-size: 13px; }
.cmt__actions summary { cursor: pointer; color: var(--pink); font-weight: 600; display: inline-block; }
.cmt__actions .form { margin-top: 6px; }
.cmt__resolve { display: inline; }
.cmt__resolve .link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--green); font-weight: 600; }
.cmt-mark { background: #ffe58a; border-radius: 2px; cursor: pointer; padding: 0; color: inherit; }
.cmt-mark.is-focus { background: #ffb547; }
.cmt-mark.is-resolved { background: none; cursor: default; }
.show-resolved .cmt-mark.is-resolved { background: #e3f6ea; }
.cmt-pop { position: fixed; z-index: 60; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 13px var(--font); box-shadow: var(--shadow); cursor: pointer; }
.review-new { display: grid; gap: 8px; margin: 12px 0; padding: 12px; border-radius: 12px; background: var(--green-bg); }
@media (max-width: 1100px) { .doc-layout { grid-template-columns: 1fr; } .doc-side { position: static; max-height: none; } }
@media print { .doc-layout { display: block; } .cmt-mark { background: none; } }

/* Trang công khai (review, khảo sát) */
body.public { background: var(--bg); }
.pub-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; background: #fff; box-shadow: 0 1px 0 var(--line); }
.pub-main { max-width: 1280px; margin: 0 auto; padding: 24px 16px 60px; }

/* Khảo sát */
.survey { max-width: 760px; margin: 0 auto; }
.survey__head { text-align: center; margin: 12px 0 24px; }
.survey__head h1 { font: 800 28px/1.25 var(--head); margin: 12px 0 8px; }
.survey__q { border: 0; }
.survey__q legend { float: left; width: 100%; margin-bottom: 14px; font-weight: 600; font-size: 16px; }
.survey__n { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 6px; border-radius: 50%; background: var(--soft); color: var(--pink); font-size: 13px; }
.survey__opts { display: grid; gap: 10px; clear: both; }
.survey__done { text-align: center; padding: 40px 24px; }
.rate { display: flex; flex-direction: row-reverse; justify-content: center; gap: 6px; clear: both; }
.rate input { position: absolute; opacity: 0; }
.rate label { font-size: 40px; line-height: 1; color: #e3e6ec; cursor: pointer; transition: color .15s, transform .15s; }
.rate label:hover, .rate label:hover ~ label, .rate input:checked ~ label { color: #ffb400; }
.rate label:hover { transform: scale(1.12); }
.rate input:focus-visible + label { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 6px; }
.rate__hint { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); }
.nps { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; clear: both; }
.nps input { position: absolute; opacity: 0; }
.nps span { display: grid; place-items: center; height: 40px; border-radius: 10px; font-weight: 700; background: var(--gray-bg); color: var(--ink-2); cursor: pointer; transition: all .15s; }
.nps input:checked + span { background: var(--grad); color: #fff; }
.nps input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }
.stars { color: #ffb400; letter-spacing: 2px; } .stars i { color: #e3e6ec; font-style: normal; }
.survey__ans { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; margin-top: 12px; font-size: 14px; }
.survey__ans dt { color: var(--muted); } .survey__ans dd { margin: 0; text-align: right; }
.sq { display: grid; gap: 8px; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
.sq__top { display: flex; align-items: center; gap: 10px; }
.sq__top .input { flex: 1; height: 36px; }
.sq__n { color: var(--muted); }
@media (max-width: 560px) { .nps { grid-template-columns: repeat(6, minmax(0, 1fr)); } .survey__ans { grid-template-columns: 1fr; } .survey__ans dd { text-align: left; } }

.joblog { margin: 8px 0 0; padding: 10px 12px; max-height: 260px; overflow: auto; border-radius: 10px; background: #1f2433; color: #d6dae4; font: 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; }

/* Quản lý hosting mở rộng */
.ext { margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--gray-bg); }
.ext h4 { display: flex; align-items: center; gap: 6px; font-size: 15px; margin-bottom: 10px; }
.ext__info { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 12px; font-size: 14px; }
.ext__info dt { color: var(--muted); } .ext__info dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .ext__info { grid-template-columns: 1fr; } .ext__info dd { margin-bottom: 6px; } }

/* Hạng mục: tạo dịch vụ sau nghiệm thu */
.item__main { display: grid; gap: 8px; }
.item__svc { display: flex; flex-wrap: wrap; gap: 8px; }
.item__svc .input { flex: 1 1 150px; min-width: 0; height: 36px; font-size: 13px; }
.items__table td:first-child { min-width: 300px; }
.item__svc.is-on select:first-child { box-shadow: inset 0 0 0 1.5px var(--pink); color: var(--pink); font-weight: 600; }

.svc-plan { display: grid; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--gray-bg); }

.verify-gate { max-width: 520px; margin: 0 auto; display: grid; gap: 16px; justify-items: center; text-align: center; }
.verify-gate .form, .verify-gate form { width: 100%; }
.doc-row { flex-wrap: wrap; }
.doc-row__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs em { margin-left: 4px; font-style: normal; font-size: 12px; opacity: .7; }

/* ------------------------------------------------------------------
 * Nhịp khoảng cách thống nhất
 *   giữa các khối trong card: 16px · trong form: 16px · nhãn ↔ ô nhập: 6px · giữa card: 20px
 * ---------------------------------------------------------------- */
.card:not(.card--flush) > * + * { margin-top: 16px; }
.card:not(.card--flush) > .card__title + .card__sub,
.card:not(.card--flush) > .card__head + * { margin-top: 0; }
.card > .card__head:only-child { margin-bottom: 0; }
/* Danh sách đặt trong card có padding: canh thẳng mép nội dung */
.card:not(.card--flush) .list__item { padding-left: 0; padding-right: 0; }
.card:not(.card--flush) .list { margin-top: 4px; }
/* Tiêu đề phân đoạn trong form */
.form__section { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 16px; font-weight: 700; color: var(--ink); }
/* Khối lồng trong form luôn có khoảng cách đều */
.provision, .review-new, .cmts__new, .svc-plan, .verify-gate { display: grid; gap: 16px; }
.provision > p { margin: 0; }
.ext { display: grid; gap: 12px; }
.ext h4 { margin: 0; }
.stack > .page-head { margin-bottom: 0; }
.seg + .field, .seg + .check, .seg + .seg { margin-top: 0; }
details > summary + * { margin-top: 12px; }

/* Dòng danh sách: khi khung hẹp, nút thao tác xuống dòng gọn thay vì bóp tên */
.list__item { flex-wrap: wrap; row-gap: 8px; }
.list__body { flex: 1 1 180px; }
.list__body b { white-space: normal; overflow-wrap: anywhere; }
.list__item > form { flex-shrink: 0; }

/* Biểu đồ doanh thu */
.rev { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 200px auto; column-gap: 12px; row-gap: 8px; }
.rev__axis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: 11px; color: var(--muted); transform: translateY(-6px); height: calc(100% + 12px); }
.rev__plot { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: end; border-left: 1px solid var(--line-2); padding: 0 10px; }
.rev__grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--line); }
.rev__col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.rev__bar { display: block; width: min(100%, 44px); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #ffb3cd, #ffd0bd); transition: filter .2s; }
.rev__col.is-current .rev__bar { background: var(--grad); box-shadow: var(--shadow-pink); }
.rev__col:hover .rev__bar { filter: brightness(.95) saturate(1.2); }
.rev__val { margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.rev__col.is-current .rev__val { color: var(--pink); }
.rev__labels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; padding: 0 10px; font-size: 12px; color: var(--muted); text-align: center; }
.rev__labels .is-current { color: var(--ink); font-weight: 700; }

.form > .btn:not(.btn--block), .form > button.btn:not(.btn--block) { justify-self: start; }

.twofa--narrow { grid-template-columns: 1fr; justify-items: start; gap: 18px; }
.twofa--narrow .twofa__qr svg { width: 180px; height: 180px; }
.accept .codes + .btn { margin-top: 12px; }
.otp::placeholder { letter-spacing: normal; font-family: var(--font); font-size: 14px; font-weight: 400; }

.notif-row { position: relative; }
.notif-row .notif { padding-right: 64px; }
.notif-row__del { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); opacity: 0; transition: opacity .2s; }
.notif-row:hover .notif-row__del, .notif-row__del:focus-within { opacity: 1; }
@media (hover: none) { .notif-row__del { opacity: 1; } }

/* Chương trình ưu đãi */
.promo-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.promo-pick label { cursor: pointer; display: grid; }
.promo-pick input { position: absolute; opacity: 0; }
.promo-pick span { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: all .2s; }
.promo-pick small { font-size: 13px; color: var(--muted); }
.promo-pick em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--orange); }
.promo-pick input:checked + span { background: var(--soft); box-shadow: inset 0 0 0 2px var(--pink); }
.promo-pick input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }
.promo-banner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: var(--r); background: linear-gradient(120deg, #fff4ec, #fff0f5); box-shadow: inset 0 0 0 1px #ffd9c7; }
.promo-banner__icon { font-size: 28px; }
.promo-banner__body { flex: 1 1 260px; display: grid; gap: 2px; }
.promo-banner__body b { font-size: 16px; color: var(--ink); }
.promo-banner__body span { font-size: 14px; color: var(--ink-2); }

/* Timeline dự án & phân công */
.timeline { min-width: 640px; }
.timeline td:last-child { white-space: nowrap; }
.timeline td.title { min-width: 200px; }
.timeline .input { height: 36px; }
.timeline tr.is-now td { background: var(--soft); }
.field--inline { grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 10px; }
.field--inline label { font-weight: 600; }
@media (max-width: 560px) { .field--inline { grid-template-columns: 1fr; } }

/* Đánh giá nhân sự */
.perf-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.perf { display: grid; gap: 16px; align-content: start; }
.card.perf > * + * { margin-top: 0; }
.perf__head { display: flex; align-items: center; gap: 12px; }
.perf__who { flex: 1; display: grid; min-width: 0; }
.perf__who b { color: var(--ink); }
.perf__who span { font-size: 13px; color: var(--muted); }
.perf__score { display: grid; justify-items: end; }
.perf__score b { font: 800 30px/1 var(--head); }
.perf__score span { font-size: 12px; font-weight: 600; }
.perf__score--green { color: var(--green); } .perf__score--blue { color: var(--blue); } .perf__score--orange { color: var(--orange); } .perf__score--red { color: var(--red); } .perf__score--gray { color: var(--muted); }
.perf__bars { display: grid; gap: 10px; }
.perf__stats { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.perf__stats dt { color: var(--muted); } .perf__stats dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink-2); }

/* Xác minh danh tính */
.kyc-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; padding: 12px 16px; border-radius: 14px; font-size: 14px; font-weight: 500; background: var(--blue-bg); color: #2e57c4; }
.kyc-bar span { flex: 1 1 260px; }
.kyc-bar--pending { background: var(--orange-bg); color: #b0560f; }
.kyc-bar--rejected { background: var(--red-bg); color: #b4234a; }
.kyc-files { display: grid; gap: 10px; }
.kyc-file { justify-content: flex-start; align-items: center; }
.kyc-file span { display: grid; gap: 2px; text-align: left; }
.kyc-file small { font-weight: 400; color: var(--muted); }
.verify-done { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 20px 0; }
.kyc-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.kyc-docs a { display: grid; gap: 6px; padding: 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12px; color: var(--ink-2); }
.kyc-docs img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; background: var(--gray-bg); }

/* Ô tag nhân sự */
.tags { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 8px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); cursor: text; }
.tags:focus-within { box-shadow: inset 0 0 0 1.5px var(--pink), 0 0 0 4px var(--soft); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: 999px; background: var(--soft); color: var(--pink); font-size: 13px; font-weight: 600; }
.tag b { color: var(--ink); font-weight: 500; }
.tag button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
.tag button:hover { background: #fff; color: var(--red); }
.tags__input { flex: 1 1 120px; min-width: 100px; height: 30px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; }
.tags__list { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 260px; overflow: auto; padding: 6px; border-radius: 12px; background: #fff; box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.tags__opt { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.tags__opt small { color: var(--muted); font-size: 12px; }
.tags__opt.is-active, .tags__opt:hover { background: var(--soft); }
.tags__empty { padding: 10px; font-size: 13px; color: var(--muted); }

.danger-zone { box-shadow: var(--shadow-sm), 0 0 0 1.5px #ffc2d1; }
.danger-zone .card__title { display: flex; align-items: center; gap: 8px; color: var(--red); }

/* Khung xem / sửa */
.editable:not(.is-editing) .edit-only { display: none !important; }
.editable.is-editing .view-only { display: none !important; }
.kv { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 10px 20px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.kv dd .muted { font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 8px; } }

/* ------------------------------------------------------------------
 * Thanh cuộn mảnh: menu trái và các vùng cuộn trong trang.
 * Menu: thanh cuộn ẩn, chỉ hiện khi rê chuột / đang cuộn; không chiếm chỗ của nội dung.
 * ---------------------------------------------------------------- */
.sb, .doc-side, .tags__list, .joblog, .table-wrap, .tabs, .picker__list, .sb-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(43, 52, 69, .18) transparent;
}
.sb { scrollbar-color: transparent transparent; scrollbar-gutter: stable; transition: scrollbar-color .3s; overscroll-behavior: contain; }
.sb:hover, .sb:focus-within { scrollbar-color: rgba(255, 87, 148, .35) transparent; }
.sb::-webkit-scrollbar, .doc-side::-webkit-scrollbar, .tags__list::-webkit-scrollbar, .joblog::-webkit-scrollbar, .table-wrap::-webkit-scrollbar, .picker__list::-webkit-scrollbar { width: 6px; height: 6px; }
.sb::-webkit-scrollbar-track, .doc-side::-webkit-scrollbar-track, .tags__list::-webkit-scrollbar-track, .joblog::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track, .picker__list::-webkit-scrollbar-track { background: transparent; }
.sb::-webkit-scrollbar-thumb { border-radius: 99px; background: transparent; }
.sb:hover::-webkit-scrollbar-thumb { background: rgba(255, 87, 148, .35); }
.sb::-webkit-scrollbar-thumb:hover { background: rgba(255, 87, 148, .6); }
.doc-side::-webkit-scrollbar-thumb, .tags__list::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb, .picker__list::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(43, 52, 69, .18); }
.joblog::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(255, 255, 255, .25); }
.joblog { scrollbar-color: rgba(255, 255, 255, .25) transparent; }
/* Menu: chữ dài không xuống dòng; màn hình thấp thì gọn lại để ít phải cuộn */
.sb__nav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-height: 820px) {
    .sb { padding-top: 16px; }
    .sb__logo { padding-bottom: 12px; }
    .sb__nav { gap: 2px; }
    .sb__nav a { padding-top: 9px; padding-bottom: 9px; }
    .sb__help { padding: 12px 14px; }
}

.client-lists { align-items: start; }
@media (max-width: 1400px) { .client-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Thẻ dịch vụ: cả thẻ bấm được (link phủ), dịch vụ kèm theo bấm riêng */
.svc { position: relative; display: flex; flex-direction: column; gap: 14px; }
.svc-grid { align-items: start; }
.svc__link { color: inherit; }
.svc__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.svc__bundle { position: relative; z-index: 1; display: grid; gap: 6px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.svc__kid { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--gray-bg); transition: background .2s; }
.svc__kid:hover { background: var(--soft); }
.svc__kid-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #fff; color: var(--pink); flex-shrink: 0; }
.svc__kid-body { flex: 1; min-width: 0; display: grid; }
.svc__kid-body b { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc__kid-body small { font-size: 12px; color: var(--muted); }
.svc__kid .badge { flex-shrink: 0; }

.cancel-box > summary { list-style: none; cursor: pointer; }
.cancel-box > summary::-webkit-details-marker { display: none; }
.cancel-box[open] > summary { margin-bottom: 12px; }

/* Công tắc gia hạn tự động */
.autorenew { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.autorenew__text { flex: 1; display: grid; text-align: left; }
.autorenew__text b { font-size: 14px; color: var(--ink); }
.autorenew__text small { font-size: 12px; color: var(--muted); }
.switch { position: relative; flex-shrink: 0; width: 46px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: var(--line-2); cursor: pointer; transition: background .2s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.switch.is-on { background: var(--grad); }
.switch.is-on i { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* Tour hướng dẫn */
.top__help { color: var(--pink); }
.tour { position: fixed; inset: 0; z-index: 1000; }
.tour__spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(20, 24, 38, .58), 0 0 0 3px rgba(255, 87, 148, .9); transition: top .3s var(--ease), left .3s var(--ease), width .3s var(--ease), height .3s var(--ease), opacity .2s; pointer-events: none; }
.tour--center::before { content: ""; position: fixed; inset: 0; background: rgba(20, 24, 38, .58); }
.tour__pop { position: fixed; width: min(380px, calc(100vw - 24px)); padding: 18px 20px 16px; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px -12px rgba(20, 24, 38, .45); transition: top .3s var(--ease), left .3s var(--ease); }
.tour--center .tour__pop { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 24px)); }
.tour--sheet .tour__pop { top: auto !important; left: 12px !important; right: 12px; bottom: 12px; width: auto; }
.tour__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.tour__badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pink); }
.tour__step { font-size: 12px; font-weight: 600; color: var(--muted); }
.tour__title { font: 700 17px/1.3 var(--head); color: var(--ink); }
.tour__text { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.tour__foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tour__dots { display: flex; gap: 4px; margin-right: auto; }
.tour__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: all .2s; }
.tour__dots i.is-on { width: 16px; border-radius: 99px; background: var(--pink); }
.tour__skip { border: 0; background: none; padding: 6px 8px; font: 600 13px var(--font); color: var(--muted); cursor: pointer; }
.tour__skip:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .tour__spot, .tour__pop { transition: none; } }

.help-group { margin: 24px 0 12px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.help-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: stretch; }
.help-card { display: flex; flex-direction: column; gap: 10px; }
.card.help-card > * + * { margin-top: 0; }
.help-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.help-card__head b { color: var(--ink); }
.help-card .btn, .help-card > span { margin-top: auto; align-self: flex-start; }

/* Responsive */
@media (max-width: 1100px) {
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid--side, .grid--list { grid-template-columns: 1fr; }
	.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.sb { transform: translateX(-100%); transition: transform .35s var(--ease); box-shadow: var(--shadow); }
	.sb-open .sb { transform: none; }
	.sb-open .sb-backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(43, 52, 69, .35); }
	.main { margin-left: 0; }
	.top { padding: 0 16px; height: 64px; }
	.top__burger { display: inline-flex; }
	.top__name { display: none; }
	.top__user summary { padding: 3px; }
	.content { padding: 20px 16px 48px; }
	.auth__wrap { grid-template-columns: 1fr; }
	.auth__side { display: none; }
	.stepper { grid-template-columns: 1fr; gap: 14px; }
	.step { grid-template-columns: 44px 1fr; justify-items: start; text-align: left; column-gap: 14px; row-gap: 0; }
	.step__dot { grid-row: span 2; }
	.step::before { display: none; }
}
@media (max-width: 640px) {
	.grid--2, .grid--3, .form__row, .form__row--3 { grid-template-columns: 1fr; }
	.grid--4 { grid-template-columns: 1fr 1fr; gap: 12px; }
	.kpi { padding: 14px; gap: 12px; flex-direction: column; align-items: flex-start; }
	.kpi b { font-size: 22px; }
	.welcome { flex-direction: column; align-items: flex-start; padding: 24px; }
	.card { padding: 18px; }
	.card--flush { padding: 0; }
	.inv { padding: 22px; }
	.dl { grid-template-columns: 1fr; gap: 2px; }
	.dl dd { margin-bottom: 10px; }
	.seg { grid-template-columns: 1fr; }
	.table--stack thead { display: none; }
	.table--stack tr { display: grid; padding: 12px 16px; border-bottom: 1px solid var(--line); }
	.table--stack td { padding: 3px 0; border: 0; text-align: left; }
	.filters .input { min-width: 0; flex: 1; }
	.list__item, .notif { padding: 14px 16px; }
	.msg--client, .msg--staff { margin: 0; }
	.twofa { grid-template-columns: 1fr; justify-items: center; }
	.codes { grid-template-columns: repeat(2, 1fr); }
	.doc-paper { padding: 8px; }
	.doc { padding: 10mm 6mm; min-height: 0; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Phiên đăng nhập */
.sess { flex-wrap: wrap; }
.sess__out { margin-left: auto; }
.sess__out > summary { list-style: none; }
.sess__out > summary::-webkit-details-marker { display: none; }
.sess__out[open] { flex-basis: 100%; }
.sess__out[open] > summary { display: none; }
.sess__confirm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 !important; }
.sess__confirm .input { flex: 1 1 220px; max-width: 320px; }
.sess__all { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 24px; border-top: 1px solid var(--line); }
.sess__all .sess__out { margin-left: 0; }

/* Chân trang (tuỳ chỉnh tại Quản trị → Thương hiệu & email) */
.app-foot { margin-top: 36px; padding: 18px 0 4px; border-top: 1px solid var(--line); color: var(--muted, #7a8191); font-size: 12.5px; text-align: center; }

/* Thương hiệu & email */
.brand-prev { display: grid; place-items: center; min-height: 90px; padding: 16px; border-radius: 14px; background: var(--soft); }
.brand-prev img { max-width: 100%; max-height: 64px; width: auto; }
.brand-prev--mail { background: #fff; box-shadow: 0 0 0 1px var(--line); }
.mail-frame { display: block; width: 100%; height: 720px; border: 0; background: #fff6f5; border-radius: 0 0 var(--radius, 16px) var(--radius, 16px); }
.input--color { height: 44px; padding: 4px; cursor: pointer; }
.input--code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.55; }
.var-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.var-chips code { padding: 3px 8px; border-radius: 8px; background: var(--soft); color: var(--pink); font-size: 12.5px; cursor: help; }
.list__group { padding: 14px 24px 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* Brief */
.sq--section { background: var(--soft); }
.sq--section .sq__top .input { font-weight: 700; }
.pick-list { display: grid; gap: 8px; max-height: 260px; overflow: auto; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
.topic-pick--sm { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.topic-pick--sm span { padding: 12px 6px; }
.brief-card--todo { box-shadow: inset 0 0 0 2px var(--pink); }

/* Menu quản trị gom nhóm */
.sb__group > summary { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; user-select: none; transition: background-color .2s, color .2s; }
.sb__group > summary::-webkit-details-marker { display: none; }
.sb__group > summary:hover { background: var(--soft); color: var(--pink); }
.sb__group > summary.has-active { color: var(--pink); }
.sb__caret { width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .55; transition: transform .2s; }
.sb__group > summary .sb__count + .sb__caret { margin-left: 8px; }
.sb__group[open] > summary .sb__caret { transform: rotate(45deg); }
.sb__sub { display: grid; gap: 2px; margin: 2px 0 6px 21px; padding-left: 12px; border-left: 1.5px solid var(--line); }
.sb__sub a { padding: 9px 12px; font-size: 14px; }
.sb__sub a .i { width: 17px; height: 17px; }

/* Đăng ký thêm dịch vụ (danh mục đang bật) */
.order { margin-top: 32px; }
.order__head h3 { font-family: Montserrat, sans-serif; font-size: 20px; margin: 0 0 4px; }
.order__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; }
.order__item { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: var(--r, 18px); background: #fff; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); color: var(--ink); transition: transform .25s var(--ease, ease), box-shadow .25s; }
.order__item:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255, 87, 148, .14), 0 0 0 1.5px var(--pink); }
.order__icon { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; background: var(--soft); color: var(--pink); }
.order__body { flex: 1; display: grid; gap: 4px; min-width: 0; }
.order__body small { color: var(--muted); line-height: 1.5; }
.order__meta { font-size: 13px; color: var(--muted); }
.order__meta em { font-style: normal; font-weight: 700; color: var(--pink); }
.order__go { align-self: center; color: var(--muted); transition: transform .25s, color .25s; }
.order__item:hover .order__go { color: var(--pink); transform: translateX(3px); }
.text-green { color: var(--green, #16a34a); font-weight: 600; }

/* ===================== Brief từng bước ===================== */
.brief { max-width: 1120px; margin: 0 auto; display: grid; gap: 22px; }
.brief-msg { max-width: 560px; margin: 40px auto; }
.bhero { position: relative; overflow: hidden; display: grid; gap: 12px; padding: clamp(22px, 4vw, 38px); border-radius: 24px; background: #fff; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.bhero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: var(--grad); opacity: .09; }
.bhero__kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--pink); }
.bhero h1 { margin: 0; font-family: Montserrat, sans-serif; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.2; }
.bhero p { margin: 0; max-width: 760px; color: var(--ink-2); line-height: 1.7; }
.bhero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bhero__chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--soft); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.bhero__chips .i { color: var(--pink); }
.bhero__note { display: flex; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #fffaf0; border: 1px dashed #f5c98b; color: var(--ink-2); }

.bwiz { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.bprog { position: sticky; top: 16px; display: grid; gap: 16px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.bprog__top { display: flex; align-items: center; gap: 14px; }
.bprog__ring { --p: 0; flex-shrink: 0; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: conic-gradient(var(--pink) calc(var(--p) * 1%), var(--line) 0); transition: background .4s; }
.bprog__ring::before { content: ""; grid-area: 1 / 1; width: 58px; height: 58px; border-radius: 50%; background: #fff; }
.bprog__ring b { grid-area: 1 / 1; z-index: 1; font: 800 17px Montserrat, sans-serif; color: var(--ink); }
.bprog__txt { display: grid; gap: 4px; min-width: 0; }
.bprog__txt b { font-size: 15px; }
.bprog__txt span { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.bprog__txt span.is-pop { animation: bpop .6s ease; color: var(--pink); font-weight: 600; }
@keyframes bpop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.bprog__saved { font-size: 12.5px; color: var(--green); }
.bprog__saved.is-bad { color: var(--orange); }
.bsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: s; }
.bsteps button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 13.5px; color: var(--ink-2); text-align: left; cursor: pointer; }
.bsteps button:hover { background: var(--soft); }
.bsteps i { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--line); font: 700 12px var(--font); font-style: normal; color: var(--ink-2); transition: all .25s; }
.bsteps span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsteps em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.bsteps button.is-done i { background: var(--green); color: #fff; }
.bsteps button.is-req em { color: var(--orange); }
.bsteps button.is-current { background: var(--soft); color: var(--ink); font-weight: 700; }
.bsteps button.is-current i { background: var(--grad); color: #fff; box-shadow: 0 4px 10px rgba(255, 87, 148, .35); }

.bwiz__main { display: grid; gap: 18px; min-width: 0; }
.bstep { display: grid; gap: 16px; }
.bstep__head { display: grid; gap: 6px; padding: 4px 4px 0; }
.bstep__n { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pink); }
.bstep__head h2 { margin: 0; font-family: Montserrat, sans-serif; font-size: clamp(20px, 2.6vw, 26px); }
.bstep__head p { margin: 0; }
.bq { position: relative; display: grid; gap: 10px; padding: 20px 22px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); transition: box-shadow .25s; }
.bq:focus-within { box-shadow: 0 10px 28px rgba(43, 52, 69, .08), 0 0 0 2px var(--pink); }
.bq.is-flash { animation: bflash 1.4s ease; }
@keyframes bflash { 0%, 60% { box-shadow: 0 0 0 3px #ffb35c; } 100% { box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); } }
.bq__label { display: flex; align-items: flex-start; gap: 6px; font-weight: 700; font-size: 15.5px; color: var(--ink); line-height: 1.45; }
.bq__req { color: var(--pink); }
.bq__ok { display: none; margin-left: auto; flex-shrink: 0; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green-bg); color: var(--green); }
.bq.is-done .bq__ok { display: grid; }
.bq__help { margin: -4px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.bq .input { width: 100%; }
.bq textarea.input { min-height: 110px; resize: vertical; line-height: 1.6; }
.bq__other { margin-top: 2px; }
.bopts { display: flex; flex-wrap: wrap; gap: 8px; }
.bopt { cursor: pointer; }
.bopt input { position: absolute; opacity: 0; pointer-events: none; }
.bopt span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); font-size: 14px; color: var(--ink-2); transition: all .18s; }
.bopt span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--line-2); background: #fff; transition: all .18s; }
.bopt input[type=radio] + span::before { border-radius: 50%; }
.bopt:hover span { box-shadow: inset 0 0 0 1.5px var(--pink); color: var(--ink); }
.bopt input:checked + span { background: var(--soft); color: var(--pink); font-weight: 600; box-shadow: inset 0 0 0 2px var(--pink); }
.bopt input:checked + span::before { background: var(--pink); box-shadow: inset 0 0 0 3px #fff, 0 0 0 1.5px var(--pink); }
.bopt input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }
.bopt input:disabled + span { opacity: .7; cursor: default; }

.bstep__outro { display: flex; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--soft); font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.bstep__outro .i { flex-shrink: 0; color: var(--pink); margin-top: 2px; }
.bsum__ok, .bsum__miss { display: grid; gap: 6px; padding: 18px 20px; border-radius: 16px; }
.bsum__ok { background: var(--green-bg); color: #137a50; }
.bsum__miss { background: var(--orange-bg); color: #9a4a10; }
.bsum__miss ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.bsum__miss a { color: inherit; text-decoration: underline; }
.brief-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.brief-pkg { cursor: pointer; }
.brief-pkg input { position: absolute; opacity: 0; }
.brief-pkg span { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: all .2s; }
.brief-pkg em { font-style: normal; font-weight: 800; color: var(--pink); }
.brief-pkg small { color: var(--muted); line-height: 1.5; }
.brief-pkg input:checked + span { background: var(--soft); box-shadow: inset 0 0 0 2px var(--pink); }
.brief-pkg input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }

.bnav { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 14px 16px; margin-top: 4px; border-radius: 18px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); box-shadow: 0 -6px 24px rgba(43, 52, 69, .08), 0 0 0 1px var(--line); }
.bnav__sp { flex: 1; }
.bnav [data-prev] .i { transform: rotate(180deg); }
.bwiz:not(.is-wizard) .bnav [data-next], .bwiz:not(.is-wizard) .bnav [data-prev] { display: none; }
.bwiz:not(.is-wizard) { grid-template-columns: 1fr; }
.bwiz:not(.is-wizard) .bprog { position: static; }

/* Ô tải file kéo-thả */
.dz { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 2px dashed var(--line-2); border-radius: 16px; background: #fcfcfd; color: var(--ink-2); transition: all .2s; }
.dz input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dz:hover, .dz.is-over { border-color: var(--pink); background: var(--soft); }
.dz.is-over { transform: scale(1.01); }
.dz:focus-within { border-color: var(--pink); }
.dz__icon { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #fff; color: var(--pink); box-shadow: 0 4px 12px rgba(255, 87, 148, .15); }
.dz__text { display: grid; gap: 2px; font-size: 14px; }
.dz__text b { color: var(--ink); }
.dz__text u { color: var(--pink); text-decoration: none; font-weight: 600; }
.dz__text small { color: var(--muted); font-size: 12.5px; }
.dz__files { display: flex; flex-wrap: wrap; gap: 8px; }
.dz__files:empty { display: none; }
.dz__file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 8px 7px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; }
.dz__file.is-saved { background: var(--green-bg); box-shadow: none; }
.dz__file .i { flex-shrink: 0; color: var(--pink); }
.dz__file.is-saved .i { color: var(--green); }
.dz__file b, .dz__file a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); max-width: 260px; }
.dz__file small { color: var(--muted); }
.dz__x { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(43, 52, 69, .08); color: var(--ink-2); font-size: 15px; line-height: 1; cursor: pointer; }
.dz__x:hover { background: #ffe1ea; color: #e0345f; }

/* Xem câu trả lời brief (nhân sự / khách xem lại) */
.ansv { display: grid; gap: 18px; }
.ansv__sec { display: grid; gap: 12px; }
.ansv__sec h3 { margin: 6px 4px 0; font-family: Montserrat, sans-serif; font-size: 17px; }
.ansv__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ansv__item { display: grid; gap: 8px; align-content: start; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.ansv__item--wide { grid-column: 1 / -1; }
.ansv__q { display: flex; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.45; }
.ansv__q i { flex-shrink: 0; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 7px; background: var(--soft); color: var(--pink); font: 700 11px var(--font); font-style: normal; }
.ansv__a { font-size: 15px; line-height: 1.65; color: var(--ink); word-break: break-word; }
.ansv__a .chip { margin: 0 6px 6px 0; background: var(--soft); color: var(--pink); }
.ansv__a .chip--other { background: var(--gray-bg, #f1f3f6); color: var(--ink-2); }
.ans-empty { color: #b3b9c4; font-style: italic; font-size: 14px; }
.ans-file { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 8px 0; padding: 8px 12px; border-radius: 12px; background: var(--soft); color: var(--ink); font-size: 13.5px; }
.ans-file .i { color: var(--pink); }
.ans-file small { color: var(--muted); }

@media (max-width: 900px) {
  .bwiz { grid-template-columns: 1fr; }
  .bprog { position: sticky; top: 0; z-index: 6; gap: 10px; padding: 12px 14px; border-radius: 16px; }
  .bprog__ring { width: 52px; height: 52px; }
  .bprog__ring::before { width: 40px; height: 40px; }
  .bprog__ring b { font-size: 13px; }
  .bsteps { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
  .bsteps button { width: auto; padding: 6px 10px 6px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
  .bsteps span { max-width: 140px; }
  .bsteps em { display: none; }
  .ansv__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .bq { padding: 16px; }
  .bnav { padding: 10px; gap: 6px; }
  .bnav .btn { padding-inline: 12px; }
  .dz { padding: 14px; }
}
@media print { .sb, .top, .tabs, .page-head .row, .grid--list > .stack:first-child, form, .copy, .app-foot { display: none !important; } .grid--list { display: block !important; } .ansv__grid { grid-template-columns: 1fr 1fr; } }

/* Chống tràn: ô lưới mặc định co theo nội dung dài nhất (min-content) → ép cột co giãn được */
.sb__nav, .sb__sub, .bprog, .bsteps, .bwiz__main, .bstep, .bq, .ansv__grid, .order__grid { grid-template-columns: minmax(0, 1fr); }
.ansv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.order__grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.sb__nav > *, .sb__sub > *, .bprog > *, .bsteps > li, .bsteps button { min-width: 0; }
.sb__nav a span, .sb__group > summary span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bprog__txt span { overflow-wrap: anywhere; }
@media (max-width: 900px) { .ansv__grid { grid-template-columns: minmax(0, 1fr); } }
.bsteps span { white-space: normal; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bsteps button { align-items: center; }
@media (max-width: 900px) { .bsteps span { display: block; white-space: nowrap; text-overflow: ellipsis; } }
@media (max-width: 900px) {
  .bsteps > li { flex: 0 0 auto; }
  .bsteps button { min-width: auto; }
  .bsteps span { max-width: 150px; }
  .bsteps button:not(.is-current) span { display: none; }   /* bước khác chỉ hiện số → gọn, bước đang làm hiện tên */
  .bsteps button:not(.is-current) { padding-right: 6px; }
}
.field code, .field small code, .card code { overflow-wrap: anywhere; word-break: break-word; }
.sess .list__body { flex: 1 1 180px; }
.sess__out > summary { white-space: nowrap; }
.sess__confirm { width: 100%; }
.sess__confirm .input { flex: 1 1 160px; min-width: 0; max-width: 320px; }
.sess__confirm .btn { flex-shrink: 0; }

/* Duyệt video theo timecode */
.vr__stage { background: #0b0d12; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; }
.vr__video, .vr__frame { width: 100%; height: 100%; display: block; border: 0; background: #000; }
.vr__marks { position: relative; height: 10px; margin: 8px 0 4px; background: var(--line-2, #eef0f4); border-radius: 6px; }
.vr__marks i { position: absolute; top: -3px; width: 4px; height: 16px; border-radius: 3px; background: var(--pink, #ff2d6f); transform: translateX(-2px); }
.vr__marks i.is-done { background: #9aa3b2; }
.vr__tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 12px; }
.vr__tc { display: grid; gap: 4px; width: 110px; }
.vr__tc .input { height: 36px; text-align: center; font-variant-numeric: tabular-nums; }
.vr__draw { margin-top: 12px; display: grid; gap: 8px; }
.vr__bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vr__bar input[type=color] { width: 36px; height: 32px; padding: 0; border: 0; background: none; }
.vr__canvas { width: 100%; height: auto; max-height: 60vh; object-fit: contain; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2, #e5e8ee); cursor: crosshair; touch-action: none; background: #111; }
.vr__form { margin-top: 12px; }
.vr__note { margin: 10px 0 0; }
.vr__list { display: grid; gap: 14px; }
.vr__c { display: grid; grid-template-columns: auto 1fr; gap: 10px; min-width: 0; }
.vr__c.is-done { opacity: .55; }
.vr__t { border: 0; background: var(--soft, #fff0f5); color: var(--pink, #ff2d6f); font-weight: 700; border-radius: 8px; padding: 4px 8px; height: fit-content; cursor: pointer; font-variant-numeric: tabular-nums; }
.vr__cb { min-width: 0; }
.vr__txt { white-space: pre-line; overflow-wrap: anywhere; margin-top: 2px; }
.vr__img { display: block; max-width: 100%; margin-top: 8px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line-2, #e5e8ee); }
.vr__act { display: flex; gap: 12px; margin-top: 4px; }

/* Mô tả thu gọn + thông tin dự án gọn */
.more summary { cursor: pointer; list-style: none; font-size: 14px; color: var(--ink); }
.more summary::-webkit-details-marker { display: none; }
.more u { color: var(--pink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.more__close, .more[open] .more__open, .more[open] .more__short { display: none; }
.more[open] .more__close { display: inline; }
.more[open] p { margin-top: 8px; }
.dl--inline { grid-template-columns: 110px 1fr; gap: 6px 16px; }

/* Lọc nhiều lựa chọn */
.mf { position: relative; }
.mf summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; min-width: 150px; height: 44px; white-space: nowrap; }
.mf summary::-webkit-details-marker { display: none; }
.mf summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.mf.is-on summary { box-shadow: inset 0 0 0 1.5px var(--pink); }
.mf__panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: 86vw; display: grid; gap: 10px; padding: 14px; background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(20, 24, 40, .16), 0 0 0 1px var(--line-2); }

/* Danh sách điều kiện */
.checklist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.checklist li small { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; }
.checklist li svg { flex: none; margin-top: 2px; }
.checklist .is-ok { color: var(--green); }
.checklist .is-todo { color: var(--ink); }
.checklist .is-todo svg { color: var(--orange, #f59e0b); }
.pub-main .doc-paper { margin-top: 16px; }
@media print { .pub-top, .app-foot { display: none !important; } .pub-main { padding: 0; max-width: none; } }

/* Báo giá nổi bật */
.quote-hero { display: block; margin-bottom: 20px; border-radius: var(--r); background: linear-gradient(135deg, #fff5f9, #fff); box-shadow: 0 0 0 2px var(--pink), 0 14px 40px rgba(255, 87, 148, .16); }
.card.quote-hero { padding: 22px 24px; }
.quote-hero--client { display: flex; align-items: center; gap: 18px; padding: 20px 24px; text-decoration: none; color: inherit; flex-wrap: wrap; }
.quote-hero__icon { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--grad); color: #fff; flex: none; }
.quote-hero__body { display: grid; gap: 2px; flex: 1; min-width: 200px; }
.quote-hero__body b { font-size: 17px; color: var(--ink); }
.quote-hero__body small { color: var(--muted); font-size: 13px; }
.pulse-dot { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: #ff2d6f; box-shadow: 0 0 0 0 rgba(255, 45, 111, .6); animation: dot-pulse 1.4s infinite; }
.card__title .pulse-dot { position: static; display: inline-block; margin-right: 4px; vertical-align: middle; }
@keyframes dot-pulse { 70% { box-shadow: 0 0 0 12px rgba(255, 45, 111, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 45, 111, 0); } }
@media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } }

/* Thẻ cột phải thu gọn: mục cần xử lý mở sẵn & lên đầu, còn lại thu gọn kèm tóm tắt */
.cc > .card__head, .cc > .card__title { cursor: pointer; position: relative; padding-right: 28px; }
.cc > .card__head::after, .cc > .card__title::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.cc--closed > .card__head::after, .cc--closed > .card__title::after { transform: rotate(-45deg); }
.cc--closed > *:not(.card__head):not(.card__title) { display: none !important; }
.cc--closed > .card__head .card__sub { display: none; }
.cc--closed::after { content: attr(data-sum); display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.cc--closed.card--flush::after { padding: 0 24px 16px; }

/* Chevron thu gọn không tràn ra ngoài thẻ phẳng (card--flush có padding riêng ở tiêu đề) */
.cc.card--flush > .card__head { padding-right: 52px; }
.cc.card--flush > .card__head::after { right: 24px; }
.cc.card--flush > .card__head .card__link { margin-right: 4px; }
.cc--closed.card--flush > .card__head { border-bottom: 0; padding-bottom: 4px; }
.grid--2 > .stack { align-content: start; }

/* Chevron thu gọn không tràn ra ngoài thẻ phẳng (card--flush có padding riêng ở tiêu đề) */
.cc.card--flush > .card__head { padding-right: 52px; }
.cc.card--flush > .card__head::after { right: 24px; }
.cc--closed.card--flush > .card__head { border-bottom: 0; padding-bottom: 4px; }
.grid--2 > .stack { align-content: start; }

/* Popup thông báo */
.toasts { position: fixed; top: 18px; right: 18px; z-index: 10000; display: grid; gap: 10px; width: min(400px, calc(100vw - 36px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 500; box-shadow: 0 16px 48px rgba(20, 24, 40, .22), 0 0 0 1px var(--line-2); animation: toast-in .28s cubic-bezier(.2, .8, .2, 1); transition: opacity .25s, transform .25s; }
.toast.is-out { opacity: 0; transform: translateX(24px); }
.toast__ico { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font: 700 13px/1 var(--head); }
.toast--success .toast__ico { background: var(--green, #19a974); }
.toast--error .toast__ico { background: #e5365f; }
.toast--warning .toast__ico { background: #f59e0b; }
.toast--info .toast__ico { background: #3b6df0; }
.toast--error { box-shadow: 0 16px 48px rgba(229, 54, 95, .22), 0 0 0 1.5px #f3a5b8; }
.toast__msg { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.45; padding-top: 2px; }
.toast__x { flex: none; border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateX(32px); } }
@media (max-width: 600px) { .toasts { top: 10px; right: 10px; left: 10px; width: auto; } }

/* Hồ sơ lưu trữ theo dự án */
.arch > summary { list-style: none; cursor: pointer; }
.arch > summary::-webkit-details-marker { display: none; }
.arch__head { display: flex; align-items: center; gap: 14px; padding: 16px 24px; }
.arch[open] > .arch__head { border-bottom: 1px solid var(--line); }
.arch .list__item { flex-wrap: wrap; }

/* DIGIZ Sign */
.signer-wait { text-align: center; padding: 6px 4px; }
.signer-code { display: inline-block; margin: 14px auto; padding: 12px 28px; border-radius: 16px; background: var(--soft, #fff0f5); color: var(--pink); font: 800 44px/1 var(--head); letter-spacing: .08em; user-select: all; }
.signer-status { display: inline-flex; align-items: center; gap: 8px; }

/* frame.digiz.vn — danh sách video */
.frame-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.frame-card { padding: 0; overflow: hidden; text-decoration: none; color: inherit; display: grid; }
.frame-card__thumb { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1b2030, #343b52); display: grid; place-items: center; color: #fff; overflow: hidden; }
.frame-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame-card__body { padding: 14px 16px 16px; display: grid; gap: 2px; }

/* Thanh timeline góp ý: chấm bấm được, bấm thanh để tua */
.vr__marks { position: relative; height: 22px; margin: 8px 0 6px; background: transparent; cursor: pointer; }
.vr__marks::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 4px; background: var(--line-2, #e5e8ee); }
.vr__mk { position: absolute; top: 1px; width: 18px; height: 20px; margin-left: -9px; padding: 0; border: 0; background: none; cursor: pointer; }
.vr__mk::before { content: ""; position: absolute; left: 50%; top: 2px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--pink, #ff2d6f); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .25); transition: transform .15s; }
.vr__mk.has-img::before { border-radius: 4px; background: #3b6df0; }
.vr__mk.is-done::before { background: #9aa3b2; }
.vr__mk:hover::before, .vr__mk:focus-visible::before { transform: scale(1.35); }
.vr__mk:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; border-radius: 6px; }
.vr__stage { position: relative; }
.vr__ov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: rgba(0, 0, 0, .55); cursor: pointer; }
.vr__q { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.vr__q select { height: 32px; margin-left: 6px; border: 1px solid var(--line-2, #e5e8ee); border-radius: 8px; padding: 0 8px; background: #fff; font: inherit; }
.vr__c.is-hl { animation: vr-hl 1.8s ease; border-radius: 10px; }
@keyframes vr-hl { 0%, 60% { background: #fff3c4; box-shadow: 0 0 0 6px #fff3c4; } 100% { background: transparent; box-shadow: none; } }