/* =============================================================
KhoWeb Affiliate — Frontend Dashboard CSS
Professional Red & Black theme — Coolmate-inspired
============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; }

/* ── Root variables ── */
:root {
	--ka-primary:      #9d1404;
	--ka-primary-dark: #7a0f03;
	--ka-primary-light:#c41a06;
	--ka-primary-bg:   #fff4f3;
	--ka-black:        #1a1a1a;
	--ka-dark:         #2d2d2d;
	--ka-gray-dark:    #555;
	--ka-gray:         #888;
	--ka-gray-light:   #bbb;
	--ka-border:       #e5e5e5;
	--ka-bg:           #f8f8f8;
	--ka-surface:      #ffffff;
	--ka-gold:         #e8a000;
	--ka-green:        #16a34a;
	--ka-red-alert:    #dc2626;
	--ka-text:         #1a1a1a;
	--ka-muted:        #888;
	--ka-radius:       10px;
	--ka-radius-lg:    16px;
	--ka-shadow:       0 2px 12px rgba(0,0,0,.07);
	--ka-shadow-md:    0 4px 24px rgba(0,0,0,.10);
}

/* ── Wrap ── */
.ka-fe-wrap {
	display: flex;
	gap: 0;
	min-height: 80vh;
	background: var(--ka-bg);
	font-family: 'Inter', sans-serif;
	color: var(--ka-text);
	border-radius: var(--ka-radius-lg);
	overflow: hidden;
	box-shadow: var(--ka-shadow-md);
	border: 1px solid var(--ka-border);
}

/* ── Sidebar ── */
.ka-fe-sidebar {
	width: 260px;
	flex-shrink: 0;
	background: var(--ka-black);
	display: flex;
	flex-direction: column;
	padding: 0 0 20px;
}

/* Sidebar header bar */
.ka-fe-sidebar::before {
	content: '';
	display: block;
	height: 4px;
	background: linear-gradient(90deg, var(--ka-primary), var(--ka-primary-light));
	flex-shrink: 0;
}

.ka-fe-user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 22px 20px 20px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.ka-fe-avatar {
	border-radius: 50%;
	border: 3px solid var(--ka-primary);
	flex-shrink: 0;
}
.ka-fe-user-info { display: flex; flex-direction: column; }
.ka-fe-user-info strong { font-size: 14px; font-weight: 600; color: #fff; }
.ka-fe-ref { font-size: 11px; color: var(--ka-primary-light); margin-top: 3px; display: flex; align-items: center; gap: 4px; }

.ka-fe-nav { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; }
.ka-fe-nav-item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255,255,255,.55);
	text-decoration: none;
	transition: all .18s ease;
	position: relative;
}
.ka-fe-nav-item i { font-size: 14px; width: 16px; flex-shrink: 0; }
.ka-fe-nav-item:hover {
	background: rgba(255,255,255,.07);
	color: rgba(255,255,255,.9);
	text-decoration: none;
}
.ka-fe-nav-item.active {
	background: var(--ka-primary);
	color: #fff;
	font-weight: 600;
}
.ka-fe-nav-item.active::before {
	content: '';
	position: absolute;
	left: 0; top: 25%; bottom: 25%;
	width: 3px;
	background: #fff;
	border-radius: 0 3px 3px 0;
}

.ka-fe-ref-box {
	padding: 14px 16px;
	margin: 0 12px;
	background: rgba(255,255,255,.06);
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,.08);
}
.ka-fe-ref-box small { font-size: 11px; color: rgba(255,255,255,.4); display: block; margin-bottom: 8px; }
.ka-fe-ref-link { display: flex; gap: 6px; }
.ka-fe-ref-link input {
	flex: 1; min-width: 0;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 6px;
	color: rgba(255,255,255,.8);
	font-size: 11px;
	padding: 7px 8px;
	font-family: 'Inter', sans-serif;
}

/* ── Main content ── */
.ka-fe-main {
	flex: 1;
	min-width: 0;
	padding: 28px 30px;
	overflow-y: auto;
	background: var(--ka-bg);
}

