/*
Theme Name: CDSVN Hanoi Value
Theme URI: https://cdsvn.com
Author: CDSVN
Author URI: https://cdsvn.com
Description: Theme mới cho website BDS Hanoi Value. Giao diện hiện đại, chuẩn quốc tế, Inter typography, Lucide icons.
Version: 2.0.0
Text Domain: cdsvn-hanoivalue
*/

/* ==========================================================================
   DESIGN TOKENS — Mirror of hanoi-value.pen variables
   ========================================================================== */
:root {
	/* Colors */
	--color-primary:          #1A3B66;
	--color-primary-dark:     #0F2A4D;
	--color-accent:           #E07030;
	--color-accent-light:     #F29055;
	--color-bg:               #F8F6F0;
	--color-bg-light:         #F4F2EC;
	--color-bg-white:         #FFFFFF;
	--color-surface:          #EEF0F5;
	--color-border:           #E2E5EB;
	--color-text-primary:     #1A1A2E;
	--color-text-secondary:   #4A5568;
	--color-text-muted:       #9CA3AF;
	--color-text-inverse:     #FFFFFF;
	--color-tag-sale:         #E07030;
	--color-tag-rent:         #2980B9;
	--color-tag-project:      #27AE60;

	/* Radius */
	--radius-xs:  4px;
	--radius-sm:  6px;
	--radius-md:  10px;
	--radius-lg:  14px;
	--radius-xl:  20px;

	/* Spacing */
	--spacing-xs:  8px;
	--spacing-sm:  16px;
	--spacing-md:  24px;
	--spacing-lg:  48px;
	--spacing-xl:  80px;

	/* Typography */
	--font-base: 'Inter', sans-serif;
	--font-size-base: 16px;
	--line-height-base: 1.6;

	/* Shadows */
	--shadow-sm:  0 1px 4px rgba(0,0,0,.07);
	--shadow-md:  0 4px 16px rgba(0,0,0,.10);
	--shadow-lg:  0 8px 32px rgba(0,0,0,.13);

	/* Transitions */
	--transition: all .25s ease;

	/* Layout */
	--container-max:    1280px;
	--header-height:    88px;
	--sidebar-width:    300px;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
	font-family: var(--font-base);
	font-size:   var(--font-size-base);
	color:       var(--color-text-primary);
	background:  var(--color-bg);
	line-height: var(--line-height-base);
	-webkit-font-smoothing: antialiased;
}

a {
	color:      var(--color-primary);
	text-decoration: none;
	transition: var(--transition);
}
a:hover { color: var(--color-accent); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-text-primary);
}

ul { list-style: none; }

button { cursor: pointer; font-family: inherit; }

/* ==========================================================================
   LAYOUT HELPERS
   ========================================================================== */
.container {
	max-width: var(--container-max);
	margin:    0 auto;
	padding:   0 var(--spacing-xl);
}

@media ( max-width: 1100px ) { .container { padding: 0 var(--spacing-lg); } }
@media ( max-width: 768px )  { .container { padding: 0 var(--spacing-sm); } }

.py-section { padding-top: 64px; padding-bottom: 64px; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
	display:       inline-flex;
	align-items:   center;
	gap:           8px;
	padding:       11px 28px;
	border-radius: var(--radius-sm);
	font-weight:   600;
	font-size:     .9375rem;
	border:        none;
	transition:    var(--transition);
	cursor:        pointer;
	white-space:   nowrap;
}
.btn-primary {
	background: var(--color-primary);
	color:      var(--color-text-inverse);
}
.btn-primary:hover {
	background: var(--color-primary-dark);
	color:      var(--color-text-inverse);
}
.btn-accent {
	background: var(--color-accent);
	color:      var(--color-text-inverse);
}
.btn-accent:hover {
	background: var(--color-accent-light);
	color:      var(--color-text-inverse);
}
.btn-outline {
	background:  transparent;
	border:      1.5px solid currentColor;
	color:       var(--color-primary);
	padding:     9px 24px;
}
.btn-outline:hover {
	background: var(--color-primary);
	color:      #fff;
}
.btn-outline-inverse {
	color:  #fff;
	border-color: rgba(255,255,255,.6);
}
.btn-outline-inverse:hover {
	background: rgba(255,255,255,.15);
	color: #fff;
}

/* ==========================================================================
   TAGS / BADGES
   ========================================================================== */
.tag {
	display:        inline-block;
	padding:        3px 10px;
	border-radius:  var(--radius-xs);
	font-size:      .75rem;
	font-weight:    600;
	letter-spacing: .4px;
	text-transform: uppercase;
}
.tag-sale    { background: var(--color-tag-sale);    color: #fff; }
.tag-rent    { background: var(--color-tag-rent);    color: #fff; }
.tag-project { background: var(--color-tag-project); color: #fff; }

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */
.section-label {
	display:        block;
	font-size:      .75rem;
	font-weight:    700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color:          var(--color-accent);
	margin-bottom:  8px;
}
.section-label--inverse { color: rgba(255,255,255,.7); }

.section-title {
	font-size:  2rem;
	font-weight: 700;
	line-height: 1.2;
}
.section-title--inverse { color: #fff; }

.section-header {
	display:         flex;
	align-items:     flex-end;
	justify-content: space-between;
	margin-bottom:   40px;
	gap:             24px;
	flex-wrap:       wrap;
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   .8125rem;
	color:       var(--color-text-muted);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .current { color: var(--color-accent); font-weight: 600; }
.breadcrumb svg { width: 12px; height: 12px; }

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
.screen-reader-text {
	clip: rect(1px,1px,1px,1px);
	height: 1px; width: 1px;
	overflow: hidden;
	position: absolute;
}