/* ===== Giọt nước v2 — kính TRONG SUỐT kiểu iOS 26 (không tô màu nền), dùng chung cho thanh tab, chip, tab phân đoạn ===== */
#app.M{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
#app.M .tb{bottom:calc(12px + env(safe-area-inset-bottom));height:68px;border-radius:34px;padding:0 6px;width:min(370px,calc(100% - 24px));touch-action:none;-webkit-user-select:none;user-select:none}
#app .tb.hd2,#app .chipbar.hd2,#app .seg.hd2{position:relative}
#app.M .tb.hd2{position:fixed}
#app .hd2>div,#app .hd2>a{position:relative;z-index:1;transition:scale .18s ease;-webkit-tap-highlight-color:transparent}
#app .hd2>.on{background:transparent!important;border-color:transparent!important;box-shadow:none!important;text-shadow:none!important}
#app.M .tb.hd2>div{min-height:54px;display:flex;flex-direction:column;justify-content:center;width:70px;border-radius:27px}
#app .hd2>.pr{scale:1.06}
/* "kính lúp": icon dưới giọt nước phóng nhẹ */
#app .tb.hd2>div svg{transition:scale .32s cubic-bezier(.3,1.5,.5,1);transform-origin:50% 60%}
#app .tb.hd2>.on svg,#app .tb.hd2>.lens svg{scale:1.14}
#app .chipbar.hd2>.on,#app .seg.hd2>.on{scale:1.02}
/* màu chữ/icon tab đang chọn: xanh thương hiệu (không còn nền đặc) */
#app .tb.hd2>.on,#app .chipbar.hd2>.on,#app .seg.hd2>.on{color:#0A6E7A!important}
#app .tb.hd2>.on svg *{stroke:#0A6E7A!important}
/* giọt nước: chỉ viền sáng + vệt phản chiếu + bóng mờ; nền gần như trong suốt */
#app .drop,.drophost .drop{position:absolute;left:0;top:0;z-index:2;pointer-events:none;border-radius:99px;transform-origin:50% 50%;will-change:transform;backface-visibility:hidden;
 background:radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.30),rgba(255,255,255,0) 52%),radial-gradient(90% 60% at 50% 110%,rgba(255,255,255,.22),rgba(255,255,255,0) 60%);
 box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.9),
  inset 0 1.5px 1px rgba(255,255,255,1),
  inset 0 -1.5px 1.5px rgba(255,255,255,.55),
  inset 3px 0 4px -2px rgba(120,215,255,.45),
  inset -3px 0 4px -2px rgba(255,170,220,.38),
  inset 0 0 12px rgba(255,255,255,.28),
  inset 0 -8px 12px -8px rgba(0,50,70,.10),
  0 0 0 .5px rgba(8,40,52,.20),
  0 1px 2px rgba(8,40,52,.10),
  0 6px 16px -4px rgba(8,40,52,.20);
 transition:scale .24s cubic-bezier(.3,1.6,.5,1)}
