/* DOCHI CATEGORY WHEEL V1 */

.dcw-root{
  position:fixed;
  left:0;
  top:50%;
  width:250px;
  height:360px;
  transform:translateY(-50%);
  z-index:120000;
  pointer-events:none;
  font-family:inherit;
}

.dcw-toggle{
  position:absolute;
  z-index:8;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  min-height:86px;
  border:0;
  border-radius:0 18px 18px 0;
  padding:9px 5px;
  background:#087147;
  color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.16);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  pointer-events:auto;
  touch-action:manipulation;
}

.dcw-toggle-icon{
  font-size:18px;
  line-height:1;
}

.dcw-toggle-label{
  max-width:40px;
  font-size:9px;
  line-height:1.05;
  font-weight:900;
  text-align:center;
  letter-spacing:.02em;
}

.dcw-arc{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateX(-26px) scale(.94);
  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}

.dcw-root[data-open="true"] .dcw-arc{
  opacity:1;
  transform:translateX(0) scale(1);
  pointer-events:auto;
}

.dcw-arc::before{
  content:"";
  position:absolute;
  left:-105px;
  top:28px;
  width:270px;
  height:304px;
  border:1px dashed rgba(8,113,71,.25);
  border-left-color:transparent;
  border-radius:50%;
  pointer-events:none;
}

.dcw-item{
  position:absolute;
  transform:translate(-50%,-50%);
  max-width:145px;
  min-height:38px;
  border:1px solid rgba(8,113,71,.17);
  border-radius:999px;
  padding:8px 12px;
  background:rgba(255,255,255,.97);
  color:#18362d;
  box-shadow:0 5px 17px rgba(19,48,39,.11);
  font:inherit;
  font-size:12px;
  font-weight:850;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:auto;
  touch-action:none;
  transition:
    left .18s ease,
    top .18s ease,
    transform .18s ease,
    opacity .18s ease,
    background .18s ease,
    color .18s ease;
}

.dcw-item[data-slot="-2"]{
  left:72px;
  top:12%;
  opacity:.72;
}

.dcw-item[data-slot="-1"]{
  left:126px;
  top:30%;
  opacity:.88;
}

.dcw-item[data-slot="0"]{
  left:157px;
  top:50%;
  min-height:44px;
  padding:10px 15px;
  border-color:#087147;
  transform:translate(-50%,-50%) scale(1.06);
  opacity:1;
}

.dcw-item[data-slot="1"]{
  left:126px;
  top:70%;
  opacity:.88;
}

.dcw-item[data-slot="2"]{
  left:72px;
  top:88%;
  opacity:.72;
}

.dcw-item.is-selected{
  background:#087147;
  border-color:#087147;
  color:#fff;
}

.dcw-empty{
  position:absolute;
  left:70px;
  top:50%;
  transform:translateY(-50%);
  width:150px;
  padding:10px 12px;
  border-radius:14px;
  background:#fff;
  color:#75847f;
  box-shadow:0 5px 18px rgba(0,0,0,.1);
  font-size:11px;
  font-weight:800;
  text-align:center;
}

.dcw-hint{
  position:absolute;
  left:56px;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
  transform-origin:center;
  color:rgba(24,54,45,.45);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  pointer-events:none;
}

@media(min-width:760px){
  .dcw-root{
    top:48%;
  }

  .dcw-toggle:hover{
    background:#075f3d;
  }

  .dcw-item:hover{
    border-color:#087147;
  }
}

/* =========================================================
   DOCHI CATEGORY WHEEL V1.3
   - luôn hiện mọi tab
   - nhỏ hơn / thanh hơn
   ========================================================= */

.dcw-root{
  display:block !important;
  width:205px;
  height:300px;
}

.dcw-toggle{
  width:40px;
  min-height:70px;
  border-radius:0 14px 14px 0;
  padding:7px 4px;
  gap:4px;
  box-shadow:0 4px 14px rgba(0,0,0,.13);
}