/* ── Section header ── */
.ka-fe-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 10px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--ka-border);
}
.ka-fe-section-header h2 {
	font-size: 19px;
	font-weight: 700;
	color: var(--ka-black);
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}
.ka-fe-section-header h2 i { color: var(--ka-primary); }

/* ── KPI Grid ── */
.ka-fe-kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
	gap: 14px;
	margin-bottom: 24px;
}
.ka-fe-kpi {
	background: var(--ka-surface);
	border: 1px solid var(--ka-border);
	border-radius: var(--ka-radius);
	padding: 20px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	text-align: center;
	transition: transform .18s, box-shadow .18s, border-color .18s;
	position: relative;
	overflow: hidden;
}
.ka-fe-kpi::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--ka-primary);
	transform: scaleX(0);
	transition: transform .2s;
}
.ka-fe-kpi:hover { transform: translateY(-3px); box-shadow: var(--ka-shadow-md); border-color: #ddd; }
.ka-fe-kpi:hover::after { transform: scaleX(1); }
.ka-fe-kpi i { font-size: 20px; color: var(--ka-primary); }
.ka-fe-kpi span { font-size: 22px; font-weight: 800; color: var(--ka-black); letter-spacing: -0.5px; }
.ka-fe-kpi label { font-size: 11px; color: var(--ka-muted); font-weight: 500; }
.ka-fe-kpi-gold i  { color: var(--ka-gold); }
.ka-fe-kpi-gold span { color: var(--ka-gold); }
.ka-fe-kpi-green i  { color: var(--ka-green); }
.ka-fe-kpi-green span { color: var(--ka-green); }

/* ── Cards ── */
.ka-fe-card {
	background: var(--ka-surface);
	border: 1px solid var(--ka-border);
	border-radius: var(--ka-radius);
	padding: 22px;
	margin-bottom: 18px;
	box-shadow: var(--ka-shadow);
}
.ka-fe-card h3 {
	font-size: 14px;
	font-weight: 700;
	color: var(--ka-black);
	margin: 0 0 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ka-border);
}
.ka-fe-card h3 i { color: var(--ka-primary); }

