/* caphegiasi.vn — mobile-friendly CSS Grid layout */
:root {
  --brown:#352014;
  --brown-light:#61412b;
  --green:#115511;
  --cream:#faf7f1;
  --ink:#241b16;
  --muted:#78716b;
  --border:#eee8df;
  --radius:9px;
  --gap:18px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:20px
}

body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif
}

button, input {
  font:inherit
}

button, a, input {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

a {
  color:inherit;
  text-decoration:none
}

button {
  border:0
}

img {
  max-width:100%;
  display:block;
  object-fit:cover
}

h1, h2, h3, p {
  margin:0
}

h2 {
  font-size:25px;
  line-height:1.25;
  letter-spacing:-.6px
}

h3 {
  font-size:15px;
  line-height:1.4
}

p {
  color:var(--muted)
}

button:focus-visible, a:focus-visible, input:focus-visible {
  border: 2px solid #bb841e;
}

.container {
  width:min(1160px,calc(100% - 40px));
  margin-inline:auto
}

.grid {
  display:grid;
  gap:var(--gap)
}

.topbar {
  background:var(--brown);
  color:#e5d7cb;
  font-size:14px;
  padding:7px 0
}

.topbar .container {
  display:grid;
  grid-template-columns:1fr auto
}

.header {
  display:grid;
  grid-template-columns:280px minmax(0,1fr) auto auto;
  align-items:center;
  gap:22px;
  padding-block:22px
}

.brand {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:28px;
  font-weight:800;
  letter-spacing:-1.3px;
  white-space:nowrap;
  line-height:1.2
}

.brand small {
  display:block;
  font-size:10px;
  font-weight:400;
  letter-spacing:0;
  margin-top:6px;
  color:var(--muted)
}

.bean {
  color:var(--brown-light);
  font-size:52px;
  transform:rotate(-35deg)
}

.gold {
  color:#b98626
}

.search {
  display:grid;
  grid-template-columns:minmax(0,1fr) 45px;
  border:1px solid #e3dcd1;
  border-radius:7px;
  overflow:hidden
}

.search input {
  border:0;
  min-width:0;
  padding:12px;
  background:#fdfbf8
}

.search button {
  background:var(--green);
  color:#fff;
  font-size:28px;
  line-height:1
}

.btn {
  display:inline-block;
  background:var(--green);
  color:#fff;
  padding:11px 18px;
  border-radius:6px;
  font-weight:750;
  font-size:15px;
  white-space:nowrap;
  transition:background .2s,transform .2s
}

.btn:hover {
  background:#1b701b;
  /*transform:translateY(-1px)*/
}

.cart-button {
  background:none;
  white-space:nowrap;
  font-size:15px;
  font-weight:700
}

.cart-button span {
  background:#b88724;
  color:white;
  border-radius:50%;
  padding:2px 6px;
  font-size:14px
}

.nav-wrap {
  background:var(--brown);
  color:white
}

.nav {
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:14px
}

.category-toggle {
  padding:15px 12px;
  background:var(--green);
  color:#fff;
  font-weight:750;
  text-align:left
}

.nav #nav-links {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:center;
  text-align:center;
  font-size:15px;
  font-weight:650;
  
}

.nav a {
  padding:13px 10px;
 white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav a:hover {
  color:var(--green)
}

.menu-toggle {
  display:none
}

.hero-grid {
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:14px;
  margin-top:12px
}

.categories {
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:5px 0;
  background:#fdfbf8
}

.categories a {
  display:grid;
  grid-template-columns:1fr auto;
  padding:10px 15px;
  font-size:15px
}

.categories a:hover {
  background:#fff0c0
}

.hero {
  min-height:500px;	
  position:relative;
  overflow:hidden;
  background:var(--brown);
  border-radius:var(--radius);
}

.hero-bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}

.hero-copy {
  position:relative;
  z-index:1;
  padding:40px;
  max-width:560px;
  color:white
}
.hero p {
  color:#eee0d0;
  margin:20px 0 20px
}

.eyebrow {
  font-size:10px;
  font-weight:800;
  letter-spacing:1.6px
}