.dcw-toggle-icon{
  font-size:15px;
}

.dcw-toggle-label{
  max-width:34px;
  font-size:8px;
  line-height:1.05;
}

.dcw-arc::before{
  left:-88px;
  top:23px;
  width:220px;
  height:252px;
  border-color:rgba(8,113,71,.18);
  border-left-color:transparent;
}

.dcw-item{
  max-width:118px;
  min-height:32px;
  padding:6px 10px;
  font-size:10.5px;
  box-shadow:0 3px 11px rgba(19,48,39,.09);
}

.dcw-item[data-slot="-2"]{
  left:58px;
  top:12%;
}

.dcw-item[data-slot="-1"]{
  left:103px;
  top:30%;
}

.dcw-item[data-slot="0"]{
  left:130px;
  top:50%;
  min-height:37px;
  padding:8px 12px;
  transform:translate(-50%,-50%) scale(1.04);
}

.dcw-item[data-slot="1"]{
  left:103px;
  top:70%;
}

.dcw-item[data-slot="2"]{
  left:58px;
  top:88%;
}

.dcw-hint{
  left:45px;
  font-size:7px;
}

.dcw-empty{
  left:55px;
  width:125px;
  padding:8px 10px;
  font-size:9px;
}

/* ==========================================================
   DOCHI CATEGORY WHEEL — PREMIUM V2
   ========================================================== */

.dcw-root{
  width:220px !important;
  height:314px !important;
  filter:none;
}

/* ---------- NÚT CHÍNH ---------- */

.dcw-toggle{
  width:47px !important;
  min-height:82px !important;
  padding:7px 4px !important;

  border:1px solid rgba(255,255,255,.64) !important;
  border-left:0 !important;

  border-radius:0 19px 19px 0 !important;

  background:
    linear-gradient(
      155deg,
      #0a8b58 0%,
      #087147 48%,
      #055b39 100%
    ) !important;

  box-shadow:
    0 8px 24px rgba(1,82,50,.30),
    0 2px 7px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.22) !important;

  overflow:visible;
  isolation:isolate;
}

/* glow rất nhẹ */
.dcw-toggle::before{
  content:"";
  position:absolute;
  inset:-5px -6px -5px -2px;
  border-radius:0 24px 24px 0;
  border:1px solid rgba(20,176,108,.24);
  box-shadow:0 0 0 5px rgba(15,145,89,.06);
  pointer-events:none;
  animation:dcwBreath 4.5s ease-in-out infinite;
}

/* chấm đỏ Dochi nhỏ */
.dcw-toggle::after{
  content:"";
  position:absolute;
  right:3px;
  top:6px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ef4146;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.9),
    0 2px 7px rgba(239,65,70,.35);
}

.dcw-toggle-icon{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;

  background:rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 2px 7px rgba(0,0,0,.08);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.dcw-toggle-icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:#fff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.dcw-toggle-label{
  max-width:40px !important;
  font-size:8.5px !important;
  font-weight:950 !important;
  line-height:1 !important;
  letter-spacing:.055em !important;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.16);
}


/* ---------- KHỐI BÁN NGUYỆT ---------- */

.dcw-arc{
  border-radius:0 52% 52% 0;
}

/* nền kính mờ rất nhẹ phía sau */
.dcw-arc::after{
  content:"";
  position:absolute;

  left:-106px;
  top:15px;

  width:258px;
  height:284px;

  border-radius:50%;

  background:
    radial-gradient(
      ellipse at 15% 50%,
      rgba(255,255,255,.96) 0%,
      rgba(248,253,251,.85) 42%,
      rgba(239,250,245,.56) 64%,
      rgba(255,255,255,0) 76%
    );

  border-right:1px solid rgba(8,113,71,.10);

  box-shadow:
    inset -8px 0 22px rgba(8,113,71,.025);

  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);

  pointer-events:none;
  z-index:-2;
}

