/* =============================================================================
   IMPORTS
============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700;800&family=Red+Hat+Display:wght@400;500;600;700;800;900&display=swap');


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

html { font-size: 16px; }

body {
  font-family: 'Anuphan', sans-serif;
  background: #fff;
  color: #111;
  -webkit-font-smoothing: antialiased;
}

a    { text-decoration: none; color: inherit; }
img  { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }


/* =============================================================================
   LAYOUT UTILITIES
============================================================================= */
.max-w        { max-width: 1400px; margin-left: auto; margin-right: auto; }
.px5          { padding-left: 5%; padding-right: 5%; }
.min-h-screen { min-height: 100vh; }


/* =============================================================================
   FLEXBOX & GRID UTILITIES
============================================================================= */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-1        { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.min-w-0       { min-width: 0; }
.grid          { display: grid; }

.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }

.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

.gap-1  { gap: 4px; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.gap-5  { gap: 20px; }
.gap-8  { gap: 32px; }
.gap-12 { gap: 48px; }
.gap-16 { gap: 64px; }


/* =============================================================================
   POSITIONING UTILITIES
============================================================================= */
.relative  { position: relative; }
.absolute  { position: absolute; }
.sticky    { position: sticky; }
.inset-0   { inset: 0; }
.top-0     { top: 0; }
.z-10      { z-index: 10; }
.z-20      { z-index: 20; }
.z-50      { z-index: 50; }


/* =============================================================================
   SIZING UTILITIES
============================================================================= */
.w-full    { width: 100%; }
.h-full    { height: 100%; }


/* =============================================================================
   OVERFLOW & VISIBILITY
============================================================================= */
.overflow-hidden  { overflow: hidden; }
.overflow-x-auto  { overflow-x: auto; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.scrollbar-none                    { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }


/* =============================================================================
   TYPOGRAPHY UTILITIES
============================================================================= */

/* Size */
.text-xs   { font-size: 12px; line-height: 1.4; }
.text-sm   { font-size: 14px; line-height: 1.5; }
.text-base { font-size: 16px; line-height: 1.5; }
.text-lg   { font-size: 18px; line-height: 1.4; }
.text-xl   { font-size: 20px; line-height: 1.3; }
.text-2xl  { font-size: 24px; line-height: 1.2; }
.text-3xl  { font-size: 30px; line-height: 1.15; }
.text-4xl  { font-size: 36px; line-height: 1.1; }
.text-5xl  { font-size: 48px; line-height: 1.05; }

/* Weight */
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-black    { font-weight: 900; }

/* Family */
.font-red-hat { font-family: 'Red Hat Display', sans-serif; }

/* Transform & case */
.uppercase    { text-transform: uppercase; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.object-cover { object-fit: contain; object-position: center; }

/* Tracking (letter-spacing) */
.tracking-tight   { letter-spacing: -0.02em; }
.tracking-wide    { letter-spacing: 0.05em; }
.tracking-wider   { letter-spacing: 0.08em; }
.tracking-widest  { letter-spacing: 0.12em; }

/* Line-height */
.leading-tight   { line-height: 1.2; }
.leading-relaxed { line-height: 1.7; }

/* Misc */
.tabular-nums { font-variant-numeric: tabular-nums; }


/* =============================================================================
   COLOR UTILITIES
============================================================================= */

/* Backgrounds */
.bg-white   { background: #fff; }
.bg-gray-50 { background: #f9fafb; }
.bg-gray-100 { background: #f3f4f6; }
.bg-gray-900 { background: #111827; }

/* Text */
.text-white   { color: #fff; }
.text-gray-900 { color: #111827; }
.text-gray-800 { color: #1f2937; }
.text-gray-700 { color: #374151; }
.text-gray-500 { color: #6b7280; }
.text-gray-400 { color: #9ca3af; }
.text-gray-300 { color: #d1d5db; }
.text-gray-200 { color: #e5e7eb; }
.text-blue-600 { color: #2563eb; }


/* =============================================================================
   BORDER UTILITIES
============================================================================= */
.border   { border: 1px solid; }
.border-t { border-top: 1px solid; }
.border-b { border-bottom: 1px solid; }
.border-l { border-left: 1px solid; }
.border-r { border-right: 1px solid; }

.border-gray-50   { border-color: #f9fafb; }
.border-gray-100  { border-color: #f3f4f6; }
.border-gray-200  { border-color: #e5e7eb; }
.border-gray-300  { border-color: #d1d5db; }
.border-gray-900  { border-color: #111827; }
.border-transparent { border-color: transparent; }

.divide-y > * + *        { border-top: 1px solid; }
.divide-gray-50 > * + * { border-color: #f9fafb; }

/* Border Radius */
.rounded      { border-radius: 6px; }
.rounded-lg   { border-radius: 8px; }
.rounded-xl   { border-radius: 12px; }
.rounded-2xl  { border-radius: 16px; }
.rounded-full { border-radius: 9999px; }


/* =============================================================================
   SPACING UTILITIES
============================================================================= */

/* Padding — all sides */
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-7 { padding: 28px; }

/* Padding — horizontal */
.px-2 { padding-left: 8px;  padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.px-8 { padding-left: 32px; padding-right: 32px; }

/* Padding — vertical */
.py-1   { padding-top: 4px;  padding-bottom: 4px; }
.py-1\.5 { padding-top: 6px;  padding-bottom: 6px; }
.py-2   { padding-top: 8px;  padding-bottom: 8px; }
.py-2\.5 { padding-top: 10px; padding-bottom: 10px; }
.py-3   { padding-top: 12px; padding-bottom: 12px; }
.py-4   { padding-top: 16px; padding-bottom: 16px; }
.py-5   { padding-top: 20px; padding-bottom: 20px; }
.py-6   { padding-top: 24px; padding-bottom: 24px; }
.py-8   { padding-top: 32px; padding-bottom: 32px; }
.py-10  { padding-top: 40px; padding-bottom: 40px; }
.py-12  { padding-top: 48px; padding-bottom: 48px; }
.py-16  { padding-top: 64px; padding-bottom: 64px; }
.py-20  { padding-top: 80px; padding-bottom: 80px; }

/* Padding — individual sides */
.pb-3  { padding-bottom: 12px; }
.pb-5  { padding-bottom: 20px; }
.pb-10 { padding-bottom: 40px; }
.pb-16 { padding-bottom: 64px; }
.pb-24 { padding-bottom: 96px; }
.pt-6  { padding-top: 24px; }
.pt-8  { padding-top: 32px; }
.pt-12 { padding-top: 48px; }

/* Margin */
.mb-1  { margin-bottom: 4px; }
.mb-2  { margin-bottom: 8px; }
.mb-3  { margin-bottom: 12px; }
.mb-4  { margin-bottom: 16px; }
.mb-5  { margin-bottom: 20px; }
.mb-6  { margin-bottom: 24px; }
.mb-8  { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }

.mt-0\.5 { margin-top: 2px; }
.mt-1    { margin-top: 4px; }
.mt-2    { margin-top: 8px; }
.mt-4    { margin-top: 16px; }
.mt-6    { margin-top: 24px; }
.mt-8    { margin-top: 32px; }

.-mx-4 { margin-left: -16px; margin-right: -16px; }

/* Stack spacing */
.space-y-12 > * + * { margin-top: 48px; }


/* =============================================================================
   SHADOW UTILITIES
============================================================================= */
.shadow-sm     { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.shadow-sticky { box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.shadow-2xl    { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }


/* =============================================================================
   SVG ICONS
============================================================================= */
.icon    { display: inline-block; width: 16px; height: 16px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; }


/* =============================================================================
   Button view jobs of each company
============================================================================= */

.view-jobs-btn {
  display: block;
  text-decoration: none;
  margin-top: 40px;
}

.view-jobs-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  background: #f5f8ff;
  border: 1px solid #c8d8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.view-jobs-card:hover {
  background: #eaf0fb;
  border-color: #2557a7;
}

.view-jobs-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #2557a7;
  border-radius: 8px;
  color: #fff;
  flex-shrink: 0;
}

.view-jobs-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.view-jobs-label {
  font-size: 15px;
  font-weight: 600;
  color: #2557a7;
}

.view-jobs-sub {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
}

.view-jobs-arrow {
  font-size: 22px;
  color: #aaa;
  line-height: 1;
}

.view-jobs-card:hover .view-jobs-arrow {
  color: #2557a7;
}

/* =============================================================================
   PAGE: INDEX — Hero
============================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  height: 340px;
  color: #fff;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.65) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.1) 100%);
}
.hero-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 5% 40px;
}
.hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* Breadcrumb */
.hero-breadcrumb        { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.4); margin-bottom: 20px; }
.hero-breadcrumb a      { color: rgba(255,255,255,.4); transition: color .2s; }
.hero-breadcrumb a:hover { color: rgba(255,255,255,.7); }

/* Text */
.hero-title { font-size: 36px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 12px; }
.hero-sub   { font-size: 22px; font-weight: 400; color: rgba(255,255,255,.5); display: block; }
.hero-desc  { font-size: 15px; color: rgba(255,255,255,.6); max-width: 360px; line-height: 1.7; }


/* =============================================================================
   PAGE: INDEX — Filter Bar
============================================================================= */
.filter-bar {
  background: #fff;
  border-bottom: 1px solid #f3f4f6;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.filter-bar-inner { max-width: 1400px; margin: 0 auto; }

.filter-row        { display: flex; align-items: center; }
.filter-row-cities { border-bottom: 1px solid #f3f4f6; padding-top: 12px; padding-bottom: 8px; }
.filter-row-months { padding-top: 8px; padding-bottom: 8px; }

.filter-label      { flex-shrink: 0; padding-left: 5%; padding-right: 12px; }
.filter-label-pill {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 2px solid #111827;
  background: #fff;
  white-space: nowrap;
}

.filter-pills { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-right: 5%; }
.filter-pills::-webkit-scrollbar { display: none; }

.filter-pill {
  flex-shrink: 0;
  padding: 8px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 9999px;
  color: #9ca3af;
  cursor: pointer;
  transition: all .2s;
  border: none;
  background: none;
  font-family: 'Anuphan', sans-serif;
}
.filter-pill:hover  { color: #111827; background: #f3f4f6; }
.filter-pill.active { background: #111827; color: #fff; }

/* Year dropdown */
.year-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 2px solid #111827;
  background: #fff;
  min-width: 90px;
  justify-content: center;
  cursor: pointer;
  font-family: 'Anuphan', sans-serif;
  position: relative;
}
.year-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  padding: 8px;
  z-index: 50;
  min-width: 110px;
  display: none;
}
.year-dropdown.open { display: block; }
.year-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 20px;
  font-size: 15px;
  border-radius: 12px;
  color: #9ca3af;
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Anuphan', sans-serif;
}
.year-opt:hover  { background: #f9fafb; }
.year-opt.active { color: #111827; font-weight: 700; }


/* =============================================================================
   PAGE: INDEX — Main Content
============================================================================= */
.main-section { background: #f9fafb; padding: 40px 5%; }
.main-inner   { max-width: 1400px; margin: 0 auto; }

.section-header  { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; }
.section-eyebrow { font-size: 14px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
.section-title   { font-size: 24px; font-weight: 700; color: #111827; }
.section-sub     { font-size: 15px; color: #6b7280; margin-top: 4px; }


/* =============================================================================
   PAGE: INDEX — Top 3 Cards
============================================================================= */
.top3 { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }

.top3-card {
  border-radius: 16px;
  padding: 28px;
  border: 1px solid #e5e7eb;
  transition: box-shadow .2s, transform .2s;
  cursor: pointer;
}
.top3-card:hover           { box-shadow: 0 4px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.top3-card.rank1           { background: #cf3e3e; border-color: transparent; }

.top3-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }

.top3-logo         { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); flex-shrink: 0; }
.top3-logo img     { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.top3-logo-default { background: #f3f4f6; }

.top3-star-badge       { font-size: 13px; padding: 4px 10px; border-radius: 9999px; font-weight: 500; background: rgba(255,255,255,.1); color: rgba(255,255,255,.6); margin-left: 12px; }
.top3-star-badge.light { background: #f3f4f6; color: #6b7280; }

.top3-rank-num       { font-size: 48px; font-weight: 900; line-height: 1; font-family: 'Anuphan', sans-serif; color: rgba(0, 0, 0, 0.5); }
.top3-rank-num.light { color: #969696; }

.top3-name         { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 4px; }
.top3-name.light   { color: #111827; }
.top3-district     { font-size: 14px; color: rgba(255,255,255,.5); }
.top3-district.light { color: #9ca3af; }

.top3-amount       { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: #fff; margin-top: 24px; font-family: 'Red Hat Display', sans-serif; }
.top3-amount.light { color: #111827; }


/* =============================================================================
   PAGE: INDEX — Ranking Table
============================================================================= */
.rank-table { background: #fff; border-radius: 16px; border: 1px solid #e5e7eb; overflow: hidden; }

.rank-table-head      { display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; padding: 16px 24px; border-bottom: 1px solid #f3f4f6; background: #f9fafb; }
.rank-table-head-cell { font-size: 13px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.08em; }
.rank-table-head-cell.right { text-align: right; }

.rank-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #f9fafb;
  transition: background .15s;
  cursor: pointer;
}
.rank-row:last-child { border-bottom: none; }
.rank-row:hover      { background: rgba(239,246,255,.5); }

.rank-num { font-size: 15px; font-weight: 700; color: #d1d5db; font-family: 'Red Hat Display', sans-serif; }

.hotel-row        { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hotel-logo-sm    { width: 45px; height: 45px; border-radius: 8px; overflow: hidden; background: #ffffff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.hotel-logo-sm img { width: 100%; height: 100%; object-fit: contain; }
.hotel-name-main  { font-size: 15px; font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hotel-district-sm { font-size: 14px; color: #9ca3af; }

.rank-row:hover .hotel-name-main { color: #2563eb; }

.rank-amount { font-size: 16px; font-weight: 700; color: #111827; font-family: 'Red Hat Display', sans-serif; text-align: right; }
.rank-arrow  { color: #e5e7eb; }
.rank-row:hover .rank-arrow { color: #93c5fd; }


/* =============================================================================
   PAGE: INDEX — Quick Links
============================================================================= */
.quick-links       { background: #fff; border-top: 1px solid #f3f4f6; padding: 48px 5%; }
.quick-links-inner { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 16px; }

.quick-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  transition: border-color .2s, box-shadow .2s;
}
.quick-card:hover      { border-color: #d1d5db; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.quick-card-label      { font-size: 13px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.quick-card-title      { font-size: 17px; font-weight: 700; color: #111827; }
.quick-card-sub        { font-size: 14px; color: #505050; margin-top: 4px; }
.quick-card.lastmonth  { background: #b9dbf0; border-top: 0px}
.quick-card-label-lastmonth      { font-size: 13px; color: #404040; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }


/* =============================================================================
   PAGE: INDEX — FAQ
============================================================================= */
.faq-section { padding: 48px 5%; border-top: 1px solid #f3f4f6; }
.faq-inner   { max-width: 1400px; margin: 0 auto; }
.faq-title   { font-size: 20px; font-weight: 600; color: #111827; margin-bottom: 32px; }

.faq-item { border-bottom: 1px solid #f3f4f6; }
.faq-btn  { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 0; gap: 16px; background: none; border: none; cursor: pointer; text-align: left; font-family: 'Anuphan', sans-serif; }
.faq-q    { font-size: 16px; font-weight: 500; color: #111827; }

.faq-icon      { width: 16px; height: 16px; flex-shrink: 0; color: #9ca3af; transition: transform .2s; }
.faq-icon.open { transform: rotate(180deg); }

.faq-a      { font-size: 15px; color: #6b7280; line-height: 1.7; padding-bottom: 20px; display: none; }
.faq-a.open { display: block; }


/* =============================================================================
   PAGE: INDEX — Footer Info
============================================================================= */
.footer-info  { background: #f9fafb; border-top: 1px solid #f3f4f6; padding: 40px 5%; }
.footer-inner { max-width: 1400px; margin: 0 auto; }
.footer-grid  { display: grid; grid-template-columns: 1fr; gap: 32px; }
.footer-label { font-size: 14px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.footer-text  { font-size: 15px; color: #6b7280; line-height: 1.7; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-link  { font-size: 14px; color: #2563eb; }

.footer-divider { margin-top: 32px; padding-top: 24px; border-top: 1px solid #e5e7eb; }
.footer-note    { font-size: 14px; color: #9ca3af; }


/* =============================================================================
   PAGE: ARCHIVE
============================================================================= */
.page-hero       { padding: 0 5%; border-bottom: 1px solid #f3f4f6; }
.page-hero-inner { max-width: 1400px; margin: 0 auto; padding: 48px 0; }
.page-hero-top   { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.page-hero-title { font-size: 30px; font-weight: 600; color: #111827; letter-spacing: -0.02em; }
.page-hero-desc  { font-size: 16px; color: #9ca3af; max-width: 512px; }

.back-btn       { color: #9ca3af; transition: color .2s; display: flex; align-items: center; }
.back-btn:hover { color: #374151; }

.archive-section { padding: 32px 5% 64px; }
.archive-inner   { max-width: 1400px; margin: 0 auto; }

.archive-year-title { font-size: 20px; font-weight: 900; color: #0866ff; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6; margin-bottom: 16px; font-family: 'Red Hat Display', sans-serif; }
.archive-grid       { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 48px; }

.archive-card {
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 16px;
  transition: border-color .2s, box-shadow .2s;
  display: block;
}
.archive-card:hover         { border-color: #d1d5db; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.archive-card-top           { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.archive-card-month         { font-size: 15px;  }
.archive-card-count         { font-size: 12px; color: #505050; margin-bottom: 4px; }
.archive-card-avg           { font-size: 22px; font-weight: 800; color: #111827; font-family: 'Red Hat Display', sans-serif; }
.archive-card-avg-label     { font-size: 12px; color: #505050; margin-left: 6px; }
.archive-card-top-hotel     { font-size: 12px; color: #505050; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.city-archive       { padding: 0 5% 96px; }
.city-archive-inner { max-width: 1400px; margin: 0 auto; border-top: 1px solid #f3f4f6; padding-top: 48px; }
.city-archive-title { font-size: 18px; font-weight: 600; color: #111827; margin-bottom: 24px; }

.city-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.city-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  transition: border-color .2s;
}
.city-card:hover          { border-color: #d1d5db; }
.city-card-name           { font-size: 14px; font-weight: 500; color: #374151; }
.city-card:hover .city-card-name { color: #111827; }


/* =============================================================================
   PAGE: MONTHLY
============================================================================= */
.month-stats { display: flex; gap: 48px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #f3f4f6; }
.stat-label  { font-size: 12px; color: #505050; margin-bottom: 4px; }
.stat-val    { font-size: 24px; font-weight: 600; color: #111827; font-family: 'Red Hat Display', sans-serif; }

.month-nav   { display: flex; align-items: center; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #f3f4f6; font-size: 14px; }
.month-nav a        { color: #505050; transition: color .2s; }
.month-nav a:hover  { color: #111827; }

.monthly-rankings { padding: 32px 5% 48px; }
.monthly-inner    { max-width: 1400px; margin: 0 auto; }

.city-group      { margin-bottom: 48px; }
.city-group-head { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6; margin-bottom: 16px; }
.city-group-name { font-size: 18px; font-weight: 600; color: #111827; }
.city-group-count { font-size: 12px; color: #505050; margin-top: 2px; }

.monthly-table-head { display: none; }
.monthly-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f9fafb;
  transition: background .15s;
  cursor: pointer;
}
.monthly-row:hover { background: rgba(249,250,251,.8); }

.monthly-rank       { font-size: 14px; font-weight: 600; color: #d1d5db; font-family: 'Red Hat Display', sans-serif; }
.monthly-rank.top   { color: #111827; }

.monthly-hotel  { display: flex; align-items: center; gap: 12px; min-width: 0; }
.monthly-logo   { width: 50px; height: 50px; border-radius: 8px; overflow: hidden; background: #ffffff;  flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.monthly-logo img { width: 100%; height: 100%; object-fit: contain; }
.monthly-name     { font-size: 15px; font-weight: 500; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monthly-district { font-size: 12px; color: #9ca3af; }

.monthly-amount       { font-size: 16px; font-weight: 600; color: #374151; font-family: 'Red Hat Display', sans-serif; text-align: right; }
.monthly-amount.first { color: #111827; }

/* Monthly quick nav */
.month-quick-nav   { padding: 16px 0 64px; }
.month-quick-inner { max-width: 1400px; margin: 0 auto; border-top: 1px solid #f3f4f6; padding-top: 48px; }
.month-quick-title { font-size: 14px; font-weight: 600; color: #111827; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 24px; }

.month-pills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.month-pill-link  { padding: 12px 16px; font-size: 15px; text-align: center; border-radius: 8px; border: 1px solid #d1d5db; color: #505050; transition: border-color .2s, color .2s; }
.month-pill-link:hover       { border-color: #708cbd; color: #111827; }
.month-pill-link.current     { border-color: #0081ff; color: #111827; font-weight: 600; background: #f9fafb; }
.month-pill-link.unavailable { color: #e5e7eb; border-color: #f9fafb; }

.year-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.year-pill  { padding: 6px 12px; font-size: 14px; border-radius: 6px; color: #505050; transition: all .15s; }
.year-pill:hover  { color: #111827; }
.year-pill.active { background: #111827; color: #fff; }


/* =============================================================================
   PAGE: HOTEL PROFILE
============================================================================= */
.header{ padding: 0 5%;}
.hotel-hero       { padding: 0 5%; border-bottom: 1px solid #f3f4f6; }
.hotel-hero-inner { max-width: 1400px; margin: 0 auto; padding: 48px 0 80px; }

.hotel-header  { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
.hotel-logo-lg { width: 80px; height: 80px; border-radius: 12px; overflow: hidden; background: #f3f4f6; border: 1px solid #f3f4f6; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.hotel-logo-lg img { width: 100%; height: 100%; object-fit: contain; }

.hotel-title { font-size: 24px; font-weight: 600; color: #111827; letter-spacing: -0.02em; line-height: 1.2; }
.hotel-meta  { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 14px; color: #9ca3af; flex-wrap: wrap; }
.hotel-meta-item { display: flex; align-items: center; gap: 4px; }

.hotel-metrics { display: flex; justify-content: center; gap: 48px; margin-top: 40px; padding-top: 32px; border-top: 1px solid #f3f4f6; }
.metric-label  { font-size: 12px; color: #505050; margin-bottom: 8px; }
.metric-val    { font-size: 30px; font-weight: 600; color: #111827; letter-spacing: -0.02em; }
.metric-sub    { font-size: 14px; color: #505050; margin-top: 4px; }

/* History */
.history-section    { padding: 32px 5% 48px; }
.history-inner      { max-width: 1400px; margin: 0 auto; }
.history-title      { font-size: 18px; font-weight: 600; color: #111827; margin-bottom: 24px; }
.history-year-label { font-size: 24px; font-weight: 600; color: #404040; text-transform: uppercase;  margin-bottom: 12px; }

.history-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb; margin-bottom: 40px; }
.history-cell { border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; padding: 16px; transition: background .15s; display: block; }
.history-cell:hover        { background: #f9fafb; }
.history-cell-month        { font-size: 14px; color: #9ca3af; margin-bottom: 8px; }
.history-cell-amount       { font-size: 16px; font-weight: 600; color: #111827; }

/* Compare */
.compare-section { padding: 0 5% 96px; }
.compare-inner   { max-width: 1400px; margin: 0 auto; border-top: 1px solid #f3f4f6; padding-top: 48px; }
.compare-title   { font-size: 18px; font-weight: 600; color: #111827; margin-bottom: 4px; }
.compare-sub     { font-size: 12px; color: #9ca3af; margin-bottom: 24px; }

.compare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  margin: 0 -16px;
  border-bottom: 1px solid #ebedef;
  transition: background .15s;
  cursor: pointer;
}
.compare-row:hover     { background: rgba(249,250,251,.5); }
.compare-row-left      { display: flex; align-items: center; gap: 12px; min-width: 0; }
.compare-hotel-logo    { width: 45px; height: 45px; border-radius: 8px; overflow: hidden; background: #ffffff; border: 1px solid #f3f4f6; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.compare-hotel-logo img { width: 100%; height: 100%; object-fit: contain; }
.compare-name          { font-size: 16px; font-weight: 500; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compare-district      { font-size: 14px; color: #9ca3af; }
.compare-row-right     { display: flex; align-items: center; gap: 12px; }
.compare-amount        { font-size: 16px; font-weight: 600; color: #374151; }


/* =============================================================================
   RESPONSIVE — Desktop (min-width: 1200px)
============================================================================= */
@media (min-width: 1200px) {

  /* Hero */
  .hero                { height: 420px; }
  .hero-content        { padding-bottom: 56px; }
  .hero-title          { font-size: 60px; }
  .hero-sub            { font-size: 30px; }
  .hero-inner-row      { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }

  /* Index — Main */
  .main-section        { padding: 64px 5%; }
  .section-title       { font-size: 30px; }
  .top3                { grid-template-columns: repeat(3, 1fr); }
  .quick-links-inner   { grid-template-columns: repeat(3, 1fr); }
  .faq-section         { padding: 64px 5%; }

  /* Rank table */
  .rank-table-head     { grid-template-columns: 56px 1fr 200px 60px; padding: 16px 32px; }
  .rank-row            { grid-template-columns: 56px 1fr 200px 60px; padding: 16px 32px; }
  .rank-col-sc         { display: block !important; }
  .rank-col-arrow      { display: flex !important; justify-content: flex-end; }

  /* Archive */
  .page-hero-inner     { padding: 80px 0; }
  .page-hero-title     { font-size: 48px; }
  .archive-grid        { grid-template-columns: repeat(4, 1fr); }
  .city-grid           { grid-template-columns: repeat(3, 1fr); }

  /* Monthly */
  .monthly-rankings    { padding: 48px 5%; }
  .monthly-table-head  { display: grid; grid-template-columns: 50px 1fr 180px 60px; gap: 16px; padding: 8px 16px; }
  .monthly-row         { grid-template-columns: 50px 1fr 180px 60px; }
  .monthly-name        { font-size: 15px; }
  .month-pills-grid    { grid-template-columns: repeat(6, 1fr); }
  .month-quick-nav     { padding-bottom: 96px; }

  /* Hotel Profile */
  .hotel-hero-inner    { padding: 80px 0; }
  .hotel-title         { font-size: 36px; }
  .hotel-metrics       { gap: 80px; }
  .metric-val          { font-size: 36px; }
  .history-grid        { grid-template-columns: repeat(6, 1fr); }
  .history-section     { padding: 48px 5%; }

  /* Footer */
  .footer-grid         { grid-template-columns: 1fr 1fr; gap: 64px; }
}