/* ================================================================
   COMPONENTS CSS — Bổ sung các component nhỏ (components.css)
   ================================================================ */

/* ── Rating stars ─────────────────────────────────────────────── */
.nkro-stars { color: #F0A030; letter-spacing: 2px; font-size: 0.9rem; }

/* ── Breadcrumb ───────────────────────────────────────────────── */
.nkro-breadcrumb {
  font-size: var(--nkro-fs-xs);
  color: var(--nkro-text-muted);
  margin-bottom: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.nkro-breadcrumb a { color: var(--nkro-text-muted); }
.nkro-breadcrumb a:hover { color: var(--nkro-primary); }

/* ── Pagination ───────────────────────────────────────────────── */
.nav-links { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px; height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--nkro-r-full);
  font-size: var(--nkro-fs-sm);
  color: var(--nkro-text);
  border: 1.5px solid var(--nkro-border);
  transition: all var(--nkro-t-fast);
  text-decoration: none;
}
.page-numbers:hover { border-color: var(--nkro-primary); color: var(--nkro-primary); }
.page-numbers.current { background: var(--nkro-primary); color: #fff; border-color: var(--nkro-primary); }
.page-numbers.dots { border: none; cursor: default; }

/* ── Select with custom arrow ─────────────────────────────────── */
.nkro-select-wrap { position: relative; }
.nkro-select-wrap select {
  appearance: none;
  width: 100%;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F05C8A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

/* ── Notice / Alert ───────────────────────────────────────────── */
.nkro-notice {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--nkro-r-md);
  font-size: var(--nkro-fs-sm);
  margin-bottom: var(--sp-4);
}
.nkro-notice--info    { background: #E3F2FD; border: 1px solid #90CAF9; color: #0D47A1; }
.nkro-notice--success { background: #E8F5E9; border: 1px solid #A5D6A7; color: #1B5E20; }
.nkro-notice--warning { background: #FFF8E1; border: 1px solid #FFE082; color: #E65100; }
.nkro-notice--error   { background: #FFEBEE; border: 1px solid #FFCDD2; color: #B71C1C; }

/* ── Word counter ─────────────────────────────────────────────── */
.nkro-word-count { font-size: var(--nkro-fs-xs); color: var(--nkro-text-muted); text-align: right; margin-top: var(--sp-1); }

/* ── Form field ───────────────────────────────────────────────── */
.nkro-field { margin-bottom: var(--sp-5); }
.nkro-field label {
  display: block;
  font-size: var(--nkro-fs-sm);
  font-weight: 600;
  margin-bottom: var(--sp-2);
  color: var(--nkro-text);
}
.nkro-field input[type="text"],
.nkro-field input[type="email"],
.nkro-field input[type="date"],
.nkro-field select,
.nkro-field textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--nkro-border);
  border-radius: var(--nkro-r-md);
  font-size: var(--nkro-fs-base);
  font-family: var(--nkro-font-body);
  color: var(--nkro-text);
  background: var(--nkro-bg);
  transition: border-color var(--nkro-t-fast);
}
.nkro-field input:focus, .nkro-field select:focus, .nkro-field textarea:focus {
  outline: none;
  border-color: var(--nkro-primary);
  background: var(--nkro-bg-card);
}

/* ── Tag cloud (taxonomy) ─────────────────────────────────────── */
.nkro-tag-cloud { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.nkro-tag {
  display: inline-block;
  padding: 3px var(--sp-3);
  background: var(--nkro-secondary);
  color: var(--nkro-primary);
  border-radius: var(--nkro-r-full);
  font-size: var(--nkro-fs-xs);
  text-decoration: none;
  transition: background var(--nkro-t-fast);
}
.nkro-tag:hover { background: var(--nkro-primary); color: #fff; }

/* ── Skip link (accessibility) ────────────────────────────────── */
.nkro-skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  background: var(--nkro-primary);
  color: #fff;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--nkro-r-md);
  font-size: var(--nkro-fs-sm);
  z-index: calc(var(--z-loading) + 1);
  text-decoration: none;
  font-weight: 600;
}
.nkro-skip-link:focus { top: var(--sp-4); }

/* ── Mood chip ────────────────────────────────────────────────── */
.nkro-mood-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-3);
  border-radius: var(--nkro-r-full);
  font-size: var(--nkro-fs-xs);
  background: var(--nkro-bg);
  border: 1px solid var(--nkro-border);
  color: var(--nkro-text-secondary);
}

/* ── Section with gradient bg ─────────────────────────────────── */
.nkro-section--gradient {
  background: linear-gradient(160deg, var(--nkro-bg) 0%, var(--nkro-secondary) 100%);
}

/* ── Gallery page (taxonomy archive) ─────────────────────────── */
.nkro-taxonomy-header {
  padding: calc(var(--nkro-header-h) + var(--sp-10)) 0 var(--sp-8);
  text-align: center;
}
.nkro-taxonomy-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: var(--sp-3);
}
.nkro-taxonomy-desc { color: var(--nkro-text-secondary); font-size: var(--nkro-fs-md); }
.nkro-taxonomy-count {
  display: inline-block;
  background: var(--nkro-secondary);
  color: var(--nkro-primary);
  padding: 2px var(--sp-3);
  border-radius: var(--nkro-r-full);
  font-size: var(--nkro-fs-xs);
  font-weight: 600;
  margin-left: var(--sp-2);
}

/* ── WP admin bar offset ──────────────────────────────────────── */
.admin-bar .nkro-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .nkro-header { top: 46px; } }