/* đường cung */
.dcw-arc::before{
  left:-91px !important;
  top:24px !important;
  width:229px !important;
  height:264px !important;

  border:1px dashed rgba(8,113,71,.28) !important;
  border-left-color:transparent !important;

  filter:drop-shadow(
    0 1px 1px rgba(255,255,255,.9)
  );
}


/* ---------- CHIP DANH MỤC ---------- */

.dcw-item{
  display:flex;
  align-items:center;
  gap:7px;

  max-width:126px !important;
  min-height:34px !important;

  padding:7px 12px 7px 9px !important;

  border:
    1px solid rgba(8,113,71,.15) !important;

  border-radius:999px !important;

  background:
    rgba(255,255,255,.93) !important;

  color:#31564a !important;

  font-size:10.5px !important;
  font-weight:850 !important;

  box-shadow:
    0 5px 16px rgba(19,48,39,.10),
    inset 0 1px 0 rgba(255,255,255,.85) !important;

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  animation:
    dcwItemPop .28s cubic-bezier(.18,.85,.32,1.12) both;
}

/* chấm icon mini */
.dcw-item::before{
  content:"";
  flex:0 0 auto;

  width:8px;
  height:8px;

  border-radius:50%;

  background:#9ccfba;

  box-shadow:
    0 0 0 3px rgba(8,113,71,.06);
}

.dcw-item[data-slot="-2"],
.dcw-item[data-slot="2"]{
  opacity:.55 !important;
}

.dcw-item[data-slot="-1"],
.dcw-item[data-slot="1"]{
  opacity:.82 !important;
}

.dcw-item[data-slot="-2"]{
  left:61px !important;
  top:11% !important;
  animation-delay:.04s;
}

.dcw-item[data-slot="-1"]{
  left:111px !important;
  top:29% !important;
  animation-delay:.08s;
}

.dcw-item[data-slot="0"]{
  left:142px !important;
  top:50% !important;

  min-height:41px !important;
  max-width:145px !important;

  padding:9px 14px 9px 11px !important;

  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #0b8a58 0%,
      #087147 58%,
      #05653f 100%
    ) !important;

  border-color:
    rgba(255,255,255,.65) !important;

  box-shadow:
    0 8px 22px rgba(8,113,71,.28),
    0 2px 6px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.22) !important;

  transform:
    translate(-50%,-50%) scale(1.065) !important;

  opacity:1 !important;

  animation-delay:.12s;
}

.dcw-item[data-slot="0"]::before{
  width:9px;
  height:9px;

  background:#fff;

  box-shadow:
    0 0 0 4px rgba(255,255,255,.12);
}

.dcw-item[data-slot="1"]{
  left:111px !important;
  top:71% !important;
  animation-delay:.08s;
}

.dcw-item[data-slot="2"]{
  left:61px !important;
  top:89% !important;
  animation-delay:.04s;
}


/* item đang được chọn */
.dcw-item.is-selected{
  border-color:#087147 !important;
}

.dcw-item.is-selected:not([data-slot="0"]){
  background:#eef9f3 !important;
  color:#087147 !important;
}

.dcw-item.is-selected:not([data-slot="0"])::before{
  background:#087147;
}


/* ---------- HINT ---------- */

.dcw-hint{
  left:48px !important;

  color:rgba(8,113,71,.37) !important;

  font-size:6.5px !important;
  font-weight:950 !important;

  letter-spacing:.16em !important;
}


/* ---------- ANIMATION ---------- */

@keyframes dcwItemPop{
  from{
    opacity:0;
    transform:
      translate(-58%,-50%)
      scale(.88);
  }

  to{
    transform:
      translate(-50%,-50%)
      scale(1);
  }
}

@keyframes dcwBreath{
  0%,82%,100%{
    opacity:.40;
    transform:scale(1);
  }

  90%{
    opacity:.90;
    transform:scale(1.035);
  }
}


