/* Nha Cai Chinh Chu — components: buttons, badges, cats, breadcrumb, stars, rank-table. */

/* ---------- Buttons ---------- */
.ncc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
  padding:.78rem 1.3rem;border-radius:999px;border:1px solid transparent;transition:.15s ease;
  text-decoration:none;white-space:nowrap}
.ncc-btn:hover{text-decoration:none;transform:translateY(-1px)}
.ncc-btn--gold{background:linear-gradient(180deg,var(--ncc-gold-400),var(--ncc-gold-500));
  color:#231a06;box-shadow:0 8px 22px -10px rgba(232,184,75,.6)}
.ncc-btn--gold:hover{color:#231a06;box-shadow:0 12px 26px -10px rgba(232,184,75,.75)}
.ncc-btn--ghost{background:transparent;color:var(--ncc-text);border-color:var(--ncc-line-2)}
.ncc-btn--ghost:hover{color:var(--ncc-gold-500);border-color:var(--ncc-gold-500)}
.ncc-btn--red{background:linear-gradient(180deg,var(--ncc-red-600),var(--ncc-red-700));color:#fff}
.ncc-btn--red:hover{color:#fff}
.ncc-btn--lg{padding:.95rem 1.7rem;font-size:1.05rem}
.ncc-btn--sm{padding:.5rem .9rem;font-size:.86rem}

/* ---------- Badges / seal ---------- */
.ncc-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.76rem;font-weight:700;
  padding:.28rem .6rem;border-radius:999px;letter-spacing:.02em}
.ncc-badge--seal{color:var(--ncc-gold-500);border:1px solid var(--ncc-gold-700);
  background:rgba(232,184,75,.08)}
.ncc-badge--seal svg{color:var(--ncc-gold-500)}

/* ---------- Stars ---------- */
.ncc-stars{display:inline-flex;align-items:center;gap:.06em;color:var(--ncc-line-2);font-size:1rem}
.ncc-star.is-on{color:var(--ncc-gold-500)}
.ncc-star.is-half{background:linear-gradient(90deg,var(--ncc-gold-500) 50%,var(--ncc-line-2) 50%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ncc-stars b{margin-left:.4rem;color:var(--ncc-text);font-size:.9rem}

/* ---------- Breadcrumb ---------- */
.ncc-breadcrumb{margin:0 0 1.2rem;font-size:.86rem;color:var(--ncc-faint)}
.ncc-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;padding:0;margin:0}
.ncc-breadcrumb li:not(:last-child)::after{content:"›";margin-left:.35rem;color:var(--ncc-line-2)}
.ncc-breadcrumb a{color:var(--ncc-muted)}
.ncc-breadcrumb [aria-current]{color:var(--ncc-gold-500)}

/* ---------- Category tiles (home) ---------- */
.ncc-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.ncc-cat{display:flex;flex-direction:column;gap:.2rem;padding:1.1rem 1rem;border-radius:var(--ncc-r);
  background:var(--ncc-ink-700);border:1px solid var(--ncc-line);position:relative;overflow:hidden}
.ncc-cat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--ncc-gold-500),var(--ncc-red-600))}
.ncc-cat:hover{text-decoration:none;border-color:var(--ncc-gold-700);transform:translateY(-2px);transition:.15s}
.ncc-cat__name{font-weight:800;color:var(--ncc-text);font-size:1.05rem}
.ncc-cat__sub{color:var(--ncc-muted);font-size:.85rem}

/* ---------- Grids ---------- */
.ncc-grid{display:grid;gap:1.1rem}
.ncc-grid--cards{grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}

/* ---------- Brand card (hub) ---------- */
.ncc-brand-card{background:var(--ncc-ink-700);border:1px solid var(--ncc-line);border-radius:var(--ncc-r);
  padding:1.1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.7rem;position:relative}
.ncc-brand-card:hover{border-color:var(--ncc-gold-700);box-shadow:var(--ncc-shadow-gold)}
.ncc-brand-card__head{display:flex;flex-direction:column;gap:.5rem}
.ncc-brand-card__head .ncc-badge{align-self:flex-start}
.ncc-brand-card__name{font-weight:800;font-size:1.3rem;color:var(--ncc-text)}
.ncc-brand-card__name:hover{color:var(--ncc-gold-500)}
.ncc-brand-card__facts{margin:0;display:flex;flex-direction:column;gap:.35rem}
.ncc-brand-card__facts div{display:flex;justify-content:space-between;gap:.6rem;font-size:.9rem;
  border-bottom:1px dashed var(--ncc-line);padding-bottom:.3rem}
.ncc-brand-card__facts dt{color:var(--ncc-faint);margin:0}
.ncc-brand-card__facts dd{color:var(--ncc-text);margin:0;text-align:right;font-weight:600}
.ncc-brand-card__row{display:flex;gap:.5rem;margin-top:auto}
.ncc-brand-card__row .ncc-btn{flex:1;border-radius:10px;padding:.65rem .6rem;font-size:.92rem;white-space:nowrap}

/* ---------- Rank table (home) ---------- */
.ncc-rank-wrap{overflow-x:auto;border-radius:var(--ncc-r);border:1px solid var(--ncc-line)}
.ncc-rank-table{width:100%;border-collapse:collapse;min-width:580px;background:var(--ncc-ink-800)}
.ncc-rank-table th{background:var(--ncc-ink-700);color:var(--ncc-gold-500);text-align:left;
  font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;padding:.8rem 1rem}
.ncc-rank-table td{padding:.85rem 1rem;border-top:1px solid var(--ncc-line);vertical-align:middle}
.ncc-rank-table__pos{font-weight:800;color:var(--ncc-gold-500);font-size:1.1rem}
.ncc-rank-table__name{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--ncc-text)}
.ncc-rank-table__name svg{color:var(--ncc-gold-500)}
.ncc-rank-table__bonus{color:var(--ncc-muted);font-size:.9rem}
.ncc-rank-table tr:hover td{background:var(--ncc-ink-700)}

