/* =========================================================
   AMORA – Brand Tabs (Clean rewrite)
   ========================================================= */
.amora-brand-tabs{
  --gold:#F1BF50;
  --brown:#3C1F1A;
  --muted:rgba(43,35,34,.68);
  --line:rgba(60,31,26,.14);
  --bg:#FBFAF8;

  padding:36px 0;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(241,191,80,.10), transparent 55%),
    radial-gradient(900px 420px at 85% 10%, rgba(60,31,26,.06), transparent 60%),
    var(--bg);
}

.amora-brand-tabs .amora-container{
  width:min(1080px, calc(100% - 32px));
  margin:0 auto;
}

/* ---------- Head ---------- */
.amora-head{ text-align:center; margin:0 0 14px; }
.amora-title{
  margin:0;
  font:600 clamp(26px, 3vw, 44px)/1.08 ui-serif, Georgia;
  color:var(--brown);
}

/* ---------- Tabbar (desktop) ---------- */
.amora-tabbar{
  margin:14px auto 0;
  padding:8px;
  display:flex;
  gap:8px;
  justify-content:center;

  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.70);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 22px rgba(60,31,26,.08);
}

.amora-tab{
  border:0;
  background:transparent;
  cursor:pointer;

  padding:10px 14px;
  border-radius:999px;

  font:700 12px/1 ui-sans-serif, system-ui;
  letter-spacing:.12em;
  text-transform:uppercase;

  white-space:nowrap;     /* quan trọng để không bể */
  line-height:1;          /* chống chồng chữ */
  color:rgba(60,31,26,.74);
}

.amora-tab.is-active{
  background:linear-gradient(180deg, rgba(241,191,80,.92), rgba(241,191,80,.78));
  color:rgba(60,31,26,.92);
  box-shadow:0 10px 18px rgba(241,191,80,.18);
}

/* ---------- Panels ---------- */
.amora-panels{ margin-top:14px; }

.amora-panel{
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(12px);
  box-shadow:0 16px 44px rgba(60,31,26,.10);
  padding:14px;
  overflow:hidden; /* chống tràn bóng + tràn grid */
}

/* Layout: image + content */
.amora-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:start;
}

/* Hero image */
.amora-hero{
  margin:0;
  overflow:hidden;
  height:320px;
  position:relative;
  box-shadow:0 14px 36px rgba(60,31,26,.12);
}
.amora-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.amora-hero:after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(340px 220px at 70% 20%, rgba(241,191,80,.18), transparent 60%),
    linear-gradient(180deg, rgba(60,31,26,.04), rgba(60,31,26,.18));
  pointer-events:none;
}

/* Body text */
.amora-body{ padding:2px 2px 0; }
.amora-eyebrow{
  margin:0 0 6px;
  font:700 11px/1.2 ui-sans-serif, system-ui;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:rgba(60,31,26,.55);
}
.amora-h3{
  margin:0 0 6px;
  font:600 22px/1.22 ui-serif, Georgia;
  color:var(--brown);
}
.amora-p{
  margin:0 0 10px;
  font:400 14px/1.75 ui-sans-serif, system-ui;
  color:rgba(43,35,34,.75);
}

/* Cards */
.amora-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}

.amora-cards--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.amora-cards--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }

.amora-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.88);
  padding:12px;

  display:flex;
  gap:10px;
  align-items:flex-start;

  box-shadow:0 10px 22px rgba(60,31,26,.06);
}
.amora-ico{
  width:36px; height:36px;
  border-radius:12px;
  background:rgba(241,191,80,.14);
  border:1px solid rgba(241,191,80,.22);
  padding:7px;
  object-fit:contain;
  flex:0 0 36px;
}
.amora-card > div{ min-width:0; } /* chống tràn text */

.amora-card h4{
  margin:0 0 4px;
  font:600 15px/1.25 ui-serif, Georgia;
  color:var(--brown);
}
.amora-card p{
  margin:0;
  font:400 13px/1.6 ui-sans-serif, system-ui;
  color:rgba(43,35,34,.70);
}

/* Strip images under cards (desktop/tablet) */
.amora-strip{
  margin:10px 0 0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
}
.amora-strip img{
  width:100%;
  height:84px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(60,31,26,.10);
  box-shadow:0 10px 22px rgba(60,31,26,.06);
  display:block;
}

/* =========================================================
   Tablet
   ========================================================= */
@media (max-width: 820px){
  .amora-layout{ grid-template-columns:1fr; }
  .amora-hero{ height:220px; }
  .amora-cards--3{ grid-template-columns:1fr; }
}

/* =========================================================
   Mobile – FIX ALL (tabbar + cards + strip full width)
   ========================================================= */
@media (max-width: 560px){

  .amora-brand-tabs{ padding:22px 0; }
  .amora-brand-tabs .amora-container{ width:calc(100% - 22px); }

  .amora-title{
    font-size:24px;
    line-height:1.1;
  }

  /* Tabbar becomes scrollable chips (NO fade overlays) */
  .amora-tabbar{
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;

    padding:8px;
    gap:8px;
    border-radius:999px;

    scrollbar-width:none;
  }
  .amora-tabbar::-webkit-scrollbar{ display:none; height:0; }

  .amora-tab{
    flex:0 0 auto;
    padding:9px 12px;
    font-size:10.5px;
    letter-spacing:.12em;
    white-space:nowrap;
    line-height:1;
  }

  .amora-panel{
    padding:12px;
    border-radius:18px;
  }

  .amora-hero{ height:180px; border-radius:16px; }

  .amora-h3{ font-size:20px; }
  .amora-p{ font-size:14px; }

  /* Cards: 1 column */
  .amora-cards,
  .amora-cards--2,
  .amora-cards--3{
    grid-template-columns:1fr !important;
    gap:10px;
  }

  /* Strip images: FULL WIDTH stack */
  .amora-strip{
    grid-template-columns:1fr !important;
    gap:10px;
    margin-top:12px;
  }
  .amora-strip img{
    height:120px;   /* nhìn “đã” hơn */
    border-radius:16px;
  }
}