/*
Theme Name: Nguyễn Tài CID
Theme URI: https://example.com/
Author: Nguyễn Tài
Description: Theme gọn nhẹ hiển thị form lấy Confirmation ID của plugin GetCID Generator, kèm thông báo cho khách và yêu cầu đăng nhập. Tùy chỉnh chữ trong Giao diện > Tùy biến > Trang lấy CID.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: nguyentai-cid
*/

/* ==========================================================================
   Biến màu
   ========================================================================== */
:root {
	--nt-primary: #1d5fd6;
	--nt-primary-dark: #154aad;
	--nt-primary-soft: #e8f0fd;
	--nt-ink: #0f1b2d;
	--nt-muted: #5b6b82;
	--nt-line: #dbe3ee;
	--nt-bg: #f4f7fb;
	--nt-card: #ffffff;
	--nt-ok: #138a4c;
	--nt-warn-bg: #fff6e5;
	--nt-warn-line: #f3d18b;
	--nt-danger: #c62828;
	--nt-radius: 14px;
	--nt-shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 8px 24px rgba(15, 27, 45, .06);
}

/* ==========================================================================
   Nền tảng
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--nt-bg);
	color: var(--nt-ink);
	font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a { color: var(--nt-primary); }
a:hover { color: var(--nt-primary-dark); }
img { max-width: 100%; height: auto; }

.nt-container {
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
	padding: 0 16px;
}

.nt-main { flex: 1 0 auto; padding-bottom: 48px; }

.nt-ico { width: 20px; height: 20px; flex: none; }

/* ==========================================================================
   Nút
   ========================================================================== */
.nt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 20px;
	border-radius: 10px;
	border: 1.5px solid transparent;
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
	white-space: nowrap;
}
.nt-btn--sm { padding: 8px 14px; font-size: 14px; }
.nt-btn--primary { background: var(--nt-primary); color: #fff; }
.nt-btn--primary:hover { background: var(--nt-primary-dark); color: #fff; }
.nt-btn--ghost { background: #fff; color: var(--nt-primary); border-color: var(--nt-line); }
.nt-btn--ghost:hover { border-color: var(--nt-primary); color: var(--nt-primary-dark); }
.nt-btn:focus-visible { outline: 3px solid rgba(29, 95, 214, .35); outline-offset: 2px; }

/* ==========================================================================
   Header
   ========================================================================== */
.nt-header {
	background: #fff;
	border-bottom: 1px solid var(--nt-line);
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .nt-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .nt-header { top: 0; position: relative; } }

.nt-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 64px;
}

.nt-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--nt-ink);
	font-weight: 700;
	font-size: 18px;
}
.nt-brand:hover { color: var(--nt-ink); }
.nt-brand__logo { max-height: 44px; width: auto; display: block; }
.nt-brand__mark {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--nt-primary);
	color: #fff;
	font-size: 12px;
	letter-spacing: .5px;
}

.nt-nav { margin-left: auto; }
.nt-menu {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nt-menu a {
	display: block;
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--nt-muted);
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
}
.nt-menu a:hover,
.nt-menu .current-menu-item > a { color: var(--nt-primary); background: var(--nt-primary-soft); }

@media (max-width: 640px) {
	.nt-header__inner { flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; padding-bottom: 10px; }
	.nt-header__auth { margin-left: auto; }
	.nt-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
	.nt-menu a { padding: 6px 10px; font-size: 14px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.nt-hero {
	background: linear-gradient(135deg, #1d5fd6 0%, #123f94 100%);
	color: #fff;
	padding: 48px 0 88px;
}
.nt-hero__inner { text-align: center; }
.nt-badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .25);
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 14px;
}
.nt-hero__title {
	margin: 0 auto;
	max-width: 720px;
	font-size: clamp(24px, 4.2vw, 36px);
	line-height: 1.25;
	font-weight: 700;
	text-wrap: balance;
}
.nt-hero__sub {
	margin: 12px auto 0;
	max-width: 620px;
	color: rgba(255, 255, 255, .85);
	font-size: 16px;
}

/* ==========================================================================
   Card chung
   ========================================================================== */
.nt-stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: -56px;
	position: relative;
}

.nt-card {
	background: var(--nt-card);
	border: 1px solid var(--nt-line);
	border-radius: var(--nt-radius);
	box-shadow: var(--nt-shadow);
	padding: 24px;
}
@media (max-width: 600px) { .nt-card { padding: 18px; } }

.nt-card__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 700;
}

/* Thông báo */
.nt-notice { border-left: 4px solid var(--nt-primary); }
.nt-notice .nt-card__title { color: var(--nt-primary); }
.nt-notice__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nt-notice__list li { display: flex; gap: 10px; align-items: flex-start; }
.nt-notice__list .nt-ico--check { color: var(--nt-ok); margin-top: 3px; }

/* Cảnh báo cho admin */
.nt-warning { background: var(--nt-warn-bg); border-color: var(--nt-warn-line); }

/* Yêu cầu đăng nhập */
.nt-login { text-align: center; padding: 36px 24px; }
.nt-login__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--nt-primary-soft);
	color: var(--nt-primary);
}
.nt-login__icon svg { width: 26px; height: 26px; }
.nt-login__title { justify-content: center; font-size: 20px; margin-bottom: 8px; }
.nt-login__text { color: var(--nt-muted); max-width: 520px; margin: 0 auto 20px; }
.nt-login__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Thanh tài khoản */
.nt-account {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 20px;
	background: var(--nt-card);
	border: 1px solid var(--nt-line);
	border-radius: var(--nt-radius);
	box-shadow: var(--nt-shadow);
	padding: 14px 20px;
}
.nt-account__who { display: flex; flex-direction: column; line-height: 1.3; }
.nt-account__hello { color: var(--nt-muted); font-size: 13px; }
.nt-account__balance {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 10px;
	background: var(--nt-primary-soft);
	color: var(--nt-primary-dark);
	font-size: 14px;
}
.nt-account__balance strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.nt-account__balance.is-empty { background: #fdecec; color: var(--nt-danger); }
.nt-account__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 600px) { .nt-account__actions { margin-left: 0; width: 100%; } .nt-account__actions .nt-btn { flex: 1; } }