/* ── Chart ── */
.ka-fe-chart-box {
	background: var(--ka-surface);
	border: 1px solid var(--ka-border);
	border-radius: var(--ka-radius);
	padding: 22px;
	margin-bottom: 18px;
	box-shadow: var(--ka-shadow);
}
.ka-fe-chart-box h3 {
	font-size: 14px;
	font-weight: 700;
	color: var(--ka-black);
	margin: 0 0 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.ka-fe-chart-box h3 i { color: var(--ka-primary); }

/* ── Tables ── */
.ka-fe-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ka-fe-table thead { background: #f4f4f4; }
.ka-fe-table th {
	padding: 10px 14px;
	text-align: left;
	color: var(--ka-gray-dark);
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
	border-bottom: 2px solid var(--ka-border);
	white-space: nowrap;
}
.ka-fe-table td {
	padding: 13px 14px;
	border-bottom: 1px solid var(--ka-border);
	color: var(--ka-dark);
	vertical-align: middle;
}
.ka-fe-table tr:last-child td { border-bottom: none; }
.ka-fe-table tr:hover td { background: var(--ka-primary-bg); }
.ka-fe-empty { text-align: center; padding: 36px !important; color: var(--ka-muted); font-size: 13px; }

/* ── Link cards ── */
.ka-fe-link-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.ka-fe-link-card {
	background: var(--ka-surface);
	border: 1px solid var(--ka-border);
	border-radius: var(--ka-radius);
	padding: 20px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	box-shadow: var(--ka-shadow);
}
.ka-fe-link-card-full { grid-column: 1 / -1; }
.ka-fe-link-card-icon {
	width: 42px;
	height: 42px;
	background: var(--ka-primary-bg);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	color: var(--ka-primary);
	flex-shrink: 0;
}
.ka-fe-link-card-body { flex: 1; min-width: 0; }
.ka-fe-link-card-body strong { font-size: 13px; font-weight: 700; color: var(--ka-black); display: block; margin-bottom: 10px; }

/* ── Copy row ── */
.ka-fe-copy-row { display: flex; gap: 6px; }
.ka-fe-copy-row input {
	flex: 1; min-width: 0;
	background: var(--ka-bg);
	border: 1.5px solid var(--ka-border);
	border-radius: 7px;
	color: var(--ka-dark);
	font-size: 12px;
	padding: 8px 10px;
	font-family: 'Inter', sans-serif;
	transition: border-color .15s;
}
.ka-fe-copy-row input:focus { outline: none; border-color: var(--ka-primary); }
.ka-copy-btn {
	background: var(--ka-primary-bg);
	border: 1.5px solid rgba(157,20,4,.2);
	border-radius: 7px;
	color: var(--ka-primary);
	cursor: pointer;
	padding: 0px 11px;
	font-size: 13px;
	transition: all .15s;
	flex-shrink: 0;
}
.ka-copy-btn:hover { background: var(--ka-primary); color: #fff; border-color: var(--ka-primary); }

button.ka-share-box__copy {
	background: var(--ka-primary);
	color: #fff;
	height: 39px;
}
.ka-share-box__row { display: flex; align-items: flex-start; }

/* ── Gen row ── */
.ka-fe-gen-row { display: flex; gap: 8px; margin-bottom: 10px; }
.ka-fe-gen-row .ka-fe-input { flex: 1; }

/* ── Buttons ── */
.ka-fe-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 22px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	text-decoration: none;
	transition: all .18s ease;
	letter-spacing: .01em;
}
.ka-fe-btn-primary {
	background: var(--ka-primary);
	color: #fff;
	box-shadow: 0 4px 14px rgba(157,20,4,.25);
}
.ka-fe-btn-primary:hover {
	background: var(--ka-primary-dark);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(157,20,4,.35);
	color: #fff;
	text-decoration: none;
}
.ka-fe-btn-outline {
	background: transparent;
	color: var(--ka-primary);
	border: 1.5px solid var(--ka-primary);
}
.ka-fe-btn-outline:hover { background: var(--ka-primary); color: #fff; }
.ka-fe-btn-block { width: 100%; justify-content: center; }

/* ── Input/Form ── */
.ka-fe-input {
	background: var(--ka-surface);
	border: 1.5px solid var(--ka-border);
	border-radius: 8px;
	color: var(--ka-dark);
	font-size: 13px;
	padding: 10px 14px;
	font-family: 'Inter', sans-serif;
	transition: border .18s;
	width: 100%;
}
.ka-fe-input:focus { outline: none; border-color: var(--ka-primary); box-shadow: 0 0 0 3px rgba(157,20,4,.08); }
.ka-fe-input::placeholder { color: var(--ka-gray-light); }

.ka-fe-form { display: flex; flex-direction: column; gap: 16px; }
.ka-fe-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ka-fe-form-group { display: flex; flex-direction: column; gap: 6px; }
.ka-fe-form-group label {
	font-size: 12px;
	font-weight: 700;
	color: var(--ka-gray-dark);
	display: flex;
	align-items: center;
	gap: 5px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ── Balance hero ── */
.ka-fe-balance-hero {
	background: linear-gradient(135deg, var(--ka-primary) 0%, var(--ka-primary-dark) 100%);
	border-radius: var(--ka-radius-lg);
	padding: 36px 32px;
	margin-bottom: 24px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.ka-fe-balance-hero::before {
	content: '';
	position: absolute;
	top: -40px; right: -40px;
	width: 180px; height: 180px;
	background: rgba(255,255,255,.07);
	border-radius: 50%;
}
.ka-fe-balance-hero::after {
	content: '';
	position: absolute;
	bottom: -60px; left: -30px;
	width: 220px; height: 220px;
	background: rgba(255,255,255,.05);
	border-radius: 50%;
}
.ka-fe-balance-amount {
	font-size: 48px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -1px;
	margin-bottom: 6px;
	position: relative;
	z-index: 1;
}
.ka-fe-balance-label {
	color: rgba(255,255,255,.7);
	font-size: 13px;
	margin-bottom: 22px;
	position: relative;
	z-index: 1;
}
.ka-fe-balance-info {
	display: flex;
	gap: 24px;
	margin-bottom: 20px;
	font-size: 13px;
	color: rgba(255,255,255,.7);
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

/* ── Product links ── */
.ka-fe-product-links { display: flex; flex-direction: column; gap: 10px; }
.ka-fe-product-link-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ka-fe-product-link-row span { min-width: 180px; font-size: 13px; color: var(--ka-dark); }
.ka-fe-product-link-row .ka-fe-copy-row { flex: 1; min-width: 0; }

/* ── Banner grid ── */
.ka-fe-banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.ka-fe-banner-item {
	background: var(--ka-surface);
	border: 1px solid var(--ka-border);
	border-radius: var(--ka-radius);
	overflow: hidden;
	box-shadow: var(--ka-shadow);
	transition: box-shadow .18s;
}
.ka-fe-banner-item:hover { box-shadow: var(--ka-shadow-md); }
.ka-fe-banner-preview { width: 100%; height: 160px; object-fit: cover; }
.ka-fe-banner-meta { padding: 12px 16px 4px; display: flex; align-items: center; justify-content: space-between; }
.ka-fe-banner-meta strong { font-size: 13px; color: var(--ka-black); font-weight: 700; }
.ka-fe-banner-item .ka-fe-form-group { padding: 0 16px 12px; }

/* ── Range buttons ── */
.ka-fe-range { display: flex; gap: 5px; }
.ka-fe-range-btn {
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	color: var(--ka-gray);
	background: var(--ka-surface);
	border: 1.5px solid var(--ka-border);
	transition: all .15s;
}
.ka-fe-range-btn:hover { color: var(--ka-primary); border-color: var(--ka-primary); text-decoration: none; }
.ka-fe-range-btn.active { background: var(--ka-primary); color: #fff; border-color: var(--ka-primary); }
a.ka-fe-range-btn:hover { color: var(--ka-primary); }

/* ── Pagination ── */
.ka-fe-pagination { display: flex; gap: 5px; margin-top: 18px; flex-wrap: wrap; }
.ka-fe-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border-radius: 7px;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	color: var(--ka-gray-dark);
	background: var(--ka-surface);
	border: 1.5px solid var(--ka-border);
	transition: all .15s;
}
.ka-fe-page-btn:hover { border-color: var(--ka-primary); color: var(--ka-primary); text-decoration: none; }
.ka-fe-page-btn.active { background: var(--ka-primary); color: #fff; border-color: var(--ka-primary); }

/* ── Status badges ── */
.ka-status { display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 700; border-radius: 20px; letter-spacing: .02em; }
.ka-status-approved { background: #d1fae5; color: #065f46; }
.ka-status-pending  { background: #fef3c7; color: #92400e; }
.ka-status-cancelled,.ka-status-rejected { background: #fee2e2; color: #991b1b; }
.ka-status-active   { background: #d1fae5; color: #065f46; }
.ka-status-inactive { background: #fee2e2; color: #991b1b; }
.ka-status-paid     { background: #dbeafe; color: #1e40af; }

/* ── Notices ── */
.ka-fe-notice {
	background: var(--ka-surface);
	border: 1.5px solid var(--ka-border);
	border-radius: var(--ka-radius);
	padding: 16px 20px;
	font-size: 13.5px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.ka-fe-pending { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.ka-fe-error   { border-color: #fca5a5; background: #fff1f1; color: #991b1b; }
.ka-fe-success { border-color: #86efac; background: #f0fdf4; color: #15803d; }

/* ── Auth ── */
.ka-fe-auth-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 480px;
	padding: 10px;
	background: var(--ka-bg);
}
.ka-fe-auth-divider {
    display: flex;
    align-items: center;
    justify-content: center;
}
a.ka-fe-btn.ka-fe-btn-block {
    background: #9d1404;
    color: #fff;
    margin-left: 10px;
	width: auto;
}
.ka-fe-auth-card {
	background: var(--ka-surface);
	border: 1px solid var(--ka-border);
	border-radius: var(--ka-radius-lg);
	padding: 40px;
	width: 100%;
	max-width: 440px;
	box-shadow: var(--ka-shadow-md);
}
.ka-fe-auth-logo {
	font-size: 48px;
	color: var(--ka-primary);
	text-align: center;
	margin-bottom: 16px;
}
.ka-fe-auth-card h2 {
	font-size: 22px;
	font-weight: 800;
	color: var(--ka-black);
	text-align: center;
	margin: 0 0 8px;
}
.ka-fe-auth-sub { font-size: 13px; color: var(--ka-muted); text-align: center; margin: 0 0 24px; }
.ka-fe-auth-divider { text-align: center; color: var(--ka-muted); font-size: 12px; margin: 16px 0; }

/* ── WooCommerce My Account Affiliate subnav ── */
.ka-wc-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 14px 0 18px;
	margin-bottom: 20px;
	border-bottom: 2px solid var(--ka-border);
	overflow-x: auto;
}
.ka-wc-subnav-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 15px;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ka-gray-dark);
	text-decoration: none;
	background: var(--ka-surface);
	border: 1.5px solid var(--ka-border);
	transition: all .18s;
	white-space: nowrap;
}
.ka-wc-subnav-item i { font-size: 12.5px; }
.ka-wc-subnav-item:hover {
	background: var(--ka-primary-bg);
	color: var(--ka-primary);
	border-color: rgba(157,20,4,.3);
	text-decoration: none;
}
.ka-wc-subnav-item.active {
	background: var(--ka-primary);
	color: #fff;
	border-color: var(--ka-primary);
	font-weight: 700;
}

/* ── Badge % hoa hồng CTV trên sản phẩm WooCommerce ── */
.ka-commission-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
	padding: 4px 10px 4px 8px;
	background: linear-gradient(135deg, rgba(22,163,74,.15), rgba(22,163,74,.08));
	border: 1px solid rgba(22,163,74,.35);
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	color: #15803d;
	font-family: 'Inter', sans-serif;
	box-shadow: 0 0 8px rgba(22,163,74,.12);
	white-space: nowrap;
	vertical-align: middle;
	line-height: 1.4;
}
.ka-commission-badge i { font-size: 11px; color: #16a34a; }
.ka-commission-badge strong { font-weight: 700; color: #16a34a; }

/* Badge lớn hơn trên trang single product */
.single-product .ka-commission-badge {
	font-size: 13.5px;
	padding: 6px 14px 6px 11px;
	gap: 7px;
	margin-top: 8px;
	margin-bottom: 4px;
	box-shadow: 0 2px 12px rgba(22,163,74,.18);
}
.single-product .ka-commission-badge i { font-size: 14px; }

/* ── Box chia sẻ link affiliate dưới Add to Cart ── */
.ka-share-box {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
	padding: 12px 14px;
	background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(22,163,74,.04));
	border: 1px solid rgba(22,163,74,.25);
	border-radius: 10px;
	font-family: 'Inter', sans-serif;
}
.ka-share-box__label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #15803d;
	font-weight: 600;
}
.ka-share-box__label i { font-size: 14px; color: #16a34a; }
.ka-share-box__amount { font-weight: 700; color: #16a34a; margin-left: 2px; }
.ka-share-box__row { display: flex; gap: 6px; }
.ka-share-box__input {
	flex: 1; min-width: 0;
	background: rgba(255,255,255,.8);
	border: 1.5px solid rgba(22,163,74,.25);
	border-radius: 7px;
	color: var(--ka-dark);
	font-size: 12px;
	padding: 7px 10px;
	outline: none;
	font-family: 'Inter', sans-serif;
}
.ka-share-box__copy {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 13px;
	background: rgba(22,163,74,.15);
	border: 1.5px solid rgba(22,163,74,.3);
	border-radius: 7px;
	color: #16a34a;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all .18s;
	white-space: nowrap;
	font-family: 'Inter', sans-serif;
}
.ka-share-box__copy:hover { background: #16a34a; color: #fff; border-color: #16a34a; }
.ka-share-box__copy--copied { background: #16a34a !important; color: #fff !important; border-color: #16a34a !important; }

/* ── Responsive ── */
@media (max-width: 900px) {
	.ka-fe-wrap { flex-direction: column; border-radius: var(--ka-radius); }
	.ka-fe-sidebar { width: 100%; border-right: none; border-bottom: 3px solid var(--ka-primary); }
	.ka-fe-sidebar::before { display: none; }
	.ka-fe-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 10px 12px; }
	.ka-fe-nav-item { padding: 7px 10px; font-size: 11.5px; }
	.ka-fe-nav-item span { display: none; }
	.ka-fe-nav-item.active::before { display: none; }
	.ka-fe-link-cards { grid-template-columns: 1fr; }
	.ka-fe-form-grid { grid-template-columns: 1fr; }
	.ka-fe-main { padding: 20px 16px; }
}
@media (max-width: 600px) {
	.ka-fe-kpi-grid { grid-template-columns: repeat(2, 1fr); }
	.ka-fe-balance-amount { font-size: 34px; }
	.ka-wc-subnav-item span { display: none; }
}

/* =============================================================
WooCommerce My Account Page — Professional Red & Black
Targets [woocommerce_my_account] at /tai-khoan/
============================================================= */

/* --- Font import if not already loaded --- */
.woocommerce-account * { font-family: ''Inter'', -apple-system, BlinkMacSystemFont, sans-serif; box-sizing: border-box; }

/* ──────────────────────────────────────────
LAYOUT
─────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation {
	float: left ;
	width: 95% ;
	margin-right: 24px ;
	margin-bottom: 0 ;
	margin-top: 20px;
}
.woocommerce-account .woocommerce-MyAccount-content {
	float: left !important;
	width: 100% ;
}

/* ──────────────────────────────────────────
SIDEBAR NAV
─────────────────────────────────────────── */
.woocommerce-MyAccount-navigation {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,.12);
	position: sticky;
	top: 24px;
}
.woocommerce-MyAccount-navigation::before {
	content: '''';
	display: block;
	height: 4px;
	background: linear-gradient(90deg, #9d1404, #c41a06);
}
.woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 8px 0 12px !important;
}
.woocommerce-MyAccount-navigation ul li { margin: 0 !important; padding: 0 !important; }
.woocommerce-MyAccount-navigation ul li a {
	display: block !important;
	padding: 11px 18px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #000;
	text-decoration: none !important;
	transition: all .18s !important;
	border-left: 3px solid transparent !important;
	line-height: 1.5 !important;
}
.woocommerce-MyAccount-navigation ul li a:hover {
	background: #9d1404 !important;
	color: #fff !important;
	text-decoration: none !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active a {
	background: #9d1404 !important;
	color: #fff !important;
	border-left-color: rgba(255,255,255,.35) !important;
	font-weight: 700 !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: rgba(255,110,110,.65) !important;
	margin-top: 6px;
	border-top: 1px solid rgba(255,255,255,.07);
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	color: #ff8080 !important;
	background: rgba(255,80,80,.08) !important;
}

/* ──────────────────────────────────────────
CONTENT PANEL
─────────────────────────────────────────── */
.woocommerce-MyAccount-content {
	background: #fff;
	border-radius: 12px;
	padding: 28px 30px !important;
	box-shadow: 0 2px 12px rgba(0,0,0,.06);
	border: 1px solid #e5e5e5;
	min-height: 420px;
}
.woocommerce-MyAccount-content > p:first-of-type {
	font-size: 14px;
	color: #555;
	line-height: 1.75;
	margin-bottom: 20px;
}
.woocommerce-MyAccount-content > p:first-of-type strong { color: #9d1404; }

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-size: 15px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 16px;
	padding-bottom: 11px;
	border-bottom: 2px solid #f0f0f0;
}

/* ──────────────────────────────────────────
TABLES
─────────────────────────────────────────── */
.woocommerce-MyAccount-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.woocommerce-MyAccount-content table thead { background: #f7f7f7; }
.woocommerce-MyAccount-content table thead th {
	padding: 10px 14px;
	text-align: left;
	font-size: 11.5px;
	font-weight: 700;
	color: #555;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-bottom: 2px solid #e5e5e5;
}
.woocommerce-MyAccount-content table tbody td {
	padding: 12px 14px;
	border-bottom: 1px solid #f0f0f0;
	color: #333;
	vertical-align: middle;
}
.woocommerce-MyAccount-content table tbody tr:last-child td { border-bottom: none; }
.woocommerce-MyAccount-content table tbody tr:hover td { background: #fff4f3; }
.woocommerce-MyAccount-content table tfoot td,
.woocommerce-MyAccount-content table tfoot th {
	padding: 12px 14px;
	font-weight: 700;
	color: #1a1a1a;
	border-top: 2px solid #e5e5e5;
}
.woocommerce-MyAccount-content table .order-total td,
.woocommerce-MyAccount-content table .order-total th {
	font-size: 16px;
	color: #9d1404;
}

/* Order number links */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a {
	color: #9d1404;
	font-weight: 700;
	text-decoration: none;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a:hover {
	text-decoration: underline;
}

/* ──────────────────────────────────────────
ORDER STATUS BADGES
─────────────────────────────────────────── */
.woocommerce-MyAccount-content mark.order-status {
	background: transparent !important;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
}
.woocommerce-MyAccount-content mark.status-completed { background: #d1fae5 !important; color: #065f46 !important; }
.woocommerce-MyAccount-content mark.status-processing { background: #dbeafe !important; color: #1e40af !important; }
.woocommerce-MyAccount-content mark.status-pending { background: #fef3c7 !important; color: #92400e !important; }
.woocommerce-MyAccount-content mark.status-cancelled,
.woocommerce-MyAccount-content mark.status-refunded { background: #fee2e2 !important; color: #991b1b !important; }
.woocommerce-MyAccount-content mark.status-on-hold { background: #f3f4f6 !important; color: #6b7280 !important; }

/* ──────────────────────────────────────────
BUTTONS
─────────────────────────────────────────── */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type=submit],
.woocommerce-MyAccount-content input[type=submit] {
	background: #9d1404 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 10px 22px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: background .18s, transform .15s, box-shadow .18s !important;
	text-decoration: none !important;
	box-shadow: 0 3px 12px rgba(157,20,4,.2) !important;
	display: inline-block !important;
	line-height: 1.4 !important;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type=submit]:hover,
.woocommerce-MyAccount-content input[type=submit]:hover {
	background: #7a0f03 !important;
	color: #fff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 5px 16px rgba(157,20,4,.3) !important;
	text-decoration: none !important;
}
.woocommerce-MyAccount-content .woocommerce-orders-table .button {
	padding: 6px 14px !important;
	font-size: 12px !important;
	border-radius: 6px !important;
}

/* ──────────────────────────────────────────
FORM INPUTS
─────────────────────────────────────────── */
.woocommerce-MyAccount-content input[type=text],
.woocommerce-MyAccount-content input[type=email],
.woocommerce-MyAccount-content input[type=tel],
.woocommerce-MyAccount-content input[type=password],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
	width: 100% !important;
	background: #f8f8f8 !important;
	border: 1.5px solid #e0e0e0 !important;
	border-radius: 8px !important;
	padding: 10px 13px !important;
	font-size: 13px !important;
	color: #1a1a1a !important;
	transition: border-color .18s, box-shadow .18s !important;
	outline: none !important;
	box-shadow: none !important;
}
.woocommerce-MyAccount-content input[type=text]:focus,
.woocommerce-MyAccount-content input[type=email]:focus,
.woocommerce-MyAccount-content input[type=tel]:focus,
.woocommerce-MyAccount-content input[type=password]:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
	border-color: #9d1404 !important;
	box-shadow: 0 0 0 3px rgba(157,20,4,.08) !important;
	background: #fff !important;
}
.woocommerce-MyAccount-content .form-row { margin-bottom: 16px !important; }
.woocommerce-MyAccount-content label {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #555 !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	margin-bottom: 6px !important;
	display: block !important;
}
.woocommerce-MyAccount-content fieldset {
	border: 1.5px solid #e5e5e5;
	border-radius: 10px;
	padding: 20px 22px;
	margin: 20px 0 16px;
}
.woocommerce-MyAccount-content fieldset legend {
	font-size: 12px;
	font-weight: 700;
	color: #9d1404;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 0 8px;
}

/* ──────────────────────────────────────────
ADDRESSES
─────────────────────────────────────────── */
.woocommerce-MyAccount-content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.woocommerce-MyAccount-content .woocommerce-Address {
	background: #f8f8f8;
	border: 1.5px solid #e5e5e5;
	border-radius: 10px;
	padding: 20px 22px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e5e5e5;
}
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	font-size: 13.5px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}
.woocommerce-MyAccount-content .woocommerce-Address-title a {
	font-size: 12px !important;
	color: #9d1404 !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.woocommerce-MyAccount-content address {
	font-size: 13.5px;
	color: #555;
	line-height: 1.8;
	font-style: normal;
}

/* ──────────────────────────────────────────
NOTICES
─────────────────────────────────────────── */
.woocommerce-MyAccount-content .woocommerce-message {
	background: #f0fdf4 !important;
	border: 1.5px solid #86efac !important;
	color: #15803d !important;
	padding: 13px 18px !important;
	border-radius: 8px !important;
	margin-bottom: 20px !important;
	font-size: 13.5px !important;
}
.woocommerce-MyAccount-content .woocommerce-error {
	background: #fff1f1 !important;
	border: 1.5px solid #fca5a5 !important;
	color: #991b1b !important;
	padding: 13px 18px !important;
	border-radius: 8px !important;
	margin-bottom: 20px !important;
	font-size: 13.5px !important;
}
.woocommerce-MyAccount-content .woocommerce-info {
	background: #eff6ff !important;
	border: 1.5px solid #93c5fd !important;
	color: #1e40af !important;
	padding: 13px 18px !important;
	border-radius: 8px !important;
	margin-bottom: 20px !important;
	font-size: 13.5px !important;
}
.woocommerce-account .lost_password a { color: #9d1404; font-size: 12.5px; }

/* ──────────────────────────────────────────
PAGINATION
─────────────────────────────────────────── */
.woocommerce-MyAccount-content .woocommerce-pagination ul {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}
.woocommerce-MyAccount-content .woocommerce-pagination li a,
.woocommerce-MyAccount-content .woocommerce-pagination li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border-radius: 7px;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	color: #555;
	background: #f4f4f4;
	border: 1.5px solid #e5e5e5;
	transition: all .15s;
}
.woocommerce-MyAccount-content .woocommerce-pagination li a:hover { border-color: #9d1404; color: #9d1404; }
.woocommerce-MyAccount-content .woocommerce-pagination li span.current { background: #9d1404; color: #fff; border-color: #9d1404; }

/* ──────────────────────────────────────────
RESPONSIVE
─────────────────────────────────────────── */
@media (max-width: 768px) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		float: none !important;
		width: 100% !important;
		margin-right: 0 !important;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 20px !important;
		position: static;
	}
	.woocommerce-MyAccount-content { padding: 20px 16px !important; }
	.woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr; }
}