/* ==========================================================
   GIAO VỊ — Bánh quê Việt Nam
   Phong cách: đồng quê chiều nắng, cây cổ thụ, lúa chín, dòng sông
   Dựa trên stylesheet OpenCart/Bootstrap 5 cũ — giữ nguyên selector
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Playfair+Display:wght@500;700;800&family=Dancing+Script:wght@600;700&display=swap');

/* ---------- Bảng màu ---------- */
:root {
  --gv-cream: #fff8e7;
  --gv-paper: rgba(255, 248, 231, .92);
  --gv-brown: #4a3320;
  --gv-brown-soft: #7a5a3a;
  --gv-gold: #d9a431;
  --gv-gold-deep: #b97420;
  --gv-rice: #e2b53c;
  --gv-green: #5f8a2e;
  --gv-green-dark: #3d6120;
  --gv-clay: #b5552b;
  --gv-water: #3d8a8f;
  --gv-line: #e6d6a8;

  --bs-body-font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: #4a3320;
  --bs-link-color: #9a5a16;
  --bs-link-hover-color: #5f7a2c;
  --bs-primary: #c9852a;
  --bs-primary-rgb: 201, 133, 42;
  --bs-border-color: #e6d6a8;
  --bs-tertiary-bg: #fbf1d6;
  --bs-gray-600: #7a5a3a;
}

html {
  background: #f9e3b0;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  height: 100%;
  background: transparent;
  font-family: var(--bs-body-font-family);
  color: var(--gv-brown);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gv-gold); color: #fff; }

h1, h2, h3, h4, h5, h6 {
  color: var(--gv-brown);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: .01em;
}

#content h1, #content h2, #content h3,
#column-left h3, #column-right h3 {
  text-shadow: 0 1px 0 rgba(255, 248, 231, .9), 0 0 18px rgba(255, 248, 231, .85);
}

/* gạch chân hình bông lúa dưới tiêu đề chính */
#content > h1::after, #content > h2::after, .gv-heading::after {
  content: "";
  display: block;
  width: 120px;
  height: 14px;
  margin: 10px 0 18px;
  background:
    radial-gradient(ellipse 5px 9px at 50% 50%, var(--gv-gold) 98%, transparent) center / 12px 14px no-repeat,
    linear-gradient(90deg, transparent, var(--gv-gold) 30%, var(--gv-gold) 70%, transparent) center / 100% 2px no-repeat;
}

a { transition: color .25s ease; }

legend {
  padding: 7px 0;
  margin-bottom: 20px;
  border-bottom: 1px dashed var(--gv-gold);
  font-family: 'Playfair Display', serif;
}

label {
  font-size: 12px;
  font-weight: 500;
  color: var(--gv-brown-soft);
}

/* Chrome border line */
button:focus {
  outline: none !important;
}

/* ==========================================================
   KHUNG TRANG
   ========================================================== */

/* container */
#container {
  width: 100%;
  min-height: 100%;
  position: absolute;
  margin-bottom: 300px;
  background: transparent;
  z-index: 1;
}

/* content */
#content, #column-left, #column-right {
  padding-bottom: 730px;
}

@media (min-width: 576px) {
  #content, #column-left, #column-right {
    padding-bottom: 400px;
  }
}

/* alert */
#alert {
  z-index: 9999;
  position: fixed;
  top: 30%;
  left: 50%;
  width: 320px;
  margin-left: -160px;
}

@media (min-width: 992px) {
  #alert { width: 600px; margin-left: -300px; }
}
@media (min-width: 1140px) {
  #alert { width: 600px; margin-left: -300px; }
}
@media (min-width: 1320px) {
  #alert { width: 600px; margin-left: -300px; }
}

#alert .alert {
  margin-bottom: 15px;
  border-radius: 14px;
  background: var(--gv-cream);
  border: 1px solid var(--gv-line);
  color: var(--gv-brown);
  backdrop-filter: blur(6px);
}