/* giảm motion nếu thiết bị yêu cầu */
@media(prefers-reduced-motion:reduce){
  .dcw-toggle::before,
  .dcw-item{
    animation:none !important;
  }
}

/* ==========================================================
   DOCHI CATEGORY WHEEL — PHYSICS V3
   Smooth drag + momentum + snap
   ========================================================== */

/*
 * Toàn vùng bán nguyệt nhận gesture.
 * Tránh Safari dùng gesture này để cuộn trang.
 */
.dcw-arc{
  touch-action:none !important;
  user-select:none;
  -webkit-user-select:none;
  overscroll-behavior:contain;
}


/*
 * Vị trí item giờ do JS tính liên tục,
 * không còn nhảy từng slot cố định.
 */
.dcw-root .dcw-item{
  left:var(--dcw-x) !important;
  top:var(--dcw-y) !important;

  opacity:var(--dcw-opacity) !important;

  transform:
    translate(-50%,-50%)
    scale(var(--dcw-scale)) !important;

  will-change:
    left,
    top,
    transform,
    opacity;

  /*
   * Bình thường có transition cực ngắn
   * để khử rung pixel.
   */
  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease !important;

  animation:none !important;
}


/*
 * Khi tay đang kéo hoặc bánh xe đang quay:
 * tuyệt đối không có transition vị trí.
 * Item phải dính trực tiếp vào ngón tay.
 */
.dcw-root.is-dragging .dcw-item,
.dcw-root.is-spinning .dcw-item{
  transition:
    background .12s ease,
    color .12s ease,
    border-color .12s ease,
    box-shadow .12s ease !important;
}


/* ----------------------------------------------------------
   ITEM ĐANG ĐI QUA TÂM BÁNH XE
   ---------------------------------------------------------- */

.dcw-root .dcw-item.is-wheel-center{
  color:#fff !important;

  border-color:
    rgba(255,255,255,.72) !important;

  background:
    linear-gradient(
      135deg,
      #0c925e 0%,
      #087147 55%,
      #05613d 100%
    ) !important;

  box-shadow:
    0 9px 25px rgba(8,113,71,.31),
    0 2px 7px rgba(0,0,0,.09),
    inset 0 1px 0 rgba(255,255,255,.24)
    !important;
}

.dcw-root .dcw-item.is-wheel-center::before{
  background:#fff !important;

  box-shadow:
    0 0 0 4px rgba(255,255,255,.13)
    !important;
}


/*
 * Trong lúc đang kéo:
 * center hơi "nổi" thêm chút để tạo cảm giác
 * bánh xe đi qua một điểm chọn cố định.
 */
.dcw-root.is-dragging
.dcw-item.is-wheel-center{
  box-shadow:
    0 10px 28px rgba(8,113,71,.36),
    0 3px 8px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.25)
    !important;
}


/* ----------------------------------------------------------
   CẢM GIÁC BÁNH XE
   ---------------------------------------------------------- */

/*
 * Tạo điểm chọn rất nhẹ tại tâm cung.
 */
.dcw-arc{
  --dcw-center-y:50%;
}

.dcw-arc > .dcw-hint{
  opacity:.58;
}


/*
 * Item ngoài tâm mềm hơn.
 */
.dcw-root .dcw-item:not(.is-wheel-center){
  filter:
    saturate(.88)
    brightness(1.015);
}


/*
 * Khi bánh xe đang quay có quán tính,
 * lớp kính hơi nổi lên nhẹ.
 */
.dcw-root.is-spinning .dcw-arc::after{
  background:
    radial-gradient(
      ellipse at 15% 50%,
      rgba(255,255,255,.97) 0%,
      rgba(248,253,251,.88) 42%,
      rgba(239,250,245,.60) 64%,
      rgba(255,255,255,0) 77%
    );
}


/*
 * Không để chữ bị select khi kéo.
 */
.dcw-item,
.dcw-item-text{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}