/* ---------- Intro narrow column (centered) ---------- */
.ncc-narrow--center{margin-inline:auto}

/* ---------- "Xem tất cả" button spacing under tables/grids ---------- */
.ncc-rank-wrap + .ncc-center,
.ncc-grid + .ncc-center{margin-top:var(--ncc-sp-4)}
.ncc-hero__hint{margin-top:1rem;color:var(--ncc-muted);font-size:.95rem}
.ncc-hero__hint a{color:var(--ncc-gold-500);text-decoration:underline;text-underline-offset:3px}

/* ---------- Burger (icon centered) ---------- */
.ncc-burger svg{display:block}

/* ---------- Brand search ---------- */
.ncc-search{position:relative;display:flex;align-items:center;gap:.5rem;
  background:var(--ncc-ink-700);border:1px solid var(--ncc-line-2);border-radius:999px;
  padding:.35rem .35rem .35rem 1rem}
.ncc-search--hero{max-width:560px;margin:0 auto;box-shadow:0 14px 34px -16px rgba(0,0,0,.7)}
.ncc-search__ico{display:inline-flex;color:var(--ncc-gold-500);flex:0 0 auto}
.ncc-search__input{flex:1 1 auto;min-width:0;background:none;border:0;outline:none;
  color:var(--ncc-text);font:inherit;font-size:1rem;padding:.55rem 0}
.ncc-search__input::placeholder{color:var(--ncc-faint)}
.ncc-search__btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  background:linear-gradient(180deg,var(--ncc-gold-400),var(--ncc-gold-500));color:#231a06;
  border:0;border-radius:999px;padding:.6rem 1.1rem;font-weight:700}
.ncc-search__btn:hover{box-shadow:0 10px 22px -10px rgba(232,184,75,.7)}
.ncc-search__btn svg{display:none}
.ncc-search__sug{position:absolute;left:0;right:0;top:calc(100% + .5rem);z-index:50;
  background:var(--ncc-ink-800);border:1px solid var(--ncc-line-2);border-radius:14px;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.85);overflow:hidden;max-height:340px;overflow-y:auto}