#app .drop::before,.drophost .drop::before{content:"";position:absolute;left:16%;right:16%;top:2px;height:32%;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));opacity:.8}
#app .drop::after,.drophost .drop::after{content:"";position:absolute;left:28%;right:28%;bottom:2px;height:14%;border-radius:99px;background:linear-gradient(0deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
#app .drop.pr,.drophost .drop.pr{scale:1.1}
#app .tb .drop,.tbh .drop{border-radius:27px}
.drophost{position:fixed;z-index:60;pointer-events:none;display:none;contain:layout style}
#app .seg .drop{border-radius:10px}
#app .seg .drop::before{top:1px;height:36%}
/* đường ray chip */
#app .chipbar.hd2{margin:6px 14px 10px;padding:3px;gap:2px;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.55));box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(30,42,48,.08),0 6px 16px -8px rgba(16,40,50,.25)}
#app .chipbar.hd2>div,#app .chipbar.hd2>a{background:transparent;border-color:transparent;min-height:44px;display:flex;align-items:center;padding:0 14px}
#app .chipbar.hd2 .drop,#app .seg.hd2 .drop{box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),inset 0 1.5px 1px #fff,inset 3px 0 4px -2px rgba(120,215,255,.4),inset -3px 0 4px -2px rgba(255,170,220,.32),inset 0 0 10px rgba(255,255,255,.3),0 0 0 .5px rgba(8,40,52,.22),0 1px 2px rgba(8,40,52,.10),0 4px 12px -4px rgba(8,40,52,.22)}
/* tối */
html.dk #app .tb.hd2>.on,html.dk #app .chipbar.hd2>.on,html.dk #app .seg.hd2>.on{color:#7FE3EC!important}
html.dk #app .tb.hd2>.on svg *{stroke:#7FE3EC!important}
html.dk #app .drop,html.dk .drophost .drop,html.dk #app .chipbar.hd2 .drop,html.dk #app .seg.hd2 .drop{
 background:radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.13),rgba(255,255,255,0) 52%),radial-gradient(90% 60% at 50% 110%,rgba(255,255,255,.08),rgba(255,255,255,0) 60%);
 box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.30),
  inset 0 1.5px 1px rgba(255,255,255,.55),
  inset 0 -1px 1.5px rgba(255,255,255,.18),
  inset 3px 0 4px -2px rgba(120,215,255,.30),
  inset -3px 0 4px -2px rgba(255,170,220,.24),
  inset 0 0 12px rgba(255,255,255,.07),
  0 0 0 .5px rgba(0,0,0,.5),
  0 6px 18px -4px rgba(0,0,0,.6)}
html.dk #app .drop::before,html.dk .drophost .drop::before{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0))}
html.dk #app .drop::after,html.dk .drophost .drop::after{background:linear-gradient(0deg,rgba(255,255,255,.10),rgba(255,255,255,0))}
html.dk #app .chipbar.hd2{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.08),0 6px 16px -8px rgba(0,0,0,.6)}
html.dk #app .chipbar.hd2>div:not(.on),html.dk #app .chipbar.hd2>a:not(.on){background:transparent!important;border-color:transparent!important}
@media (prefers-reduced-motion:reduce){#app .drop,.drophost .drop,#app .hd2>div,#app .hd2>a,#app .tb.hd2>div svg{transition:none}#app .hd2>.pr,#app .drop.pr,.drophost .drop.pr{scale:1}}

/* Khi đang kéo: tắt backdrop-filter của thanh tab (WebKit phải lọc lại nền mỗi khung) → nền gần đục tương đương */
#app .tb.gl.tdg{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:linear-gradient(180deg,rgba(252,253,254,.97),rgba(244,248,250,.96))!important}
html.dk #app .tb.gl.tdg{background:linear-gradient(180deg,rgba(40,47,53,.98),rgba(24,28,33,.97))!important}

/* ===== v2.1: kính khúc xạ trong suốt ===== */
#app .drop::before,.drophost .drop::before{transform:translateX(var(--hx,0px))}
/* Safari / WebKit: không có url() trong backdrop-filter → lớp kính nhẹ (tăng bão hoà, sáng) + icon phóng 1.14 */
.drophost .drop{-webkit-backdrop-filter:saturate(1.7) brightness(1.05) contrast(1.05);backdrop-filter:saturate(1.7) brightness(1.05) contrast(1.05)}
/* Chromium: khúc xạ thật bằng feDisplacementMap (viền bẻ cong nền, giữa phóng nhẹ) */
html.lgx .drophost .drop{backdrop-filter:url(#tqlg) saturate(1.6) brightness(1.04)}
#app .drop,.drophost .drop{background-color:rgba(127,231,240,.045)}
html.dk #app .drop,html.dk .drophost .drop{background-color:rgba(127,231,240,.04)}
html.dk .drophost .drop{-webkit-backdrop-filter:saturate(1.6) brightness(1.18) contrast(1.04);backdrop-filter:saturate(1.6) brightness(1.18) contrast(1.04)}
html.dk.lgx .drophost .drop{backdrop-filter:url(#tqlg) saturate(1.5) brightness(1.16)}
@media (prefers-reduced-motion:reduce){#app .drop::before,.drophost .drop::before{transform:none}}