/* =====================================================================
   HIMACAKE - Base Reset & Typography
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  font-size:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--color-text);
  background:var(--color-bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:700;
  margin:0 0 var(--sp-3) 0;
  color:var(--color-text);
  line-height:1.25;
}
/* Fluid headings: stable on phone → desktop without “blown-up” typography */
h1{font-size:clamp(1.5rem, calc(1.05rem + 1.4vw), var(--fs-32))}
h2{font-size:clamp(1.35rem, calc(0.95rem + 1.05vw), var(--fs-28))}
h3{font-size:clamp(1.2rem, calc(0.88rem + 0.82vw), var(--fs-24))}
h4{font-size:clamp(1.1rem, calc(0.85rem + 0.62vw), var(--fs-20))}
h5{font-size:var(--fs-18)}
h6{font-size:var(--fs-16)}
p{margin:0 0 var(--sp-3) 0}
a{color:var(--color-secondary);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--color-primary-dark)}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}

/* Layout helpers */
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--sp-4);
  padding-inline:max(var(--sp-4),env(safe-area-inset-left)) max(var(--sp-4),env(safe-area-inset-right));
}
.container--narrow{max-width:var(--max-narrow)}
.row{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.col{flex:1 1 0}
.center-text{text-align:center}
.muted{color:var(--color-text-muted)}
.hidden{display:none !important}

/* Horizontal scroll wrapper for tables on narrow viewports — dùng quanh table.cart-table / table rộng */
.table-responsive{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 calc(-1 * var(--sp-3));
  padding:0 var(--sp-3);
  width:100%;
  box-sizing:border-box;
}
.table-responsive table{min-width:520px}

@media(max-width:480px){
  .container{padding-inline:max(var(--sp-3),env(safe-area-inset-left)) max(var(--sp-3),env(safe-area-inset-right))}
}
.section{padding:var(--sp-9) 0}
.section--soft{background:var(--color-bg-soft)}
.section__head{display:flex;align-items:end;justify-content:space-between;margin-bottom:var(--sp-6);gap:var(--sp-4);flex-wrap:wrap}
.section__head h2{margin:0}
.section__head .more{font-size:var(--fs-14);color:var(--color-text-soft);font-weight:500}
.section__head .more:hover{color:var(--color-primary-dark)}

/* Skip-link for a11y */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:var(--sp-4);top:var(--sp-4);background:#fff;padding:var(--sp-2) var(--sp-3);z-index:9999;border-radius:var(--radius)}