/*
 * Giảm chuyển động cho người bật Reduce Motion.
 * Vẫn vuốt được nhưng inertia ít gây khó chịu hơn.
 */
@media(prefers-reduced-motion:reduce){
  .dcw-root .dcw-item{
    transition:none !important;
  }
}

/* ==========================================================
   DCW WHITE OUTLINE CLEAN V5
   Chỉ tác động Category Wheel, không chạm product grid
   ========================================================== */

/* ---------- NÚT TRÁI ---------- */

#dcwRoot .dcw-toggle{
  width:47px !important;
  min-height:82px !important;
  padding:7px 4px !important;

  background:#fff !important;

  border:2px solid #087147 !important;
  border-left:0 !important;
  border-radius:0 19px 19px 0 !important;

  color:#087147 !important;

  box-shadow:
    0 6px 18px rgba(8,113,71,.13),
    0 2px 5px rgba(0,0,0,.04) !important;
}

#dcwRoot .dcw-toggle::after{
  display:none !important;
  content:none !important;
}

#dcwRoot .dcw-toggle::before{
  border-color:rgba(8,113,71,.12) !important;
  box-shadow:0 0 0 3px rgba(8,113,71,.035) !important;
}

#dcwRoot .dcw-toggle-icon{
  background:#fff !important;
  border:1.5px solid rgba(8,113,71,.25) !important;
  box-shadow:none !important;
}

#dcwRoot .dcw-toggle-icon svg{
  stroke:#087147 !important;
}

#dcwRoot .dcw-toggle-label{
  color:#087147 !important;
  text-shadow:none !important;
}


/* ---------- BỎ NỀN KÍNH LỚN ---------- */

#dcwRoot .dcw-arc::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}


/* ---------- CHIP ---------- */

#dcwRoot .dcw-item{
  background:#fff !important;
  color:#31564a !important;

  border:1.5px solid rgba(8,113,71,.20) !important;

  box-shadow:
    0 4px 12px rgba(19,48,39,.07) !important;
}

#dcwRoot .dcw-item::before{
  background:#b8e2cf !important;
  box-shadow:0 0 0 3px rgba(8,113,71,.05) !important;
}


/* Mục đi qua tâm */
#dcwRoot .dcw-item.is-wheel-center{
  background:#fff !important;
  color:#087147 !important;

  border:2px solid #087147 !important;

  box-shadow:
    0 8px 20px rgba(8,113,71,.16),
    0 2px 5px rgba(0,0,0,.04) !important;
}

#dcwRoot .dcw-item.is-wheel-center::before{
  background:#087147 !important;
  box-shadow:0 0 0 4px rgba(8,113,71,.09) !important;
}


/* ---------- ĐÓNG MENU PHẢI SẠCH HOÀN TOÀN ---------- */

#dcwRoot[data-open="false"] .dcw-arc{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateX(-18px) scale(.96) !important;
}

#dcwRoot[data-open="false"] .dcw-arc::before,
#dcwRoot[data-open="false"] .dcw-arc::after{
  content:none !important;
  display:none !important;
}

#dcwRoot[data-open="true"] .dcw-arc{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

#dcwRoot[data-open="true"] .dcw-arc::before{
  content:"" !important;
  display:block !important;
  background:transparent !important;
}


/* Đảm bảo wheel không tạo border/frame lên product grid */
#dcwRoot,
#dcwRoot .dcw-arc{
  border:0 !important;
  outline:0 !important;
}


/* DCW V5.2 — icon luôn nhận tap ngay */
#dcwToggle{
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}

/* ==========================================================
   DCW VERTICAL POSITION DRAG V1
   Kéo nút LOẠI/MÓN để di chuyển cả popup lên xuống
   ========================================================== */

#dcwToggle{
  touch-action:none !important;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

#dcwRoot.dcw-position-dragging{
  transition:none !important;
}

#dcwRoot.dcw-position-dragging #dcwToggle{
  cursor:ns-resize;
}