.hero h1 {
  font-size:clamp(32px,3.8vw,48px);
  line-height:1.05;
  letter-spacing:-1.7px
}

.hero h1 span {
  color:var(--green)
}

.shortcuts {
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:20px
}

.tile {
  display:grid;
  grid-template-columns:90px minmax(0,1fr) 24px;
  gap:12px;
  align-items:center;
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  padding-right:12px;
  transition:border-color .2s
}

.tile:hover {
  border-color:#d6b05b
}

.tile img {
  width:100%;
  height:110px
}

.tile p {
  font-size:15px;
  margin-top:5px
}

.tile>span {
  background:#fae2ac;
  border-radius:50%;
  text-align:center
}

section[id] {
  scroll-margin-top:20px
}

main>section, main>.promos {
  margin-top:32px
}

.section-heading {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:15px;
  margin-bottom:15px
}

.section-heading p, .muted {
  font-size:15px;
  color:var(--muted)
}

.text-button {
  background:none;
  color:#996824;
  padding:0;
  text-align:left;
  font-size:15px;
  font-weight:650
}


.sample-note {
  font-size:10px;
  margin-top:10px
}

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

.promo {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:white;
  background:var(--brown);
  border-radius:var(--radius);
  padding:25px;
  min-height:215px;
  display:grid;
  align-content:center;
}

.promo-bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:-2;
}

.promo::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#2e1c12ef,#2e1c1280);
  z-index:-1;
  pointer-events:none;
}

.promo-copy {
  display:grid;
  justify-items:start;
  gap:12px;
}
.promo p {
  color:#eaded4;
  font-size:15px
}