/* Hướng dẫn */
.nt-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: none; }
.nt-steps__list li { display: flex; gap: 12px; align-items: flex-start; }
.nt-steps__num {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--nt-primary-soft);
	color: var(--nt-primary);
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 14px;
}

/* ==========================================================================
   Form của plugin GetCID bên trong theme
   ========================================================================== */
.nt-form #gcid_form,
.nt-form #gcid_second_form {
	border: 0;
	padding: 0;
	border-radius: 0;
}
.nt-form .gcid_user_cid_balance { display: none !important; } /* đã hiển thị ở thanh tài khoản */
.nt-form label { font-weight: 600; }

.nt-form #gcid_form .gcid_int_input,
.nt-form #gcid_form .gcid_conf_input {
	border: 1.5px solid var(--nt-line);
	border-right: 0;
	border-radius: 10px 0 0 10px !important;
	padding: 12px 14px !important;
	font-family: inherit;
	min-height: 48px;
	transition: border-color .15s;
}
.nt-form #gcid_form .gcid_int_input:focus,
.nt-form #gcid_form .gcid_conf_input:focus { border-color: var(--nt-primary); }

.nt-form #gcid_form .gcid_inst_submit_btn,
.nt-form #gcid_form .gcid_cid_copy_submit {
	border-radius: 0 10px 10px 0 !important;
	min-height: 48px;
	font-family: inherit;
}

.nt-form .gcid_view_requests { margin-top: 10px; font-size: 14px; color: var(--nt-muted); }
.nt-form .gcid_inst_error:not(:empty) { margin-top: 8px; }

/* Ghi đè màu nút bằng màu theme (tắt được trong Tùy biến) */
.nt-force-colors .nt-form #gcid_form .gcid_inst_submit_btn,
.nt-force-colors .nt-form #gcid_form .gcid_cid_copy_submit,
.nt-force-colors .nt-form #gcid_second_form button,
.nt-force-colors .nt-form .gcid_iid_upload,
.nt-force-colors .nt-form .gcid_iid_upload img {
	background-color: var(--nt-primary) !important;
	border-color: var(--nt-primary) !important;
	color: #fff !important;
}
.nt-force-colors .nt-form #gcid_form .gcid_inst_submit_btn:hover,
.nt-force-colors .nt-form #gcid_form .gcid_cid_copy_submit:hover {
	background-color: var(--nt-primary-dark) !important;
	border-color: var(--nt-primary-dark) !important;
}
.nt-force-colors .nt-form label { color: var(--nt-ink) !important; }

@media (max-width: 600px) {
	body .nt-form #gcid_form {
		border: 0 !important;
		padding: 0 !important;
		border-radius: 0 !important;
	}
	body .nt-form #gcid_form .gcid_int_input,
	body .nt-form #gcid_form .gcid_conf_input {
		border: 1.5px solid var(--nt-line) !important;
		border-radius: 10px !important;
	}
	body .nt-form #gcid_form .gcid_int_input:focus { border-color: var(--nt-primary) !important; }
	body .nt-form #gcid_form .gcid_inst_submit_btn,
	body .nt-form #gcid_form .gcid_cid_copy_submit { border-radius: 10px !important; }
	body .nt-form #gcid_form .gcid_istl_label { flex-direction: column; }
}

/* ==========================================================================
   Trang thường / WooCommerce
   ========================================================================== */
.nt-page { padding-top: 32px; }
.nt-page__title { margin: 0 0 16px; font-size: 26px; line-height: 1.3; }
.nt-page__title a { color: inherit; text-decoration: none; }
.nt-content > *:last-child { margin-bottom: 0; }

.nt-content input[type="text"],
.nt-content input[type="email"],
.nt-content input[type="password"],
.nt-content input[type="tel"],
.nt-content input[type="number"],
.nt-content select,
.nt-content textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid var(--nt-line);
	border-radius: 10px;
	font: inherit;
	background: #fff;
}
.nt-content input:focus,
.nt-content select:focus,
.nt-content textarea:focus { outline: none; border-color: var(--nt-primary); }

.nt-content .button,
.nt-content button[type="submit"]:not(.gcid_inst_submit_btn):not(.gcid_conf_submit_btn) {
	display: inline-block;
	background: var(--nt-primary);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 11px 20px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
.nt-content .button:hover { background: var(--nt-primary-dark); color: #fff; }

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.woocommerce-MyAccount-navigation a { display: block; padding: 7px 12px; border-radius: 8px; background: var(--nt-bg); text-decoration: none; font-size: 14px; }
.woocommerce-MyAccount-navigation .is-active a { background: var(--nt-primary); color: #fff; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	list-style: none;
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--nt-primary-soft);
	border-left: 4px solid var(--nt-primary);
}
.woocommerce-error { background: #fdecec; border-color: var(--nt-danger); }

/* ==========================================================================
   Footer
   ========================================================================== */
.nt-footer {
	flex-shrink: 0;
	border-top: 1px solid var(--nt-line);
	background: #fff;
	color: var(--nt-muted);
	font-size: 14px;
}
.nt-footer__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 16px;
	padding-top: 18px;
	padding-bottom: 18px;
}
.nt-footer a { text-decoration: none; font-weight: 600; }