/* =====================================================================
   NGỌC RỒNG ONLINE — GIAO DIỆN KIỂU WEB NRO GỐC (dùng chung mọi trang)
   ---------------------------------------------------------------------
   Bố cục: nền xám, 1 cột giữa rộng 630px, đầu trang cam bo góc, logo đè
   lên dải cam, menu ô nâu, các khối nội dung cam nhạt xếp chồng cách 3px,
   chân trang dải cam bo góc + dòng bản quyền chữ đen nhỏ. Chữ Arial 9pt.
   ---------------------------------------------------------------------
   1. Token màu / font
   2. Nền tảng (reset, chữ, link)
   3. Khung trang (cột 630px, cảnh báo 12+, dải cam, logo, menu, tài khoản)
   4. Khối nội dung .box (và .ui-card dùng chung cùng kiểu)
   5. Nút (.btn và .ui-btn cũ)
   6. Thành phần ui-* (form, bảng, tab, nhãn, thông báo, phân trang…)
   7. Chân trang
   8. Modal giftcode, nút lên đầu trang
   CSS riêng từng trang nằm trong <style> của trang đó (tiền tố riêng),
   chỉ dùng token ở mục 1. Trang quản trị rộng: đặt $pageWide = true.
   ===================================================================== */

/* ── 1. TOKEN ─────────────────────────────────────────────────────── */
:root {
	color-scheme: light;

	/* Bảng màu web NRO */
	--nro-page: #b3afaf;      /* nền xám ngoài cột */
	--nro-frame: #ff5601;     /* thân cột cam đậm */
	--nro-top: #fe5604;       /* dải cam đầu trang */
	--nro-box: #ffaf4c;       /* khối nội dung */
	--nro-box-2: #ffc47a;     /* khối lồng / hàng xen kẽ */
	--nro-cream: #ffcf9c;     /* nền nhạt (hộp thoại, ô nhập) */
	--nro-title: #e73d00;     /* tiêu đề khối */
	--nro-rule: #b98a51;      /* gạch chân tiêu đề */
	--nro-cell: #924c31;      /* ô menu */
	--nro-dark: #561d00;      /* chữ nâu đậm */
	--nro-border: #663019;    /* viền nâu */
	--nro-link: #ad4105;      /* link trên nền cam nhạt */
	--nro-red: #d10932;       /* số phiên bản, cảnh báo */
	--nro-blue: #012699;      /* tiêu đề mục con (trang Giới thiệu) */

	/* Tên token cũ — các trang con đang dùng, ánh xạ sang bảng màu NRO */
	--bg-0: var(--nro-frame);
	--bg-1: var(--nro-box);
	--bg-2: var(--nro-box-2);
	--bg-3: var(--nro-cream);
	--bg-4: #ffe2b8;
	--line: rgba(102, 48, 25, .28);
	--line-2: rgba(102, 48, 25, .45);

	--text: #000;
	--text-2: #3b1d0a;
	--text-3: #6b4226;

	--orange: #ff7700;
	--orange-2: var(--nro-title);
	--orange-3: var(--nro-link);
	--gold: #7a4b00;
	--gold-2: #f5a300;
	--gold-3: #fff0b0;
	--sky: #1a5fa0;
	--sky-2: #4089ba;

	--ok: #0a7a2f;
	--bad: var(--nro-red);

	--g-energy: linear-gradient(180deg, #ff8a2a 0%, #e73d00 100%);
	--g-gold: linear-gradient(180deg, #ffe98a 0%, #f5b301 100%);
	--g-sky: linear-gradient(180deg, #6fb6e6 0%, #4089ba 100%);
	--g-title: linear-gradient(var(--nro-title), var(--nro-title));
	--g-surface: linear-gradient(var(--nro-box), var(--nro-box));

	--glow-orange: none;
	--glow-gold: none;
	--glow-sky: none;

	--radius-sm: 3px;
	--radius: 0;
	--radius-lg: 4px;
	--container: 630px;
	--gutter: 0px;
	--header-h: 0px;
	--ease: ease;

	--font: Arial, Helvetica, sans-serif;
	--font-display: Arial, Helvetica, sans-serif;
	--font-title: Arial, Helvetica, sans-serif;

	--c-brand: var(--orange);
	--c-brand-d: var(--nro-title);
	--c-brand-l: var(--nro-box);
	--c-brown: var(--nro-cell);
	--c-brown-d: var(--nro-dark);
	--c-cream: var(--nro-cream);
	--c-cream-2: var(--nro-box-2);
	--c-line: var(--line);
	--c-text: #000;
	--c-muted: var(--text-3);
	--c-green: var(--ok);
	--c-red: var(--bad);
	--c-amber: #a86a00;
	--c-page: var(--nro-frame);
	--r-card: 0;
	--r-btn: 4px;
	--shadow-card: none;
	--g-fire: var(--g-energy);
	--glow-fire: none;
}

/* ── 2. NỀN TẢNG ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--nro-page); }
body { margin: 0; background: var(--nro-page); color: #000; font: 400 9pt/1.4 var(--font); }
body.is-locked { overflow: hidden; }
img, svg, video { max-width: 100%; }
img { height: auto; border: 0; }
a { color: var(--nro-link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .4em; font-family: var(--font); font-weight: 700; line-height: 1.25; color: #000; }
p { margin: 0 0 .8em; }
b, strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--nro-rule); margin: 8px 0; }
table { border-collapse: collapse; font: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--nro-dark); outline-offset: 1px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }

/* Icon nét mảnh: <svg class="ui-i" viewBox="0 0 24 24">…</svg> */
.ui-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
.ui-i-fill { fill: currentColor; stroke: none; }

/* Trang cũ dùng chữ vàng gradient: ở nền cam thì in màu đỏ tiêu đề */
.text-gold { color: var(--nro-title); }

/* ── 3. KHUNG TRANG ───────────────────────────────────────────────── */
.nro-wrap { position: relative; width: 100%; max-width: 630px; margin: 0 auto 5px; }
.is-wide .nro-wrap { max-width: 1100px; }

/* Dòng cảnh báo 12+ trên nền xám */
.nro-warn { display: flex; align-items: center; gap: 4px; padding: 2px 5px 0; font-size: 10px; line-height: 10px; color: #fff; }
.nro-warn img { width: auto; height: 12px; }

/* Dải cam bo góc trên, logo đè lên */
.nro-top { position: relative; height: 42px; margin-top: 2px; border-radius: 15px 15px 0 0; background: linear-gradient(180deg, #fe5604 0%, #fe5604 30%, #ff5601 100%); }
.nro-body { position: relative; background: var(--nro-frame); }
.nro-logo { position: relative; z-index: 2; height: 48px; margin: -10px 0 0; text-align: center; }
.nro-logo a { display: inline-block; }
.nro-logo img { display: block; width: auto; height: 50px; margin-top: -15px; }

/* Menu: 5 ô nâu, ô đang mở màu cam nhạt */
.nro-menu { display: flex; gap: 4px; padding: 9px 4px 4px; }
.nro-menu a {
	flex: 1 1 0; min-width: 0; padding: 2px; border: 3px solid var(--nro-cell); background: var(--nro-cell);
	color: #fff; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nro-menu a:hover { text-decoration: underline; }
.nro-menu a.is-active { border-color: #ffaf4d; background: var(--nro-box); color: var(--nro-dark); }

/* Thanh tài khoản dưới menu */
.nro-acc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; margin: 0 0 3px; padding: 4px 5px; background: var(--nro-box); }
.nro-acc-who { display: flex; align-items: center; gap: 5px; min-width: 0; }
.nro-acc-ava { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.nro-acc-who b { color: var(--nro-dark); }
.nro-acc-gold { color: var(--nro-dark); }
.nro-acc-gold b { color: var(--nro-red); }
.nro-acc-dot { display: inline-block; min-width: 14px; padding: 0 3px; border-radius: 7px; background: var(--nro-red); color: #fff; font-size: 9px; line-height: 14px; text-align: center; vertical-align: 1px; }

/* Đã đăng nhập: lưới 2 cột (nhãn | nút) để hàng "Tài khoản" và "Quản trị" thẳng mép nhau */
.nro-acc.is-user { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 4px 8px; padding: 5px; }
.nro-acc-top { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; padding-bottom: 4px; border-bottom: 1px solid var(--nro-rule); }
.nro-acc-row { display: contents; }
.nro-acc-label { color: var(--nro-dark); font-weight: 700; }
/* Nút chia đều bề ngang; hết chỗ thì tự xuống dòng thay vì tràn */
.nro-acc-btns { display: flex; flex-wrap: wrap; gap: 3px; }
.nro-acc-btns > a, .nro-acc-btns > button {
	flex: 1 1 0; min-width: max-content; padding: 3px 6px; border: 1px solid var(--nro-rule); border-radius: 3px;
	background: var(--nro-box-2); color: var(--nro-link); font-weight: 700; text-align: center; white-space: nowrap;
}
.nro-acc-btns > a:hover, .nro-acc-btns > button:hover { background: var(--nro-cream); color: var(--nro-dark); text-decoration: none; }
.nro-acc-btns > .is-out { color: var(--nro-red); }
.nro-acc-btns > .is-main { border-color: var(--nro-cell); background: var(--nro-cell); color: #fff; }
.nro-acc-btns > .is-main:hover { border-color: var(--nro-dark); background: var(--nro-dark); color: #fff; }

/* Khách: 1 cột — lời chào căn giữa, hàng nút bên dưới */
.nro-acc.is-guest { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 5px; }
.nro-acc.is-guest .nro-acc-top { justify-content: center; }
.acct-badge { margin-left: 3px; padding: 0 4px; border-radius: 3px; background: var(--nro-dark); color: #fff; font-size: 9px; font-weight: 700; vertical-align: 1px; }

/* Nội dung chính: các khối xếp chồng, lộ nền cam đậm ở khe 3px */
.nro-main { position: relative; padding: 0 0 3px; }
.nro-main > .body { width: 100%; }
.ui-page { font: 9pt/1.45 var(--font); color: #000; text-align: left; }
.ui-page img { margin-bottom: 0; }

/* Tiêu đề trang con: một khối cam nhạt với chữ đỏ như tiêu đề khối trang gốc */
.ui-page-title {
	display: block; margin: 0 0 3px; padding: 5px; border-bottom: 1px solid var(--nro-rule); background: var(--nro-box);
	font: 700 15px/1.3 var(--font); color: var(--nro-title); text-transform: none; text-shadow: none;
}
.ui-page-title .ui-i { display: none; }
.ui-page-sub { margin: -3px 0 3px; padding: 0 5px 5px; background: var(--nro-box); font-size: 9pt; color: var(--text-2); }
.ui-display { font-weight: 700; }

/* Tiêu đề khu kiểu cũ (trang cũ còn dùng) */
.sec-head { margin: 0 0 3px; padding: 5px; background: var(--nro-box); text-align: left; }
.sec-kicker { display: none; }
.sec-title { margin: 0; font: 700 15px/1.3 var(--font); color: var(--nro-title); text-transform: none; text-shadow: none; }
.sec-desc { margin: 3px 0 0; font-size: 9pt; color: var(--text-2); }

/* Ảnh banner dưới menu (trang chủ) */
.nro-banner { display: block; width: 100%; margin: 0 0 3px; }
.nro-banner img { display: block; width: 100%; height: auto; }

/* ── 4. KHỐI NỘI DUNG ─────────────────────────────────────────────── */
/* <section class="box"><div class="box-title"><h4>Tiêu đề</h4></div><div class="box-body">…</div></section> */
.box, .ui-card { position: relative; margin: 0 0 3px; padding: 3px 5px 5px; background: var(--nro-box); color: #000; }
.box img { max-width: 100% !important; }
.box-title, .ui-card-head {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	margin: 0 0 3px; padding: 0 0 1px; border-bottom: 1px solid var(--nro-rule); background: none;
}
.box-title h1, .box-title h2, .box-title h3, .box-title h4, .ui-card-title {
	display: flex; align-items: center; gap: 5px; margin: .2em 0; font: 700 15px/1.3 var(--font); color: var(--nro-title);
}
.box-title small, .box-title a { font-size: 9pt; font-weight: 400; }
.ui-card-title .ui-i { display: none; }
.box-body, .ui-card-body { padding: 2px 2px 2px 0; }
.box-body > :last-child, .ui-card-body > :last-child { margin-bottom: 0; }
.ui-card-foot { margin-top: 5px; padding-top: 4px; border-top: 1px solid var(--nro-rule); }
.box-date { float: right; margin-top: -13px; font-size: 9px; font-style: italic; }
/* Chữ đỏ căn giữa ("Cơ Bản", "VIP") */
.box-red { margin: 0 0 -4px; color: red; text-align: center; }
/* Tiêu đề mục con xanh đậm (trang Giới thiệu) */
.box-sub { margin: 10px 0 4px; color: var(--nro-blue); font-weight: 700; }
.box-lead { font-size: medium; font-weight: 700; }

/* ── 5. NÚT ───────────────────────────────────────────────────────── */
.btn, .ui-btn, a.btn, a.ui-btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
	height: 28px; padding: 0 12px; border: 1px solid var(--nro-border); border-radius: var(--r-btn);
	background: linear-gradient(180deg, #ffe0b3 0%, #ffc47a 100%); color: var(--nro-dark);
	font: 700 9pt/1 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.btn:hover, .ui-btn:hover, a.btn:hover, a.ui-btn:hover { filter: brightness(1.05); text-decoration: none; }
.btn:active, .ui-btn:active { transform: translateY(1px); }
.btn:disabled, .ui-btn:disabled, .btn.is-disabled, .ui-btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; filter: grayscale(.4); }
.btn .ui-i, .ui-btn .ui-i { width: 14px; height: 14px; }

/* Cam đỏ — hành động chính */
.btn-primary, .ui-btn-primary, a.btn-primary, a.ui-btn-primary { background: var(--g-energy); border-color: #9a2a00; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.btn-primary:hover, .ui-btn-primary:hover, a.btn-primary:hover, a.ui-btn-primary:hover { color: #fff; }
/* Vàng — nạp, nhận quà */
.btn-gold, .ui-btn-gold, a.btn-gold, a.ui-btn-gold { background: var(--g-gold); border-color: #a86a00; color: var(--nro-dark); }
.btn-gold:hover, .ui-btn-gold:hover, a.btn-gold:hover, a.ui-btn-gold:hover { color: var(--nro-dark); }
/* Xanh — hành động phụ nổi bật */
.btn-sky, a.btn-sky { background: var(--g-sky); border-color: #2a5f86; color: #fff; }
.btn-sky:hover, a.btn-sky:hover { color: #fff; }
/* Nâu nhạt — hành động phụ */
.btn-ghost, a.btn-ghost, .ui-btn-light, a.ui-btn-light { background: var(--nro-cream); border-color: var(--nro-rule); color: var(--nro-dark); }
.btn-ghost:hover, a.btn-ghost:hover, .ui-btn-light:hover, a.ui-btn-light:hover { color: var(--nro-dark); }
.ui-btn-danger, a.ui-btn-danger { background: #ffd9d9; border-color: var(--nro-red); color: var(--nro-red); }
.ui-btn-danger:hover, a.ui-btn-danger:hover { color: var(--nro-red); }

.btn-lg, .ui-btn-lg, a.btn-lg, a.ui-btn-lg { height: 34px; padding: 0 18px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.btn-sm, .ui-btn-sm, a.btn-sm, a.ui-btn-sm { height: 24px; padding: 0 8px; font-size: 11px; }
.btn-block, .ui-btn-block, a.btn-block, a.ui-btn-block { display: flex; width: 100%; }

/* ── 6. THÀNH PHẦN ui-* ───────────────────────────────────────────── */
/* Form */
.ui-field { margin-bottom: 8px; }
.ui-label { display: block; margin-bottom: 3px; font-weight: 700; color: var(--nro-dark); }
.ui-input, .ui-select, .ui-textarea,
input.ui-input, select.ui-select, textarea.ui-textarea {
	display: block; width: 100%; height: 28px; padding: 0 6px;
	border: 1px solid var(--nro-rule); border-radius: 4px; background: #fff;
	color: #000; font: 13px var(--font); outline: none;
}
select.ui-select, .ui-select { padding-right: 24px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23561d00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; background-size: 12px; }
select option { background: #fff; color: #000; }
.ui-textarea, textarea.ui-textarea { height: auto; min-height: 80px; padding: 5px 6px; line-height: 1.45; resize: vertical; }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus,
input.ui-input:focus, select.ui-select:focus, textarea.ui-textarea:focus { border-color: var(--nro-dark); box-shadow: 0 0 0 2px rgba(86, 29, 0, .18); }
.ui-input::placeholder, .ui-textarea::placeholder { color: #9a8070; }
.ui-help { margin-top: 3px; font-size: 11px; color: var(--text-3); }
.ui-row { display: flex; gap: 6px; align-items: center; }
.ui-row > .ui-grow { flex: 1; min-width: 0; }
.ui-check { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ui-check input { width: 14px; height: 14px; margin: 0; accent-color: var(--nro-cell); }

/* Thông báo (màu theo .info / .f của web gốc) */
.ui-alert { display: flex; align-items: flex-start; gap: 6px; padding: 5px 7px; border: 1px solid; border-radius: 4px; line-height: 1.45; }
.ui-alert .ui-i { margin-top: 1px; }
.ui-alert-info { background: #f9f0da; border-color: #ffb03a; color: #000; }
.ui-alert-success { background: #cefb76; border-color: #52c22b; color: #0b3d00; }
.ui-alert-error { background: #ffe0e0; border-color: var(--nro-red); color: #8a0020; }
.ui-alert-warn { background: #fff3b0; border-color: #e0a000; color: #5a3a00; }

/* Bảng */
.ui-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th { padding: 3px 5px; border: 1px solid var(--nro-rule); background: var(--nro-cell); color: #fff; font-weight: 700; text-align: left; white-space: nowrap; }
.ui-table td { padding: 3px 5px; border: 1px solid var(--nro-rule); vertical-align: middle; color: #000; }
.ui-table tbody tr:nth-child(odd) td { background: #ffc47a; }
.ui-table tbody tr:nth-child(even) td { background: #ffb961; }
.ui-table tbody tr:hover td { background: #ffd49b; }

/* Tab: như ô menu */
.ui-tabs { display: flex; gap: 4px; margin: 0 0 5px; }
.ui-tab, a.ui-tab {
	flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0;
	padding: 2px; border: 3px solid var(--nro-cell); border-radius: 0; background: var(--nro-cell);
	color: #fff; font: 400 9pt/1.4 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ui-tab:hover, a.ui-tab:hover { color: #fff; text-decoration: underline; }
.ui-tab.is-active, a.ui-tab.is-active, .ui-tab.is-active:hover { border-color: #ffaf4d; background: var(--nro-cream); color: var(--nro-dark); }

/* Nhãn nhỏ */
.ui-badge { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; border: 1px solid var(--nro-rule); border-radius: 3px; background: var(--nro-cream); color: var(--nro-dark); font-size: 10px; font-weight: 700; line-height: 1.5; }
.ui-badge-green { background: #cefb76; border-color: #52c22b; color: #0b3d00; }
.ui-badge-red { background: #ffe0e0; border-color: var(--nro-red); color: var(--nro-red); }
.ui-badge-gray { background: #eee; border-color: #bbb; color: #444; }
.ui-badge-gold { background: #fff3b0; border-color: #e0a000; color: #5a3a00; }
.ui-badge-hot { background: var(--nro-red); border-color: var(--nro-red); color: #fff; }

/* Văn bản dài (bài viết, giới thiệu) */
.ui-prose { font-size: 9pt; line-height: 1.5; color: #000; overflow-wrap: anywhere; }
.ui-prose p { margin: 0 0 .8em; }
.ui-prose h2, .ui-prose h3, .ui-prose h4 { margin: 10px 0 5px; font-size: 13px; color: var(--nro-blue); }
.ui-prose ul, .ui-prose ol { margin: 0 0 .8em; padding-left: 20px; }
.ui-prose li { margin: 0 0 2px; }
.ui-prose img { max-width: 100%; height: auto; margin: 4px 0; }
.ui-prose a { color: var(--nro-link); text-decoration: underline; }
.ui-prose blockquote { margin: 0 0 .8em; padding: 4px 8px; border-left: 3px solid var(--nro-cell); background: #f9f0da; }
.ui-prose table { width: 100%; margin: 0 0 .8em; }
.ui-prose th, .ui-prose td { padding: 3px 5px; border: 1px solid var(--nro-rule); }
.ui-prose > :last-child { margin-bottom: 0; }

/* Phân trang (kiểu pagelink / pagecurrent của web gốc) */
.ui-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin: 5px 0 0; }
.ui-pager a, .ui-pager span, .ui-pager button {
	display: inline-block; min-width: 20px; padding: 2px 5px; border: 2px solid #e5e5e5; border-radius: 0;
	background: #fff; color: #f00; font: 700 10px/1.3 var(--font); text-align: center; text-decoration: none;
}
.ui-pager a:hover, .ui-pager button:hover { background: var(--nro-dark); color: #fff; }
.ui-pager .is-active { background: var(--nro-dark); color: #fff; }

/* Trạng thái trống */
.ui-empty { padding: 14px 8px; text-align: center; color: var(--text-3); }
.ui-empty .ui-i { display: block; width: 24px; height: 24px; margin: 0 auto 5px; color: var(--nro-rule); }

/* ── 7. CHÂN TRANG ────────────────────────────────────────────────── */
.nro-foot { position: relative; min-height: 76px; margin: 0 0 10px; padding: 10px 12px; border-radius: 0 0 15px 15px; background: var(--nro-frame); color: #fff; text-align: center; }
.nro-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; margin: 0 0 6px; }
.nro-foot-links a, .nro-foot-links button { padding: 0; border: 0; background: none; color: #fff; font-weight: 700; }
.nro-foot-links a:hover, .nro-foot-links button:hover { text-decoration: underline; }
.nro-foot-info { margin: 0; font-size: 10px; color: #ffe2c4; }
.nro-foot-info b { color: #fff; }
.nro-copy { width: 95%; margin: 0 auto; color: #000; font-size: 10px; text-align: center; }
.nro-copy p { margin: 0 0 6px; }
.nro-copy a { color: #000; }

/* ── 8. MODAL GIFTCODE + NÚT LÊN ĐẦU ──────────────────────────────── */
@keyframes gc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gc-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes gc-pop-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
@keyframes gc-pop-out { from { opacity: 1; } to { opacity: 0; transform: scale(.97); } }
@keyframes gc-spin { to { transform: rotate(360deg); } }
@keyframes gc-ripple { to { transform: scale(2.5); opacity: 0; } }
@keyframes gc-copy-pop { 50% { transform: scale(1.04); } }
@keyframes gc-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes gc-confetti { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(120px) rotate(720deg); opacity: 0; } }

.gc-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 12px; }
.gc-modal.is-closing .gc-backdrop { animation: gc-fade-out .2s ease forwards; }
.gc-modal.is-closing .gc-dialog { animation: gc-pop-out .2s ease forwards; }
.gc-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); animation: gc-fade-in .2s ease both; }
.gc-dialog {
	position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 500px; max-height: 86vh; overflow: hidden;
	border: 2px solid var(--nro-border); border-radius: 12px; background: var(--nro-cream);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .45); animation: gc-pop-in .25s ease both;
}
.gc-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--nro-frame); color: #fff; font: 700 14px/1.2 var(--font); }
.gc-title { display: flex; align-items: center; gap: 6px; }
.gc-gift-icon { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gc-close { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; background: rgba(0, 0, 0, .15); color: #fff; font-size: 18px; line-height: 1; }
.gc-close:hover { background: rgba(0, 0, 0, .3); }
.gc-body { padding: 8px; overflow-y: auto; }
.gc-loading { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; color: var(--text-3); }
.gc-spinner { width: 26px; height: 26px; border: 3px solid rgba(146, 76, 49, .25); border-top-color: var(--nro-cell); border-radius: 50%; animation: gc-spin .8s linear infinite; }
.gc-empty { padding: 20px; text-align: center; color: var(--text-3); }
.gc-card { position: relative; margin-bottom: 5px; padding: 6px; overflow: hidden; background: var(--nro-box); }
.gc-code-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.gc-code {
	position: relative; flex: 1; min-width: 0; overflow: hidden; padding: 5px 8px; cursor: pointer; user-select: all; word-break: break-all;
	border: 1px dashed var(--nro-cell); border-radius: 4px; background: #fff;
	color: var(--nro-title); font: 700 14px/1.2 var(--font); letter-spacing: .06em;
}
.gc-code:hover { border-style: solid; }
.gc-code.copied { animation: gc-copy-pop .4s ease; border-color: #52c22b; background: #cefb76; color: #0b3d00; }
.gc-code .gc-ripple { position: absolute; border-radius: 50%; background: rgba(255, 119, 0, .3); transform: scale(0); animation: gc-ripple .6s ease-out forwards; pointer-events: none; }
.gc-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--nro-dark); white-space: nowrap; }
.gc-meta .gc-new { padding: 0 5px; border-radius: 3px; background: var(--nro-red); color: #fff; font-size: 10px; font-weight: 700; }
.gc-meta .gc-out { color: var(--nro-red); font-weight: 700; }
.gc-items { display: flex; flex-wrap: wrap; gap: 4px; }
.gc-item { display: flex; align-items: center; gap: 4px; padding: 2px 6px 2px 3px; border: 1px solid var(--nro-rule); border-radius: 4px; background: var(--nro-cream); font-size: 11px; color: #000; }
.gc-item img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.gc-item .gc-qty { font-weight: 700; color: var(--nro-red); }
.gc-item .gc-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-item img.gc-broken { visibility: hidden; }
.gc-confetti-piece { position: absolute; top: 0; width: 7px; height: 7px; pointer-events: none; animation: gc-confetti 1s ease-in forwards; }
.gc-trigger-active { animation: gc-shake .4s ease; }

/* Nút lên đầu trang: icon nhỏ góc phải như web gốc */
.to-top { position: fixed; right: 2px; bottom: 60px; z-index: 90; padding: 0; border: 0; background: none; opacity: 0; visibility: hidden; transition: opacity .2s ease-out, visibility 0s .2s; }
.to-top.is-on { opacity: 1; visibility: visible; transition: opacity .2s ease-out; }
.to-top:hover { opacity: .8; }
.to-top img { display: block; width: 32px; height: 32px; }

/* Trang cũ còn gắn .reveal: web gốc không có hiệu ứng, hiện luôn */
.reveal { opacity: 1; transform: none; }

@media (max-width: 480px) {
	.nro-menu { gap: 2px; padding: 9px 2px 4px; }
	.nro-menu a { border-width: 2px; font-size: 11px; }
	/* Thanh tài khoản: nhãn nằm trên hàng nút để nút đủ rộng */
	.nro-acc.is-user { grid-template-columns: minmax(0, 1fr); gap: 3px; }
	.nro-acc-label { margin-top: 2px; font-size: 11px; }
}