.second {
  background:linear-gradient(90deg,#352014,#61412b)
}

.benefits {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
  font-size:15px;
}

.mixing {
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.blog {
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.article {
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden
}

.article img {
  width:100%;
  height:auto;
  aspect-ratio:2
}

.article>div {
  padding:15px
}

.article h3{
	display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
   overflow: hidden;
	}
.article p {
  font-size:15px;
  margin:8px 0 12px;
  
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
   overflow: hidden;
}

.market {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.market .tile {
  grid-template-columns:150px minmax(0,1fr) 24px
}

.links {
  grid-template-columns:repeat(5,minmax(0,1fr))
}

.links a {
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  text-align:center
}

.links img {
  width:100%;
  height:auto;
  aspect-ratio:1.3
}

.links h3 {
  font-size:15px;
  padding:9px
}

.newsletter {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  align-items:center;
  padding:24px;
  background:var(--brown);
  color:white;
  border-radius:var(--radius);
  margin-bottom:32px
}

.newsletter h2 {
  font-size:21px
}

.newsletter p {
  color:#d4c5b9;
  font-size:15px
}

.newsletter form {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  background:white;
  border-radius:6px;
  overflow:hidden
}

.newsletter input {
  border:0;
  padding:12px;
  min-width:0
}

.newsletter .btn {
  border-radius:0
}

footer {
  background:#281c15;
  color:#f5eee6;
  padding:32px 0 15px;
  margin-top:25px;
}

.footer-grid {
  grid-template-columns:2fr 1fr 1fr 1.3fr;
  gap:30px
}

.footer-grid h3 {
  margin-bottom:12px;
  font-size:15px
}

.footer-grid p, .footer-grid a:not(.brand) {
  font-size:14px;
  color:#cfc0b3
}

.footer-grid a:not(.brand) {
  display:block;
  margin-block:7px
}

.copyright {
  border-top:1px solid #5c493b;
  margin-top:25px;
  padding-top:15px;
  color:#b9a89b;
  font-size:10px
}

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

.skip {
  color:#fff;
  position:absolute;
  top:-100px;
  z-index:100;
  background:var(--green);
  padding:10px
}

.skip:focus {
  top:0
}

dialog {
  border:0;
  border-radius:12px;
  padding:30px;
  width:min(520px,calc(100% - 32px));
  box-shadow:0 20px 80px #0003
}

dialog::backdrop {
  background:#24170bb3
}

.modal-close {
  position:absolute;
  right:12px;
  top:8px;
  background:none;
  font-size:26px
}

dialog h2 {
  margin:0 25px 15px 0
}

dialog p {
  margin-bottom:14px
}

dialog form {
  display:grid;
  grid-template-columns:1fr;
  gap:10px
}

dialog label {
  font-size:15px
}

dialog input, dialog textarea {
  width:100%;
  padding:10px;
  border:1px solid #ddd3c6;
  border-radius:5px;
  font:inherit
}

dialog textarea {
  min-height:80px
}

.cart-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  border-bottom:1px solid var(--border);
  padding:10px 0
}

.cart-row button {
  background:none;
  color:#a3432c
}

.cart-footer {
  margin-top:18px;
  display:grid;
  gap:10px
}

#toast {
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:var(--brown);
  color:white;
  padding:12px 20px;
  border-radius:8px;
  max-width:calc(100% - 30px);
  display:none;
  z-index:20
}

#toast.show {
  display:block
}

[hidden] {
  display:none!important
}

/* Tablet */

@media(max-width:1024px) {
.header {
    grid-template-columns:1fr auto auto;
    gap:16px
  }

.search {
    grid-column:1/-1;
    grid-row:2
  }

.brand {
    font-size:25px
  }

.hero-grid, .nav {
    grid-template-columns:190px minmax(0,1fr)
  }

.products {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

.hero-copy {
    padding:30px
  }

.shortcuts, .mixing {
    gap:12px
  }

.tile {
    grid-template-columns:65px minmax(0,1fr) 18px;
    gap:8px
  }

.tile h3 {
    font-size:15px
  }

.market .tile {
    grid-template-columns:110px minmax(0,1fr) 18px
  }

.footer-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

.newsletter {
    grid-template-columns:1fr
  }

.nav #nav-links {
	display:none;
    font-size:15px
  }
}

/* Mobile */

@media(max-width:640px) {
.container {
    width:calc(100% - 28px)
  }

.topbar {
    font-size:9px
  }

.topbar span {
    display:none
  }

.header {
    grid-template-columns:minmax(0,1fr) auto;
    gap:13px;
    padding-block:14px
  }

.brand {
    font-size:24px
  }

.bean {
    font-size:37px
  }

.brand small {
    font-size:8px
  }

.header>.quote-open {
    display:none
  }

.search {
    grid-column:1/-1
  }

.nav {
    grid-template-columns:minmax(0,1fr) auto;
    gap:0
  }

.category-toggle {
    font-size:15px;
    padding:13px 10px
  }

.menu-toggle {
    display:block;
    background:var(--brown);
    color:white;
    padding:10px 15px
  }

.nav #nav-links {
    display:none;
    grid-column:1/-1;
    grid-template-columns:1fr;
    text-align:left;
    padding:8px 0
  }

.nav #nav-links.open {
    display:grid
  }

.hero-grid {
    grid-template-columns:minmax(0,1fr);
    gap:10px
  }

.categories {
    display:none
  }

.categories.open {
    display:block
  }

.categories a {
    font-size:15px;
    padding:9px 15px
  }

.hero {
    min-height:280px;
    background-position:center right
  }

.hero-copy {
    padding:28px 22px
  }

.hero h1 {
    font-size:35px
  }

.hero p {
    font-size:15px;
    max-width:300px
  }

.hero .eyebrow {
    font-size:9px
  }

.shortcuts {
    grid-template-columns:1fr;
    margin-top:14px;
    gap:9px
  }

.shortcuts .tile {
    grid-template-columns:86px minmax(0,1fr) 25px
  }

.shortcuts img {
    height:74px
  }

.products {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }

.product-content {
    padding:10px
  }

.product h3 {
    font-size:15px;
    min-height:36px
  }

.price {
    font-size:15px
  }

.section-heading {
    gap:10px
  }

.section-heading h2 {
    font-size:21px
  }

.section-heading>span {
    display:none
  }

.promos, .mixing, .blog, .market {
    grid-template-columns:1fr
  }

.promo {
    min-height:190px;
    padding:23px
  }

.promo h2 {
    font-size:27px
  }

.mixing .tile {
    grid-template-columns:90px minmax(0,1fr) 25px
  }

.mixing img {
    height:85px
  }