#alert .alert-primary   { box-shadow: 0 0 0 5px rgb(var(--bs-primary-rgb), 0.15); }
#alert .alert-secondary { box-shadow: 0 0 0 5px rgb(var(--bs-secondary-rgb), 0.1); }
#alert .alert-success   { box-shadow: 0 0 0 5px rgb(var(--bs-success-rgb), 0.15); border-left: 5px solid var(--gv-green); }
#alert .alert-warning   { box-shadow: 0 0 0 5px rgb(var(--bs-warning-rgb), 0.15); border-left: 5px solid var(--gv-gold); }
#alert .alert-danger    { box-shadow: 0 0 0 5px rgb(var(--bs-danger-rgb), 0.12); border-left: 5px solid var(--gv-clay); }
#alert .alert-info      { box-shadow: 0 0 0 5px rgb(var(--bs-info-rgb), 0.12); }
#alert .alert-light     { box-shadow: 0 0 0 5px rgb(var(--bs-light-rgb), 0.1); }
#alert .alert-dark      { box-shadow: 0 0 0 5px rgb(var(--bs-dark-rgb), 0.1); }

/* ==========================================================
   ĐẦU TRANG
   ========================================================== */

/* top */
#top {
  background: linear-gradient(180deg, rgba(255, 248, 231, .94), rgba(251, 241, 214, .86));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gv-line);
  box-shadow: 0 6px 24px rgba(120, 80, 20, .12);
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 5px;
}

/* dải hoa văn tre đan dưới thanh top */
#top::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--gv-gold) 0 14px, transparent 14px 20px);
  opacity: .55;
}

#top ul.list-inline { margin-bottom: 0; }

#top .list-inline-item > a,
#top .list-inline-item .dropdown > a,
#top .list-inline-item .dropdown > span {
  font-size: 1.1em;
  color: var(--gv-brown-soft);
  line-height: 40px;
  vertical-align: middle;
  padding: 10px 0 5px 0;
}

#top .list-inline-item > a:hover,
#top .list-inline-item .dropdown > a:hover { color: var(--gv-clay); }

/* logo */
#logo {
  text-align: center;
  margin: 7px 0 7px 0;
}

#logo img { max-width: 200px; }

#logo a, #logo h1 a, .gv-brand {
  font-family: 'Dancing Script', cursive;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gv-green-dark);
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .7), 0 0 20px rgba(226, 181, 60, .5);
}

@media (min-width: 768px) {
  #logo { text-align: left; }
}

/* search */
#search { margin-bottom: 10px; }

#search .form-control-lg {
  height: 40px;
  font-size: 13px;
  line-height: 20px;
  padding: 0 14px;
  border-radius: 999px 0 0 999px;
  background: #fffdf5;
  border: 1px solid var(--gv-line);
}

#search .btn-lg {
  font-size: 15px;
  line-height: 18px;
  padding: 0.57rem 28px;
  border-radius: 0 999px 999px 0;
  text-shadow: none;
}

/* cart */
#cart { margin-bottom: 10px; }
#cart .img-thumbnail { min-width: 100px; border-radius: 10px; }
#cart .btn-lg { font-size: 15px; line-height: 18px; padding: 14px 35px; border-radius: 14px; }

#cart .dropdown-menu {
  background: var(--gv-cream);
  border: 1px solid var(--gv-line);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(90, 55, 10, .25);
}
#cart .dropdown-menu li { min-width: 300px; }

@media (max-width: 768px) {
  #cart .dropdown-menu li { min-width: 100%; }
}

/* menu — màu lá chuối */
#menu {
  background-color: #4f7a2a;
  background-image: linear-gradient(to bottom, #5f8a2e, #3d6120);
  background-repeat: repeat-x;
  border: 1px solid #335218;
  border-color: #3d6120 #3d6120 #26400f;
  min-height: 40px;
  border-radius: 14px;
  padding: 0 1rem;
  margin-bottom: 20px;
  box-shadow: 0 10px 26px rgba(40, 70, 15, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
}

#menu .navbar-nav > li > a {
  color: #fff8e7;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  padding: 10px 15px;
  background-color: transparent;
  border-radius: 10px;
  transition: background-color .25s, color .25s;
}

#menu .navbar-nav > li > a:hover {
  background-color: rgba(226, 181, 60, .28);
  color: #fff;
}

