.nip-tet-item {
  --nip-tet-nav-gutter: max(24px, calc((100% - 1180px) / 2));
  --nip-tet-gold: #efbd37;
  --nip-tet-gold-light: #ffe99c;
  --nip-tet-paper: #f7f1e4;
  --nip-tet-ink: #462b19;
}
.nip6-nav:has(.nip-tet-desktop) { position: relative; }
.nip6-nav nav > ul:has(> .nip-tet-desktop) { justify-content: flex-start; }
.nip6-nav nav > ul > .nip-tet-desktop { position: static; padding: 0; flex: none; }
.nip-tet-details { height: 100%; }
.nip-tet-details > .nip-tet-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  height: 100%;
  width: clamp(110px, 11vw, 140px);
  padding: 0 12px;
  color: var(--nip-tet-ink);
  background: linear-gradient(90deg, transparent, var(--nip-tet-gold-light) 17%, var(--nip-tet-gold) 37% 63%, var(--nip-tet-gold-light) 83%, transparent);
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.nip-tet-trigger::-webkit-details-marker { display: none; }
.nip-tet-trigger::marker { content: ""; }
.nip-tet-details:not([open]) > .nip-tet-panel { display: none; }
.nip-tet-panel {
  position: absolute;
  z-index: 1010;
  top: 100%;
  inset-inline: var(--nip-tet-nav-gutter);
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  min-height: 305px;
  padding: 133px clamp(72px, 12.5vw, 174px) 24px 32px;
  border-radius: 0 0 18px 18px;
  background: var(--nip-tet-paper);
  box-shadow: 0 12px 30px #28231126;
}
.nip-tet-decor { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.nip-tet-wave, .nip-tet-wash { position: absolute; inset: 0; width: 100%; height: 100%; }
.nip-tet-wash { background: linear-gradient(180deg, #fbf6e81a, #fbf6e8ae 58%, #fbf6e8da); }
.nip-tet-branch, .nip-tet-lanterns { position: absolute; display: block; object-fit: contain; }
.nip-tet-branch {
  top: -7px;
  left: -5px;
  width: min(40%, 405px);
  height: 132px;
  object-position: top left;
}
.nip-tet-lanterns {
  top: 12px;
  right: 12px;
  width: clamp(150px, 17vw, 225px);
  height: 282px;
  object-position: top right;
}
.nip-tet-lanterns-mobile { display: none; }
.nip-tet-item .nip-tet-panel > a.nip-tet-product {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 0 2px 6px;
  border-radius: 10px;
  color: var(--nip-tet-ink);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}
.nip-tet-item .nip-tet-panel > a.nip-tet-product:hover,
.nip-tet-item .nip-tet-panel > a.nip-tet-product:focus-visible { color: var(--nip-tet-ink); text-decoration: none; }
.nip-tet-trigger:focus-visible,
.nip-tet-product:focus-visible { outline: 2px solid #8a5625; outline-offset: -3px; }
.nip-tet-product img {
  display: block;
  width: min(100%, 104px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid #fffaf0;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 1px #b78a41, 0 6px 14px #49351f30;
}
.nip-tet-product:hover img { box-shadow: 0 0 0 2px #a97017, 0 6px 14px #49351f40; }
.nip-tet-product span { padding: 3px 6px; }
.nip-tet-mobile .nip-tet-trigger { width: 100%; min-height: 46px; }
.nip-tet-mobile .nip-tet-panel {
  position: relative;
  inset: auto;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 6px;
  min-height: 0;
  padding: 105px 12px 12px;
}
.nip-tet-mobile .nip-tet-wash { background: linear-gradient(180deg, #fbf6e81a, #fbf6e8d9 46%, #fbf6e8e8); }
.nip-tet-mobile .nip-tet-branch { width: min(60%, 210px); height: 86px; top: -3px; }
.nip-tet-mobile .nip-tet-lanterns { width: 101px; height: 129px; top: 8px; right: 7px; }
.nip-tet-mobile .nip-tet-panel > a.nip-tet-product { gap: 4px; font-size: 13px; }
.nip-tet-mobile .nip-tet-product img { width: min(100%, 64px); }
@media (max-width: 767px) {
  .nip-tet-mobile .nip-tet-lanterns-mobile {
    display: block;
    position: absolute;
    width: 60px;
    height: 98px;
    top: 57px;
    left: -7px;
    opacity: .82;
    background: url("den-long-xanh-do.webp") center / contain no-repeat;
  }
}
@media (min-width: 768px) and (max-width: 1080px) {
  .nip-tet-desktop .nip-tet-panel { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: 22px 60px; }
  .nip-tet-desktop .nip-tet-trigger { font-size: 13px; }
  .nip-tet-desktop .nip-tet-lanterns { height: 118px; }
}