.blog {
    gap:15px
  }

.article img {
    aspect-ratio:2.2
  }

.market .tile {
    grid-template-columns:110px minmax(0,1fr) 20px
  }

.links {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }

.newsletter {
    padding:20px;
    gap:17px
  }

.newsletter form {
    grid-template-columns:1fr
  }

.newsletter .btn {
    padding:12px
  }

.footer-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:23px
  }

.footer-grid>div:first-child {
    grid-column:1/-1
  }

main>section, main>.promos {
    margin-top:25px
  }

.text-button {
    font-size:14px
  }

.product-actions .btn {
    font-size:14px
  }
}

@media(prefers-reduced-motion:reduce) {
html {
    scroll-behavior:auto
  }

*, *::before, *::after {
    transition:none!important
  }
}

/* Local inline SVG icons: no icon fonts or third-party requests. */

.icon {
  width:21px;
  height:21px;
  flex-shrink:0;
  display:inline-block;
  vertical-align:middle
}

.bean {
  display:inline-grid;
  transform:none;
  place-items:center
}

.bean .icon {
  width:43px;
  height:49px;
  stroke-width:1.7
}

.section-heading h2, .promo h2, .newsletter h2 {
  display:flex;
  align-items:center;
  gap:10px
}

.section-heading h2 .icon {
  color:var(--brown-light);
  width:27px;
  height:27px
}

.promo h2 .icon, .newsletter h2 .icon {
  width:28px;
  height:28px
}

.nav #nav-links a {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px
}

.category-toggle, .menu-toggle, .cart-button, .header>.quote-open, #post-open {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px
}

.category-toggle {
  justify-content:flex-start
}

.categories a {
  grid-template-columns:19px minmax(0,1fr) auto;
  align-items:center;
  gap:9px
}

.categories a .icon {
  width:18px;
  height:18px
}

.search button, .add-cart {
  display:grid;
  place-items:center
}

.benefits span {
  display:flex;
  align-items:center;
  gap:7px
}

.benefits .icon {
  width:22px;
  height:22px
}

.product h3 {
  min-height:44px
}

.product-actions {
  grid-template-columns:minmax(0,1fr) 36px
}

.hero-copy {
  max-width:590px
}

.brand {
  font-size:27px
}

.header {
  grid-template-columns:280px minmax(0,1fr) auto auto;
  gap:16px
}

@media(max-width:1024px) {
.header {
    grid-template-columns:minmax(0,1fr) auto auto
  }

.nav #nav-links a {
    gap:5px
  }

.nav #nav-links .icon {
    width:18px;
    height:18px
  }
}

@media(min-width:641px) {
.menu-toggle {
    display:none
  }
}

@media(max-width:640px) {
.header {
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px
  }

.header>.quote-open {
    display:none
  }

.brand {
    font-size:23px
  }

.bean .icon {
    width:32px;
    height:38px
  }

.cart-button {
    gap:4px
  }

.cart-button .icon {
    width:18px;
    height:18px
  }

.nav #nav-links a {
    justify-content:flex-start;
    gap:10px
  }

.product h3 {
    min-height:42px
  }

.product-actions .btn {
    white-space:normal;
    line-height:1.35;
    min-height:38px
  }

.section-heading h2 .icon {
    width:23px;
    height:23px
  }

.section-heading h2 {
    gap:7px
  }

.tile h3 {
    overflow-wrap:anywhere
  }

.benefits {
    gap:12px
  }
}

/* Shared background-image card: shortcuts, mixing, classified categories. */

.tile.background-card {
  --card-height:132px;
  --image-fade:linear-gradient(90deg,rgba(250,247,241,0) 5%,rgba(250,247,241,.12) 24%,rgba(250,247,241,.88) 47%,#faf7f1 72%);
  position:relative;
  isolation:isolate;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) 26px;
  min-height:var(--card-height);
  height:auto;
  padding:20px 14px 20px 0;
  gap:9px;
  border-color:#eee8df;
  background:var(--cream);
}

.tile.background-card>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
  z-index:-2
}

.tile.background-card::before {
  content:"";
  position:absolute;
  inset:0;
  background:var(--image-fade);
  z-index:-1;
  pointer-events:none
}