#menu .dropdown-menu {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: var(--gv-cream);
  border: 1px solid var(--gv-line);
  box-shadow: 0 18px 40px rgba(90, 55, 10, .25);
}

#menu .dropdown-menu a { color: var(--gv-brown); }
#menu .dropdown-menu a:hover { color: var(--gv-clay); background: rgba(226, 181, 60, .18); }

#menu .dropdown-inner {
  display: flex;
  flex-direction: column;
}

#menu .dropdown-inner ul {
  width: 100%;
  min-width: 200px;
}

@media (min-width: 960px) {
  #menu .dropdown:hover .dropdown-menu { display: block; }
  #menu .dropdown-inner { flex-direction: row; }
  #menu .nav-item + .nav-item + .nav-item .dropdown-column-3 { left: -200px; }
  #menu .nav-item + .nav-item + .nav-item .dropdown-column-4 { left: -400px; }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-2 { left: -200px; }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-3 { left: -400px; }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-4 { left: -600px; }
}

#category {
  float: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 40px;
  color: #fff8e7;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

#menu .navbar-toggler i {
  color: #fff8e7;
  border-color: #fff8e7;
  font-size: 0.9em;
}

/* ==========================================================
   BOOTSTRAP: tinh chỉnh
   ========================================================== */

div.required .col-form-label:before, div.required .form-label:before {
  content: "* ";
  color: var(--gv-clay);
  font-weight: bold;
}

.form-switch-lg { font-size: 20px; min-height: 30px; line-height: 30px; }
.nav-tabs { margin-bottom: 15px; border-bottom-color: var(--gv-line); }
.nav-tabs .nav-link { color: var(--gv-brown-soft); border-radius: 12px 12px 0 0; }
.nav-tabs .nav-link.active { background: var(--gv-cream); color: var(--gv-clay); border-color: var(--gv-line) var(--gv-line) var(--gv-cream); }
.form-check .form-check-input { margin-top: 0.25rem; }
.form-check-input:checked { background-color: var(--gv-green); border-color: var(--gv-green-dark); }

@media (min-width: 768px) {
  .col-form-label { text-align: right; }
}

.form-control, .form-select {
  background-color: #fffdf5;
  border: 1px solid var(--gv-line);
  border-radius: 10px;
  color: var(--gv-brown);
}
.form-control:focus, .form-select:focus {
  border-color: var(--gv-gold);
  box-shadow: 0 0 0 .25rem rgba(217, 164, 49, .25);
  background-color: #fff;
}