.ncc-search__sug a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.7rem 1rem;color:var(--ncc-text);border-bottom:1px solid var(--ncc-line);font-weight:600}
.ncc-search__sug a:last-child{border-bottom:0}
.ncc-search__sug a:hover,.ncc-search__sug a.is-cur{background:var(--ncc-ink-700);text-decoration:none}
.ncc-search__sug .ncc-sug__v{font-size:.78rem;font-weight:600;color:var(--ncc-gold-500);
  border:1px solid var(--ncc-line-2);border-radius:999px;padding:.1rem .55rem;flex:0 0 auto}
.ncc-search__sug .ncc-sug__empty{padding:.9rem 1rem;color:var(--ncc-muted)}
.ncc-search--menu .ncc-search__btnlbl{display:none}
.ncc-search--menu .ncc-search__btn{padding:.6rem .7rem}
.ncc-search--menu .ncc-search__btn svg{display:block}
/* menu-search only inside the mobile dropdown (hidden in desktop header) */
.ncc-nav__search{display:none}

@media (max-width:760px){
  /* 1) categories: 3 full-width rows */
  .ncc-cats{grid-template-columns:1fr;gap:.7rem}
  .ncc-cat{padding:.9rem 1rem}
  /* 2) brand cards: horizontal swipe on every page */
  .ncc-grid--cards{display:flex;flex-wrap:nowrap;gap:.9rem;
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:-20px;padding:.2rem 20px 1rem;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ncc-grid--cards::-webkit-scrollbar{display:none}
  .ncc-grid--cards > .ncc-brand-card{flex:0 0 82%;max-width:82%;scroll-snap-align:start}
  .ncc-grid--cards > .ncc-brand-card.is-paged{display:none}
  /* 3) mobile menu: distinct panel, left-aligned, separated items, search on top */
  .ncc-nav{display:none;position:absolute;left:0;right:0;top:66px;flex-direction:column;
    background:var(--ncc-ink-800);border:1px solid var(--ncc-line-2);border-top:0;
    border-radius:0 0 16px 16px;padding:.8rem;gap:.15rem;
    box-shadow:0 28px 50px -18px rgba(0,0,0,.85)}
  .ncc-nav.is-open{display:flex}
  .ncc-nav__search{display:block;margin-bottom:.6rem}
  .ncc-nav a{width:100%;text-align:left;border-radius:10px;padding:.85rem 1rem;
    font-size:1.02rem;border-bottom:1px solid var(--ncc-line)}
  .ncc-nav a:last-child{border-bottom:0}
  .ncc-nav a.is-active{color:var(--ncc-gold-500);background:var(--ncc-ink-700)}
  .ncc-search--hero{max-width:none}
  /* rank table: full-bleed background to section edges, compact, fits width */
  .ncc-rank-wrap{border-left:0;border-right:0;border-radius:0;margin-inline:-20px}
  .ncc-rank-table{min-width:0}
  .ncc-rank-table th,.ncc-rank-table td{padding:.7rem .5rem;font-size:.92rem}
  .ncc-rank-table th:first-child,.ncc-rank-table td:first-child{padding-left:20px}
  .ncc-rank-table th:last-child,.ncc-rank-table td:last-child{padding-right:20px}
  /* hide secondary "Khuyến mãi" column on mobile teaser so score+link fit */
  .ncc-rank-table th:nth-child(4),.ncc-rank-table td:nth-child(4){display:none}
}

/* Silo perelinkovka (brand-main <-> contexts) */
.ncc-silo{margin:2.5rem 0 0;padding:1.25rem 1.4rem;border:1px solid var(--ncc-line);border-radius:14px;background:var(--ncc-ink-800)}
.ncc-silo__title{margin:0 0 .85rem;font-size:1.05rem;color:var(--ncc-text)}
.ncc-silo__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.ncc-silo__list li{margin:0}
.ncc-silo__list a{display:inline-block;padding:.5rem .9rem;border:1px solid var(--ncc-line-2);border-radius:999px;color:var(--ncc-gold-400);text-decoration:none;font-size:.95rem;line-height:1.2;transition:background .15s,border-color .15s}
.ncc-silo__list a:hover{background:rgba(232,184,75,.10);border-color:var(--ncc-gold-500)}
@media (max-width:480px){.ncc-silo__list a{font-size:.9rem;padding:.45rem .8rem}}