.tile.background-card>div {
  grid-column:2;
  min-width:0;
  align-self:center
}

.tile.background-card h3 {
  font-size:16px;
  line-height:1.35;
  color:var(--ink)
}

.tile.background-card p {
  font-size:15px;
  line-height:1.45;
  color:#62584f;
  margin-top:6px;
  overflow-wrap:anywhere
}

.tile.background-card>span {
  grid-column:3;
  align-self:center;
  width:25px;
  height:25px;
  line-height:25px;
  background:#fff8ec;
  color:var(--brown);
  box-shadow:0 0 0 1px #e2d6c5
}

.tile.background-card:hover {
  border-color:#228B22;
  box-shadow:0 4px 14px #35201412
}

.tile.background-card:focus-visible {
  outline-offset:3px
}

.market .background-card {
  --card-height:144px
}

@media(max-width:1024px) {
.tile.background-card {
    grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr) 24px;
    --card-height:140px;
    padding-right:10px
  }

.tile.background-card h3 {
    font-size:15px
  }
}

@media(max-width:640px) {
.tile.background-card {
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) 25px;
    --card-height:128px;
    padding:18px 12px 18px 0;
    gap:8px
  }

.tile.background-card h3 {
    font-size:16px
  }

.market .background-card {
    --card-height:140px
  }
}

/* Supplied logo and aligned, wider category column. */

:root {
  --sidebar-width:270px;
  --sidebar-gap:28px
}

.brand {
  min-width:0;
  max-width:100%;
  display:block;
  line-height:1
}

.site-logo {
  display:block;
  width:270px;
  max-width:100%;
  height:auto;
  object-fit:contain
}

.nav, .hero-grid {
  grid-template-columns:var(--sidebar-width) minmax(0,1fr);
  gap:var(--sidebar-gap)
}

.category-toggle {
  width:100%;
  padding-inline:15px;
  white-space:normal
}

.categories a {
  padding-inline:16px;
  gap:11px
}

.categories a>span {
  /*justify-self:end*/
}

footer .brand {
  width:270px;
  padding:9px 12px;
  background:white;
  border-radius:7px
}

@media(max-width:1024px) {
:root {
    --sidebar-width:240px;
    --sidebar-gap:18px
  }

.site-logo {
    width:260px
  }
}

@media(max-width:640px) {
.nav {
    grid-template-columns:minmax(0,1fr) auto;
    gap:0
  }

.hero-grid {
    grid-template-columns:minmax(0,1fr);
    gap:10px
  }

.header .brand {
    width:100%;
    min-width:0
  }

.header .site-logo {
    width:100%;
    max-width:240px
  }

.categories {
    width:100%
  }

footer .brand {
    width:min(270px,100%)
  }
}

/* Icon ảnh dùng chung, giữ kích thước theo từng vị trí. */
img.icon {
  object-fit: contain;
}
.btn-green{background: linear-gradient(180deg, #115511 0%, #278027 50%, #093B09 100%);}
.btn-green:hover{background: linear-gradient(180deg, #093B09 0%, #278027 50%, #115511 100%);}


/* Blog video */


.carousel.videos {
  --items-desktop:5;
  --items-tablet:3;
  --items-mobile:2;
}

#blog-video > .section-heading {
  grid-template-columns:minmax(0,1fr) auto;
}

.video-card {
  overflow:hidden;
  background:white;
  border:1px solid var(--border);
  border-radius:var(--radius);
}

.video-card > video {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:9 / 16;
  object-fit:contain;
  background:#16120f;
}

.video-content {
  padding:15px;
}

.video-content h3 {
  font-size:17px;
  line-height:1.4;
  margin-bottom:8px;
}

.video-content p {
  font-size:15px;
}

@media(max-width:640px) {
  .video-content {
    padding:12px;
  }

  .video-content h3 {
    font-size:16px;
  }
}


.catalog-intro {
  padding:10px 20px; 
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:var(--radius);
}

.catalog-intro h1, .detail-info h1 {
  font-size:clamp(26px,3vw,36px);
  line-height:1.25;
  margin:10px 0;
}