/* nút */
.btn { border-radius: 12px; font-weight: 600; transition: transform .2s ease, box-shadow .25s ease, background .25s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  --bs-btn-color: #fffaf0;
  --bs-btn-bg: #c9852a;
  --bs-btn-border-color: #a86d1b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b5731c;
  --bs-btn-hover-border-color: #8f5913;
  --bs-btn-active-bg: #9c6016;
  --bs-btn-active-border-color: #8f5913;
  background-image: linear-gradient(180deg, #e3a73a, #c9852a);
  box-shadow: 0 6px 14px rgba(185, 116, 32, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-primary:hover { box-shadow: 0 10px 22px rgba(185, 116, 32, .45), inset 0 1px 0 rgba(255, 255, 255, .35); }

.btn-success, .btn-light {
  --bs-btn-bg: #5f8a2e; --bs-btn-border-color: #3d6120; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #4d7524; --bs-btn-hover-border-color: #335218;
}
.btn-light { --bs-btn-bg: #fbf1d6; --bs-btn-border-color: var(--gv-line); --bs-btn-color: var(--gv-brown); --bs-btn-hover-bg: #f3e3b3; --bs-btn-hover-border-color: var(--gv-gold); --bs-btn-hover-color: var(--gv-brown); }

.dropdown-menu { background: var(--gv-cream); border: 1px solid var(--gv-line); border-radius: 12px; }
.dropdown-item:hover { background: rgba(226, 181, 60, .2); color: var(--gv-clay); }

.card, .well, .list-group-item, .modal-content, .accordion-item {
  background: var(--gv-paper);
  border: 1px solid var(--gv-line);
  border-radius: 16px;
  box-shadow: 0 8px 26px rgba(120, 80, 20, .1);
}

.table { --bs-table-bg: rgba(255, 248, 231, .85); --bs-table-border-color: var(--gv-line); color: var(--gv-brown); }
.table > thead { background: #f3e3b3; }

.pagination .page-link { color: var(--gv-brown-soft); background: var(--gv-cream); border-color: var(--gv-line); }
.pagination .page-item.active .page-link { background: var(--gv-green); border-color: var(--gv-green-dark); color: #fff; }

/* ==========================================================
   CHÂN TRANG — dòng sông ở cuối trang
   ========================================================== */

footer {
  border: 0;
  position: absolute;
  bottom: -1px;
  width: 100%;
  padding-top: 38px;
  background: linear-gradient(180deg, #3d8a8f 0%, #2d6a6e 28%, #234944 70%, #1b332f 100%);
  border-top: 0;
  color: #f4e9cc;
}

footer hr {
  border-top: none;
  border-bottom: 1px solid rgba(244, 233, 204, .25);
}

footer a { color: #e8dcb8; text-decoration: none; }
footer a:hover { color: #ffd979; }

footer h5 {
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffe9a8;
  margin-top: 10px;
  margin-bottom: 10px;
  letter-spacing: .04em;
}

/* dòng sông do JS chèn vào đầu footer */
.gv-river {
  position: absolute;
  left: 0; right: 0;
  top: -76px;
  height: 78px;
  overflow: hidden;
  pointer-events: none;
}

.gv-wave {
  --tile: 1200px;
  position: absolute;
  left: 0; bottom: 0;
  width: calc(100% + var(--tile));
  height: 100%;
  background-repeat: repeat-x;
  background-size: var(--tile) 100%;
  animation: gv-flow var(--speed, 18s) linear infinite;
  will-change: transform;
}

.gv-wave.w1 {
  --tile: 1400px; --speed: 34s;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><path d='M0 40C200 0 400 0 600 40S1000 80 1200 40V80H0Z' fill='%23a7dcd6' fill-opacity='.55'/></svg>");
}
.gv-wave.w2 {
  --tile: 1000px; --speed: 24s;
  height: 80%;
  animation-direction: reverse;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><path d='M0 40C200 0 400 0 600 40S1000 80 1200 40V80H0Z' fill='%2362b3b3' fill-opacity='.85'/></svg>");
}
.gv-wave.w3 {
  --tile: 800px; --speed: 15s;
  height: 58%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><path d='M0 40C200 0 400 0 600 40S1000 80 1200 40V80H0Z' fill='%233d8a8f'/></svg>");
}

@keyframes gv-flow {
  to { transform: translateX(calc(var(--tile) * -1)); }
}

/* ánh nắng lấp lánh trên mặt nước */
.gv-glint {
  position: absolute;
  inset: 22px 0 0 0;
  background:
    radial-gradient(ellipse 18px 2px at 12% 30%, rgba(255, 246, 200, .95), transparent),
    radial-gradient(ellipse 26px 2px at 38% 62%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(ellipse 14px 2px at 63% 24%, rgba(255, 238, 170, .9), transparent),
    radial-gradient(ellipse 22px 2px at 86% 55%, rgba(255, 255, 255, .8), transparent);
  background-size: 420px 100%;
  animation: gv-glint 6s ease-in-out infinite alternate, gv-glint-move 40s linear infinite;
}
@keyframes gv-glint { from { opacity: .25; } to { opacity: 1; } }
@keyframes gv-glint-move { to { background-position-x: -420px; } }

/* thuyền nan trôi trên sông */
.gv-boat-wrap {
  position: absolute;
  left: -160px; top: 2px;
  width: 110px;
  animation: gv-boat 80s linear infinite;
}
.gv-boat { display: block; width: 100%; animation: gv-bob 3.4s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes gv-boat { to { transform: translateX(calc(100vw + 340px)); } }
@keyframes gv-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(4px) rotate(1.5deg); }
}

/* ==========================================================
   BREADCRUMB
   ========================================================== */

.breadcrumb {
  margin: 0 0 20px 0;
  padding: 8px 0;
  border: 1px solid var(--gv-line);
  border-radius: 12px;
  background: rgba(255, 248, 231, .82);
  backdrop-filter: blur(6px);
}
.breadcrumb i { font-size: 15px; }
.breadcrumb > li.breadcrumb-item {
  text-shadow: 0 1px 0 #FFF;
  padding: 0 20px;
  position: relative;
  white-space: nowrap;
}
.breadcrumb > li.breadcrumb-item > a { text-decoration: none; }
.breadcrumb > li.breadcrumb-item:after {
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  right: -5px;
  width: 29px;
  height: 29px;
  border-right: 1px solid var(--gv-line);
  border-bottom: 1px solid var(--gv-line);
  transform: rotate(-45deg);
}
.breadcrumb > li.breadcrumb-item + li:before { content: ""; padding: 0; }

/* ==========================================================
   SẢN PHẨM — thẻ bánh
   ========================================================== */

.product-thumb {
  border: 1px solid var(--gv-line);
  border-radius: 18px;
  background: var(--gv-paper);
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 28px rgba(120, 80, 20, .13);
  position: relative;
  height: 100%;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}

.product-thumb:hover {
  transform: translateY(-8px) rotate(-.4deg);
  box-shadow: 0 22px 44px rgba(120, 80, 20, .25);
}

.product-thumb .image { text-align: center; overflow: hidden; }
.product-thumb .image img { transition: transform .6s ease; }
.product-thumb:hover .image img { transform: scale(1.07); }
.product-thumb .image a:hover { opacity: 0.9; }

.product-thumb .description {
  padding: 15px;
  margin-bottom: 45px;
}

.product-thumb .description h4 { font-weight: bold; font-size: 1.05rem; }
.product-thumb .description h4 a { color: var(--gv-brown); text-decoration: none; }
.product-thumb .description h4 a:hover { color: var(--gv-clay); }

.product-thumb .button {
  display: flex;
  position: absolute;
  width: 100%;
  bottom: 0;
}

.product-thumb .button button {
  width: 33.33%;
  border: none;
  border-top: 1px solid var(--gv-line);
  background-color: #fbf1d6;
  color: var(--gv-brown-soft);
  line-height: 38px;
  text-align: center;
  transition: background-color .25s, color .25s;
}

.product-thumb .button button:hover {
  color: #fff;
  background-color: var(--gv-green);
  text-decoration: none;
  cursor: pointer;
}

.product-thumb .button button + button { border-left: 1px solid var(--gv-line); }

@media (min-width: 960px) {
  .product-list .product-thumb { display: flex; }
  .product-list .product-thumb .image { flex-direction: column; margin-bottom: 0px; }
  .product-list .product-thumb .content { flex-direction: column; flex: 75%; position: relative; }
  .product-list .product-thumb .button { border-left: 1px solid var(--gv-line); width: calc(100% - 15px); margin-left: 15px; }
}

.rating .fa-stack { width: 20px; }
.rating .fa-star { color: #f2b632; font-size: 15px; }
.rating .fa-star + .fa-star { color: #d98a12; }

/* giá */
.price { color: var(--gv-brown); }
.price-new { font-weight: 700; color: var(--gv-clay); font-size: 1.1em; }
.price-old { color: #a08a6a; text-decoration: line-through; }
.price-tax { color: #9a8667; font-size: 12px; display: block; }

/* blog */
.blog-thumb {
  border: 1px solid var(--gv-line);
  border-radius: 18px;
  background: var(--gv-paper);
  box-shadow: 0 10px 28px rgba(120, 80, 20, .12);
  margin-bottom: 15px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}
.blog-thumb:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(120, 80, 20, .22); }
.blog-thumb h4 { font-weight: bold; }
.blog-thumb .image { text-align: center; margin-bottom: 15px; }
.blog-thumb .image a:hover { opacity: 0.85; }
.blog-thumb .description { padding: 15px; }

/* ==========================================================
   THEME CUSTOM
   ========================================================== */

#cookie {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 9999;
  opacity: 0.97;
  color: #fff3d2;
  background: linear-gradient(180deg, #5b3a1e, #3e2812);
  border-top: 3px solid var(--gv-gold);
  box-shadow: 0 -10px 30px rgba(40, 20, 0, .35);
}

#cookie div { font-size: 16px; color: #fff3d2; }

/* ==========================================================
   CẢNH ĐỒNG QUÊ (do giaovi.js dựng)
   ========================================================== */

#gv-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* bầu trời chiều: xanh dịu → vàng mật → cam nắng ở chân trời */
  background:
    radial-gradient(120% 70% at 86% 14%, rgba(255, 233, 160, .85), transparent 55%),
    linear-gradient(180deg, #8fc6dc 0%, #bfdcd8 22%, #f7e5b4 52%, #f9cf86 74%, #f3b365 100%);
}

.gv-layer {
  position: absolute;
  left: -3vw; right: -3vw;
  top: 0; bottom: -70px;
  will-change: transform;
}

/* mặt trời */
.gv-sun-wrap { position: absolute; top: 15vh; right: 14vw; width: 0; height: 0; }
.gv-sun {
  --sun: clamp(90px, 12vw, 170px);
  position: absolute;
  width: var(--sun); height: var(--sun);
  left: calc(var(--sun) / -2); top: calc(var(--sun) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffde6, #ffe48f 45%, #ffbf4d 100%);
  box-shadow:
    0 0 50px 24px rgba(255, 224, 140, .75),
    0 0 150px 80px rgba(255, 190, 90, .4),
    0 0 320px 160px rgba(255, 170, 70, .22);
  animation: gv-sun 9s ease-in-out infinite;
}
@keyframes gv-sun { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* tia nắng xiên chiếu xuống ruộng */
.gv-layer.gv-light { mix-blend-mode: screen; opacity: .85; }
.gv-beam {
  position: absolute;
  top: 0; left: 0;
  width: var(--w);
  margin-left: calc(var(--w) / -2);
  height: 160vmax;
  transform-origin: 50% 0;
  transform: rotate(var(--r));
  background: linear-gradient(to bottom, rgba(255, 238, 175, .5), rgba(255, 232, 160, .16) 45%, transparent 80%);
  filter: blur(7px);
  animation: gv-beam 10s ease-in-out var(--d) infinite;
}
@keyframes gv-beam { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* mây */
.gv-cloud {
  position: absolute;
  top: var(--y);
  left: -30vw;
  width: var(--w); height: calc(var(--w) * .22);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 236, 200, .6));
  filter: blur(3px);
  animation: gv-cloud var(--t) linear var(--d) infinite;
}
.gv-cloud::before, .gv-cloud::after {
  content: ""; position: absolute; background: inherit; border-radius: 50%;
}
.gv-cloud::before { width: 42%; height: 150%; left: 14%; top: -70%; }
.gv-cloud::after  { width: 32%; height: 125%; left: 50%; top: -45%; }
@keyframes gv-cloud { to { transform: translateX(150vw); } }

/* đồi núi xa */
.gv-hills { position: absolute; left: 0; width: 100%; bottom: 27vh; height: 30vh; }
.gv-hills.far  { bottom: 28vh; opacity: .75; }

/* con suối cuối cánh đồng */
.gv-stream {
  position: absolute; left: 0; right: 0; bottom: 25vh; height: 4.2vh;
  background: linear-gradient(180deg, #8fd0d0, #4f9ea3);
  box-shadow: 0 -2px 10px rgba(255, 240, 190, .6);
  overflow: hidden;
}
.gv-stream::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(100deg, transparent 0 40px, rgba(255, 255, 255, .5) 40px 44px, transparent 44px 90px),
    linear-gradient(90deg, transparent, rgba(255, 240, 180, .55) 80%, transparent);
  background-size: 180px 100%, 100% 100%;
  animation: gv-stream 5s linear infinite;
}
@keyframes gv-stream { to { background-position-x: -180px, 0; } }

/* ruộng lúa */
.gv-row { position: absolute; inset: 0; }
.gv-row::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--y);
  background: var(--fill);
}
.gv-clump {
  position: absolute;
  bottom: calc(var(--y) - 3px);
  width: calc(var(--h) * .07 + 2px);
  height: var(--h);
  background: linear-gradient(to top, var(--c1) 0%, var(--c1) 30%, var(--c2) 68%, var(--c3) 100%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform-origin: 50% 100%;
  animation: gv-sway var(--t) ease-in-out var(--d) infinite;
}
.gv-clump::before, .gv-clump::after {
  content: ""; position: absolute; bottom: 0; width: 100%; height: 82%;
  background: inherit; border-radius: inherit; transform-origin: 50% 100%;
}
.gv-clump::before { left: -190%; transform: rotate(-13deg); }
.gv-clump::after  { left: 190%;  transform: rotate(14deg) scaleY(.92); }
@keyframes gv-sway {
  0%, 100% { transform: rotate(calc(var(--a) * -1)); }
  50%      { transform: rotate(var(--a)); }
}

/* cây cổ thụ */
.gv-tree {
  position: absolute;
  left: -7vh; bottom: 2vh;
  height: 90vh; aspect-ratio: 3 / 4;
  overflow: visible;
}
.gv-canopy { transform-origin: 300px 420px; animation: gv-canopy 9s ease-in-out infinite; }
.gv-canopy.b { animation-duration: 11s; animation-delay: -3s; }
.gv-canopy.c { animation-duration: 13s; animation-delay: -6s; }
@keyframes gv-canopy {
  0%, 100% { transform: rotate(-.9deg) translateX(-2px); }
  50%      { transform: rotate(.9deg) translateX(3px); }
}
.gv-aroot { animation: gv-aroot 6s ease-in-out infinite; }
@keyframes gv-aroot { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }

@media (max-width: 767px) {
  .gv-tree { height: 62vh; left: -30vw; opacity: .95; }
  .gv-sun-wrap { right: 18vw; }
}

/* ánh hoàng hôn mờ ở rìa */
.gv-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(120, 60, 10, .22)),
    linear-gradient(0deg, rgba(255, 190, 90, .18), transparent 40%);
}

/* lá rơi + bụi nắng */
#gv-leaves {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* nút bật/tắt hiệu ứng */
#gv-toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: 9998;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #fff8e7;
  background: linear-gradient(180deg, #6f9a38, #3d6120);
  box-shadow: 0 8px 20px rgba(40, 70, 15, .4);
  cursor: pointer; display: grid; place-items: center;
  transition: transform .25s ease, filter .25s;
}
#gv-toggle:hover { transform: rotate(-12deg) scale(1.08); }
#gv-toggle svg { width: 22px; height: 22px; fill: #fff8e7; }
html.gv-fx-off #gv-toggle { filter: grayscale(.8) brightness(.9); }
html.gv-fx-off #gv-scene *, html.gv-fx-off .gv-river * { animation: none !important; }
html.gv-fx-off #gv-leaves { display: none; }

/* hiện dần khi cuộn tới */
.gv-js .gv-reveal { opacity: 0; transform: translateY(26px) scale(.98); }
.gv-js .gv-reveal.gv-in {
  opacity: 1; transform: none;
  transition: opacity .7s ease var(--gv-delay, 0s), transform .8s cubic-bezier(.2, .8, .2, 1) var(--gv-delay, 0s);
}
/* sau khi hiện xong, trả lại transition hover cho thẻ */
.gv-js .product-thumb.gv-in.gv-done, .gv-js .blog-thumb.gv-in.gv-done {
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}

/* ripple khi bấm nút */
.btn { position: relative; overflow: hidden; }
.gv-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .45);
  transform: scale(0); animation: gv-ripple .6s ease-out forwards;
}
@keyframes gv-ripple { to { transform: scale(3.2); opacity: 0; } }

/* người dùng muốn giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  #gv-scene *, .gv-river *, .gv-reveal { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  #gv-leaves { display: none; }
  .gv-js .gv-reveal { opacity: 1; transform: none; }
}