/* =====================
       THEME TOKENS
    ======================*/
 /* Thêm font SVN-Poppins Việt hoá */
 @font-face {
   font-family: 'SVN-Poppins';
   src: url('fonts/SVN-PoppinsSemiBold.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
 }

 @font-face {
   font-family: 'SVN-Poppins';
   src: url('fonts/SVN-PoppinsSemiBold.woff2') format('woff2');
   font-weight: 600;
   font-style: normal;
 }

 @font-face {
   font-family: 'SVN-Poppins';
   src: url('fonts/SVN-PoppinsSemiBold.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
 }


 :root {
   --bg: #0b0b0f00;
   --bg-grad: radial-gradient(1200px 800px at 20% 10%, #191a22 0, #0b0b0f 60%);
   --frame: #1f1f26;
   --text: #f8fafc;
   --muted: #cbd5e1;
   --accent1: #ff0050;
   --accent2: #ff3a80;
   --success: #22c55e;
   --danger: #ef4444;
   --glass: rgba(255, 255, 255, .08);
   --glass-strong: rgba(0, 0, 0, .7);
   --panel: rgba(255, 255, 255, .06);
   --panel-border: rgba(255, 255, 255, .1);
   --shadow-1: 0 10px 30px rgba(0, 0, 0, .35);
   --shadow-2: 0 8px 26px rgba(255, 0, 80, .25);
   --ring: 0 0 0 1px rgba(255, 255, 255, .04) inset;
   --blur: blur(8px);
 }

 /* Glass Light theme */
 .theme-glass:root,
 .theme-glass body {
   --bg: #eef2f700;
   --bg-grad: radial-gradient(1200px 800px at 75% 15%, #ffffff 0, #e9eef6 60%);
   --frame: #ffffff;
   --text: #0f172a;
   --muted: #334155;
   --accent1: #6d28d9;
   --accent2: #a855f7;
   --success: #16a34a;
   --danger: #dc2626;
   --glass: rgba(255, 255, 255, .6);
   --glass-strong: rgba(255, 255, 255, .85);
   --panel: rgba(255, 255, 255, .75);
   --panel-border: rgba(0, 0, 0, .06);
   --shadow-1: 0 12px 36px rgba(15, 23, 42, .15);
   --shadow-2: 0 10px 26px rgba(109, 40, 217, .18);
   --ring: 0 0 0 1px rgba(15, 23, 42, .04) inset;
   --blur: blur(10px);
 }


 html,
 body {
   height: 100%
 }

 body {
   margin: 0;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   background: rgb(0 0 0 / 88%);
   color: var(--text);
   transition: background .4s ease, color .3s ease, filter .35s ease;
   font-family: 'SVN-Poppins', sans-serif;
   overflow: hidden !important;
 }

 /* ========= iPhone 15 frame ========= */
 .iphone-wrapper {
   position: absolute;
   top: 50%;
   left: 0;
   font-family: 'SVN-Poppins', sans-serif;
   /* đúng bằng width panel */
   transform: translateY(-50%) translateX(390px);
   /* ẩn trong panel */
   transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
     opacity 0.3s ease 0.2s;
   opacity: 0;
   z-index: 9999;
   will-change: transform, opacity;
 }

 /* khi mở ra */
 .iphone-wrapper.active {
   transform: translateY(-50%) translateX(0);
   /* trượt ra vị trí cũ */
   opacity: 1;
 }



 .logos {
   width: 40px;
   height: 40px;
   margin-left: 30px;
 }

 .gift-stats.compact {
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 14px;
   background: rgb(11 11 11);
   border-radius: 12px;
   backdrop-filter: blur(8px);
   font-family: 'SVN-Poppins', sans-serif;
   color: #fff;
   margin-bottom: 10px;
 }

 /* Top gift bar (gradient giống hình) */
 .top-gift-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: linear-gradient(90deg, #e09700, #374026);
   padding: 10px 14px;
   border-radius: 10px;
   font-weight: 600;
 }

 .top-gift-item {
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .ug-topbar {
   position: sticky;
   top: 0;
   z-index: 100;
 }

 .tab-content.hidden~.ug-topbar {
   display: none;
 }

 .top-gift-item img,
 .latest-gift-bar img {
   width: 48px;
   height: 48px;
   border-radius: 10px;
   object-fit: contain;
   background: rgba(0, 0, 0, 0.3);
   padding: 4px;
   /*  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); */
 }

 .gift-info .gift-name {
   font-size: 10px;
   margin-bottom: 2px;
 }

 .gift-info .gift-stats {
   font-size: 10px;
   opacity: 0.95;
 }

 /* ===== USER INFO ===== */
 .user-info {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
   padding: 8px 10px;
   border-radius: 12px;
   background-color:rgba(199, 49, 49, 0.178)b;
   backdrop-filter: blur(6px);
   border: 1px solid rgba(255, 255, 255, 0.082);
 }

 /* Avatar */
 .user-avatar {
   width: 60px;
   height: 60px;
   border-radius: 100%;
   object-fit: cover;
   border: 2px solid rgba(255, 255, 255, 0.2);
 }

 /* Meta */
 .user-meta {
   display: flex;
   flex-direction: column;
   line-height: 1.2;
 }

 /* Username */
 .user-name {
   font-weight: 600;
   font-size: 14px;
   color: #fff;
   display: flex;
   align-items: center;
   gap: 4px;
 }

 /* Coin + countdown */
 .user-sub {
   font-size: 12px;
   color: #ddd;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 /* Divider */
 .user-sub .divider {
   opacity: 0.5;
 }

 /* Expiration date (ẩn nếu không dùng) */
 .expire-date {
   font-size: 11px;
   opacity: 0.6;
   display: none;
 }

 /* ===== ROLE STYLE ===== */
 .user-name.admin {
   color: #ff0000;
 }

 .user-avatar.admin {
   border-color: #ff000d;
 }


 /* Countdown fade animation */
 #expireCountdown.fade {
   animation: fadePulse 0.25s ease;
 }

 @keyframes fadePulse {
   from {
     opacity: 0.4;
   }

   to {
     opacity: 1;
   }
 }

 /* Date picker */
 .date-picker {
   display: flex;
   align-items: center;
   gap: 8px;
   background: rgba(0, 0, 0, 0.3);
   padding: 4px 10px;
   border-radius: 20px;
   font-size: 12px;
 }

 .date-btn {
   background: none;
   border: none;
   color: white;
   font-size: 18px;
   cursor: pointer;
   opacity: 0.8;
 }

 .date-btn:hover {
   opacity: 1;
 }

 /* Other top gifts - horizontal scroll */
 .other-top-gifts {
   display: flex;
   gap: 12px;
   overflow-x: auto;
   padding: 8px 0 4px;
 }

 .other-top-gifts::-webkit-scrollbar {
   height: 4px;
 }

 .other-top-gifts::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.3);
   border-radius: 2px;
 }

 .tks-gift-normal {
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background: rgba(255, 255, 255, 0.08);
   padding: 8px 10px;
   border-radius: 10px;
   min-width: 90px;
   text-align: center;
   transition: all 0.2s;
 }

 .tks-gift-normal:hover {
   background: rgba(255, 255, 255, 0.15);
 }

 .tks-gift-normal img {
   width: 40px;
   height: 40px;
   border-radius: 8px;
   object-fit: contain;
   margin-bottom: 4px;
 }

 .tks-normal-name {
   font-size: 11.5px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 80px;
 }

 .tks-normal-stats {
   font-size: 11px;
   color: #ffd700;
 }


 .tks-gift-normal2 {
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background: rgba(209, 14, 14, 0.08);
   padding: 8px 10px;
   border-radius: 10px;
   min-width: 90px;
   text-align: center;
   transition: all 0.2s;
 }

 .tks-gift-normal2:hover {
   background: rgba(255, 255, 255, 0.15);
 }

 .tks-gift-normal2 img {
   width: 40px;
   height: 40px;
   border-radius: 8px;
   object-fit: contain;
   margin-bottom: 4px;
 }

 .tks-normal-name2 {
   font-size: 8.5px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 80px;
 }

 .tks-normal-stats2 {
   font-size: 8px;
   color: #ffd700;
 }

 /* Latest gift */
 .latest-gift-bar {
   display: flex;
   align-items: center;
   gap: 8px;
   background: rgba(255, 20, 100, 0.15);
   padding: 10px 14px;
   border-radius: 10px;
   border: 1px solid rgba(255, 20, 100, 0.3);
 }

 /* Totals grid */
 .totals-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
 }

 .total-item {
   background: rgba(0, 0, 0, 0.35);
   padding: 10px 8px;
   border-radius: 8px;
   text-align: center;
   font-size: 12px;
 }

 .total-item .label {
   opacity: 0.8;
   display: block;
   margin-bottom: 4px;
 }

 .total-item .value {
   font-size: 16px;
   font-weight: bold;
   color: #ffd700;
 }

 /* Animation (giữ lại) */
 .tks-latest-animate {
   animation: latestPulse 1s ease-out;
 }

 @keyframes latestPulse {
   0% {
     transform: scale(1);
   }

   50% {
     transform: scale(1.12);
   }

   100% {
     transform: scale(1);
   }
 }

 .tks-coin-bounce {
   animation: coinBounce 0.6s ease-out;
 }

 @keyframes coinBounce {
   0% {
     transform: translateY(0);
   }

   40% {
     transform: translateY(-16px);
   }

   60% {
     transform: translateY(0);
   }

   80% {
     transform: translateY(-6px);
   }

   100% {
     transform: translateY(0);
   }
 }

 /* Responsive cho panel hẹp */
 @media (max-width: 500px) {
   .totals-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 .panel-chat {
   background: #0b0b0b;
   border-radius: 12px;
   padding: 10px;
   /*   border: 1px solid rgba(255,255,255,0.05); */
   /*   box-shadow: 0 20px 40px rgba(0,0,0,0.6); */
 }

 /* HEADER */
 .panel-chat-header {
   margin-bottom: 13px;
   background-color: #222222;
   border-radius: 12px;
   padding: 12px;
   position: relative;
   padding-right: 44px;
   /* chừa chỗ cho nút */
   align-items: center;
   /* canh giữa theo trục dọc */
 }

 /* Style nút icon */
 .btn-icon {
   height: 32px;
   width: 32px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   /*   border: 1px solid rgba(255, 255, 255, 0.15); */
   /*   background: transparent; */
 }

 /* 
 .btn-icon:hover {
   background: rgba(255, 255, 255, 0.08);
 }

 .btn-icon:active {
  background: transparent;
 }
 */


 /* Đặt vị trí bên phải header */
 .btn-settings {
   position: absolute;
   right: 12px;
   top: 50%;
   transform: translateY(-50%);
 }

 .panel-chat-header .title {
   font-size: 10px;
   font-weight: 700;
   color: #ffffff;
 }

 .panel-chat-header .subtitle {
   font-size: 8px;
   color: #aaa;
   margin-top: 2px;
 }

 /* BODY */
 .panel-chat-body {
   max-height: 400px;
   height: 360px;
   overflow-y: hidden;
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding-right: 6px;
 }

 /* SCROLL */
 .panel-chat-body::-webkit-scrollbar {
   width: 6px;
 }

 .panel-chat-body::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.15);
   border-radius: 6px;
 }

 /* CHAT ITEM */
 .panel-chat-item {
   display: flex;
   align-items: center;
   gap: 6px;
   background: #000000d1;
   border-radius: 12px;
   padding: 8px 11px;
   animation: slideIn 0.25s ease;
 }

 /* AVATAR */
 .panel-chat-avatar {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid #ff2d55;
   box-shadow: 0 0 0 2px rgba(255, 45, 85, 0.25);
   flex-shrink: 0;
 }

 /* TEXT WRAP */
 .panel-chat-item>div {
   display: flex;
   align-items: flex-start;
   /* 🔥 QUAN TRỌNG */
   gap: 6px;
   flex-wrap: wrap;
 }

 /* USERNAME */
 .panel-chat-name {
   font-size: 12px;
   color: #f76d6d;
   white-space: nowrap;
 }

 /* COMMENT */
 .panel-chat-text {
   font-size: 10px;
   color: #eaeaea;
   word-break: break-word;
 }

 /* ANIMATION */
 @keyframes slideIn {
   from {
     opacity: 0;
     transform: translateY(6px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .tks-gift-row-bottom {
   display: grid;
   grid-template-columns: 1.6fr repeat(4, 1fr);
   gap: 12px;
   margin-top: 14px;
 }

 /* CARD CHUNG */
 .tks-gift-box,
 .tks-gift-latest {
   background: linear-gradient(180deg, #0f0f0f, #000);
   border-radius: 16px;
   padding: 14px;
   text-align: center;
   color: #fff;
 }

 /* LATEST */
 .tks-latest-inner {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .tks-latest-inner img {
   width: 46px;
   height: 46px;
   border-radius: 12px;
 }

 .tks-latest-name {
   font-size: 13px;
   opacity: .9;
 }

 .tks-latest-count {
   color: #ffd54a;
   font-weight: 700;
 }

 /* NUMBER */
 .tks-value {
   font-size: 22px;
   font-weight: 800;
   color: #ffd54a;
 }

 .iphone {
   width: 390px;
   height: 844px;
   border: 8px solid var(--frame);
   border-radius: 48px;
   background: #000;
   overflow: hidden;
   position: relative;
   isolation: isolate;
   box-shadow: 0 15px 50px rgba(0, 0, 0, .6), var(--ring);
   transition: width .2s ease, height .2s ease;
 }

 .iphone::before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: radial-gradient(600px 300px at 70% 10%, rgba(255, 255, 255, .05), transparent 60%);
   z-index: 1;
 }

 .iphone::after {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 60%);
 }

 .control-buttons {

   display: flex;
   justify-content: center;
   gap: 12px;
 }

 .island {
   /* dynamic island */
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 212px;
   height: 32px;
   border-radius: 0 0 20px 20px;
   background: #0f0f12;
   box-shadow: 0 6px 20px rgba(0, 0, 0, .6);
   z-index: 50;
 }

 .screen {
   position: relative;
   width: 100%;
   height: 100%;
   border-radius: 40px;
   overflow: hidden;
   background: #000;
 }

 .video-wrap {
   position: relative;
   width: 100%;
   height: 100%;
   border-radius: 40px;
   overflow: hidden;
   background: #000;
 }

 video.player {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* luôn full màn hình iPhone */
 }



 /* ========= Overlay ========= */
 .overlay {
   position: absolute;
   inset: 0;
   z-index: 5;
   pointer-events: none
 }

 .overlay::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 62%);
 }

 .topbar {
   position: absolute;
   top: 46px;
   left: 12px;
   right: 12px;
   z-index: 20;
   display: flex;
   gap: 8px;
   align-items: center;
   justify-content: space-between;
 }

 .streamer {
   display: flex;
   align-items: center;
   gap: 10px;
   pointer-events: auto;
   background: var(--glass);
   backdrop-filter: var(--blur);
   padding: 6px 12px;
   border-radius: 22px;
   box-shadow: var(--shadow-1);
   border: 1px solid var(--panel-border);
 }

 .avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   object-fit: cover;
   background: #2b2b31;
   border: 1px solid rgba(255, 255, 255, .55)
 }

 .info {
   display: flex;
   flex-direction: column;
   line-height: 1.15
 }

 .name {
   font-family: 'SVN-Poppins', sans-serif;
   font-weight: 700;
   font-size: 13px
 }

 .followers {
   font-size: 11px;
   opacity: .9
 }

 .follow-btn {
   margin-left: 6px;
   border: none;
   border-radius: 14px;
   padding: 5px 12px;
   cursor: pointer;
   font-size: 12px;
   color: #fff;
   background: linear-gradient(45deg, var(--accent1), var(--accent2));
   box-shadow: var(--shadow-2);
   transition: transform .15s ease, filter .2s ease;
 }

 .follow-btn:hover {
   transform: translateY(-1px);
   filter: brightness(1.05)
 }

 .live-pill {
   pointer-events: auto;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 6px 10px;
   border-radius: 999px;
   background: var(--glass);
   backdrop-filter: var(--blur);
   font-size: 12px;
   border: 1px solid var(--panel-border)
 }

 .dot {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--danger);
   box-shadow: 0 0 0 6px rgba(239, 68, 68, .15)
 }

 /* ========= Chat ========= */
 .chat {
   position: absolute;
   bottom: 74px;
   left: 12px;
   width: 95%;
   display: flex;
   flex-direction: column-reverse;
   pointer-events: none;
   max-height: 28%;
   overflow: hidden;
   z-index: 15;
   -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
   mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
 }

 .chat-item {
   display: flex;
   align-items: flex-start;
   gap: 6px;
   background: rgba(0, 0, 0, .45);
   color: #fff;
   padding: 8px 12px;
   border-radius: 18px;
   font-size: 13px;
   margin-bottom: 6px;
   opacity: 0;
   animation: fadein .28s forwards;
   max-width: 320px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
 }

 .chat-avatar {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   object-fit: cover;
   background: #2b2b31;
   flex-shrink: 0
 }

 .chat-username {
   font-weight: 700;
   margin-right: 4px;
   white-space: nowrap
 }

 .chat-text {
   line-height: 1.35;
   word-break: break-word
 }

 .chat-item.gift {
   background: linear-gradient(135deg, rgba(255, 0, 80, .78), rgba(255, 58, 128, .68));
   font-weight: 650
 }

 @keyframes fadein {
   to {
     opacity: 1
   }
 }

 /* ========= Composer ========= */
 .composer {
   position: absolute;
   bottom: 26px;
   left: 12px;
   width: calc(100% - 24px);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   z-index: 20;
 }

 .composer-input {
   flex: 1;
   display: flex;
   align-items: center;
   background: rgba(255, 255, 255, .10);
   border: 1px solid var(--panel-border);
   border-radius: 22px;
   padding: 8px 12px;
   backdrop-filter: var(--blur);
 }

 .input {
   flex: 1;
   border: none;
   outline: none;
   background: transparent;
   color: #fff;
   font-size: 13px
 }

 .composer-actions {
   display: flex;
   align-items: center;
   gap: 8px
 }

 .icon-btn {
   font-size: 18px;
   cursor: pointer;
   border: none;
   background: transparent;
   color: #fff;
   padding: 6px 8px;
   border-radius: 10px;
   transition: transform .15s ease, background .15s ease
 }

 .icon-btn:hover {
   transform: scale(1.1);
   background: rgba(255, 255, 255, .1)
 }

 /* ========= Gift overlay ========= */
 .gift-overlay {
   position: absolute;
   inset: 0;
   z-index: 23;
   pointer-events: none
 }

 .gift-iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: none;
   background: transparent
 }

 /* ========= Volume HUD ========= */
 .volume {
   position: absolute;
   left: 12px;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column-reverse;
   /* 🔥 đổi ngược hướng */
   justify-content: flex-start;
   gap: 4px;
   z-index: 999;
   opacity: 0;
   padding: 6px 4px;
   background: rgba(0, 0, 0, 0.35);
   border-radius: 12px;
   transition: opacity .35s ease, transform .25s ease;
 }

 .volume.show {
   opacity: 1;
   transform: translateY(-50%) scale(1);
 }

 .volume-bar {
   width: 6px;
   height: 16px;
   border-radius: 3px;
   background: rgba(255, 255, 255, .25);
   transition: background .2s, transform .2s;
 }

 .volume-bar.active {
   background: #fff;
   transform: scaleX(1.2);
   /* khi active, bar hơi phình ra */
 }


 /* ========= Play & End screen ========= */
 .play {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 14px 24px;
   font-size: 16px;
   border: none;
   border-radius: 12px;
   background: var(--accent1);
   color: #fff;
   cursor: pointer;
   z-index: 40;
   display: none;
   box-shadow: var(--shadow-2);
 }

 .end {
   position: absolute;
   inset: 0;
   display: none;
   z-index: 6;
   background:
     radial-gradient(600px 400px at 30% 20%, rgba(255, 0, 80, .08), transparent 40%),
     linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .4));
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 24px;
 }

 .end-inner {
   background: var(--panel);
   border: 1px solid var(--panel-border);
   border-radius: 22px;
   padding: 24px 18px;
   width: min(86%, 320px);
   box-shadow: var(--shadow-1);
   color: var(--text)
 }

 .end-emoji {
   font-size: 42px;
   line-height: 1;
   margin-bottom: 8px
 }

 .end-title {
   margin: 0 0 8px 0;
   font-size: 18px;
   font-weight: 800
 }

 .end-desc {
   margin: 0;
   font-size: 13px;
   opacity: .92
 }

 .end.show {
   display: flex
 }

 /* ========= Control Panel ========= */
 /* Panel */
 :root {
   --accent1: #ff0050;
   --accent2: #ff3a80;
   --panel: rgba(30, 30, 35, 0.75);
   --panel-border: rgba(255, 255, 255, 0.1);
   --text: #f0f0f0;
   --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.3);
   --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.25);
   --blur: blur(18px);
 }

 #app {
   border-radius: 16px;
   overflow: hidden;
 }

 /* Panel */
 .panel {
   position: relative;
   /* để con absolute bám theo aside */
   flex-direction: column;
   overflow: hidden;
   /* ngăn không cho aside scroll dọc */
   gap: 10px;
   width: 460px;
   height: 930px;
   max-width: 100%;
   max-height: 95vh;
   background: rgb(0 0 0 / 88%);
   /* border: 1px solid var(--panel-border); */
   border-radius: 12px;
   padding: 20px;
   box-shadow: var(--shadow-1);
   backdrop-filter: var(--blur);
   color: var(--text);
   font-family: 'SVN-Poppins', sans-serif;
   z-index: 2;
   transition: all 0.25s ease;
 }

 /* Header */
 .panel-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .panel-title {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
   letter-spacing: .4px;
 }

 /* Row layout */
 .row {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 12px;
 }

 /* Button + Select */
 .btn {
   font-family: 'SVN-Poppins', sans-serif;
   position: relative;
   padding: 10px 16px;
   border: none;
   border-radius: 12px;
   background: rgba(255, 255, 255, 0.12);
   color: #fff;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;
 }

 .btn:hover {
   background: rgba(255, 255, 255, 0.25);
   box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
 }

 .btn:active {
   transform: scale(0.95);
 }

 .select {
   padding: 11px 16px;
   border: none;
   border-radius: 14px;
   font-size: 14px;
   cursor: pointer;
   transition: all .2s ease;
   color: #fff;
   background: linear-gradient(135deg, var(--accent1), var(--accent2));
   box-shadow: var(--shadow-2);
 }

 .btn:hover {
   background: linear-gradient(145deg, #333, #222);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
 }

 .btn:active {
   transform: translateY(0);
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);
 }

 .btn:disabled {
   opacity: .5;
   cursor: not-allowed;
   transform: none;
 }

 .select {
   appearance: none;
   background: rgba(255, 255, 255, 0.07);
   border: 1px solid var(--panel-border);
   color: var(--text);
   font-size: 14px;
   box-shadow: none;
   padding: 11px 14px;
 }

 .select:hover {
   background: rgba(255, 255, 255, 0.12);
 }

 /* Tabs container */
 .tabs {
   display: flex;
   gap: 10px;
   margin: 12px 0 16px;
   padding: 6px;
   background: rgba(0, 0, 0, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 14px;
   backdrop-filter: blur(12px);
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.7) inset;
 }

 /* Tab button */
 .tab {
   flex: 1;
   padding: 10px 14px;
   border: none;
   border-radius: 10px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.5px;
   background: transparent;
   color: #aaa;
   cursor: pointer;
   transition: all 0.25s ease;
   text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
 }

 .coin {
   width: 13px;
   height: 13px;
 }

 .hrs3 {
   margin-top: 5px;
   /* margin-bottom: 5px; */
   border: 0;
   height: 1px;
   border-radius: 5px;
   background: linear-gradient(177deg, #2922224a, #3c3a3a);
 }

 .account-expire {
   margin-top: 1px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   /*    border-top: 2px dotted #f5a623; */
   padding-top: 3px;
 }

 /* Hover effect */
 .tab:hover {
   color: #fff;
   background: rgba(238, 139, 139, 0.05);
   /*   box-shadow: 0 0 10px rgba(255, 0, 80, 0.4); */
   transform: translateY(-2px);
 }

 .user-value {
   font-size: 12px;
   font-weight: 600;
   color: #f5a623;
   margin-right: 2px;
 }

 /* Active tab */
 .tab.active {
   background: linear-gradient(135deg, #da9402, #3c393f);
   color: #ffffff;
   /*  box-shadow: 0 0 18px rgba(255, 0, 80, 0.6),
       0 0 25px rgba(142, 45, 226, 0.4); */
   transform: translateY(-1px) scale(1.03);
 }

 /* Hidden content */
 .tab-content.hidden {
   display: none;
 }


 /* Effects grid */
 .effects {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: 12px;
 }

 .effect {
   padding: 14px 12px;
   border: none;
   display: flex;
   align-items: center;
   border-radius: 11px;
   background: rgba(255, 255, 255, .07);
   color: var(--text);
   font-size: 14px;
   cursor: pointer;
   border: 1px solid var(--panel-border);
   transition: all .22s ease;
   flex-direction: column;
 }

 .effect .emoji {
   flex-shrink: 0;
   /* icon luôn cố định */
   font-size: 16px;
 }

 .effect .label {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 80px;
   /* chỉnh max theo ý */
 }

 .effect:hover {
   background: linear-gradient(135deg, var(--accent1), var(--accent2));
   box-shadow: var(--shadow-2);
   transform: translateY(-3px) scale(1.02);
 }

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

 .control-card {
   background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
   border: 1px solid var(--panel-border);
   border-radius: 16px;
   padding: 16px;
   margin-bottom: 14px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .control-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
 }

 .control-header {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 12px;
 }

 .control-icon {
   font-size: 18px;
 }

 .control-title {
   font-size: 15px;
   font-weight: 600;
   color: var(--text);
   margin: 0;
 }

 .control-body {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
 }

 .grid-2 {
   display: grid;
   grid-template-columns: repeat(2, 3fr);
   gap: 12px;
   justify-content: flex-start;
 }

 .phone-mockup {
   position: relative;
   border-radius: 42px;
   overflow: hidden;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5),
     inset 0 0 0 6px #111;
   /* viền máy */
   background: #000;
   margin: 0 auto;
   transition: all 0.3s ease;
 }


 /* Dynamic Island giả lập */
 .phone-notch {
   position: absolute;
   top: 8px;
   left: 50%;
   transform: translateX(-50%);
   width: 120px;
   height: 30px;
   border-radius: 20px;
   background: #000;
   z-index: 5;
 }

 /* Nút nguồn bên phải */
 .phone-btn-power {
   position: absolute;
   top: 120px;
   right: -6px;
   width: 4px;
   height: 60px;
   border-radius: 2px;
   background: #444;
 }

 /* Nút volume bên trái */
 .phone-btn-volume {
   position: absolute;
   top: 120px;
   left: -6px;
   width: 4px;
   height: 100px;
   border-radius: 2px;
   background: #444;
 }

 .end-icons {
   margin-top: 16px;
   font-size: 1.5rem;
   /* to dễ thương hơn */
   text-align: center;
   animation: bounceIcons 1.5s infinite ease-in-out;
 }

 .end-icons img {
   width: 48px;
   height: 48px;
   object-fit: contain;
   transition: transform 0.3s ease;
 }

 /* animation icon nhún nhảy */
 @keyframes bounceIcons {

   0%,
   100% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-6px);
   }
 }

 .tooltip {
   position: absolute;
   bottom: 120%;
   /* trên nút */
   left: 50%;
   transform: translateX(-50%);
   background: #fff;
   color: #333;
   font-size: 13px;
   font-weight: 500;
   padding: 6px 10px;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.25s ease, transform 0.25s ease;
 }

 .btn:hover .tooltip {
   opacity: 1;
   transform: translateX(-50%) translateY(-4px);
 }

 .tooltip::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   border-width: 6px;
   border-style: solid;
   border-color: #fff transparent transparent transparent;
 }

 /* Toggle switch kiểu iOS */
 .switch {
   position: relative;
   display: inline-block;
   width: 46px;
   height: 24px;
   margin-right: 6px;
 }

 .switch input {
   opacity: 0;
   width: 0;
   height: 0;
 }

 .slider {
   position: absolute;
   cursor: pointer;
   inset: 0;
   background-color: #ccc;
   transition: .4s;
   border-radius: 24px;
 }

 .slider:before {
   position: absolute;
   content: "";
   height: 18px;
   width: 18px;
   left: 3px;
   bottom: 3px;
   background-color: white;
   transition: .4s;
   border-radius: 50%;
 }

 .switch input:checked+.slider {
   background-color: #4cd964;
   /* xanh kiểu iOS */
 }

 .switch input:checked+.slider:before {
   transform: translateX(22px);
 }

 .switch-label {
   font-size: 14px;
   vertical-align: middle;
   margin-left: 4px;
 }

 .record-time {
   display: flex;
   flex-direction: column;
   gap: 10px;
   background: rgba(0, 0, 0, 0.5);
   padding: 16px;
   border-radius: 18px;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   font-family: 'SVN-Poppins', sans-serif;
   width: fit-content;
   color: #fff;
 }

 .record-time label {
   font-size: 14px;
   font-weight: 500;
   color: #fff;
 }

 .time-options {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
 }

 .time-options button {
   background: rgba(255, 255, 255, 0.15);
   border: none;
   border-radius: 12px;
   padding: 8px 14px;
   font-size: 14px;
   color: #fff;
   cursor: pointer;
   transition: background 0.3s ease, transform 0.2s ease;
 }

 .time-options button:hover {
   background: rgba(255, 255, 255, 0.25);
   transform: scale(1.05);
 }

 .time-options button.active {
   background: #00bfff;
   font-weight: bold;
   box-shadow: 0 0 10px rgba(0, 191, 255, 0.6);
 }

 .set-btn {
   margin-top: 10px;
   padding: 10px 18px;
   border: none;
   border-radius: 14px;
   background: linear-gradient(135deg, #00bfff, #007bff);
   color: white;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .set-btn:hover {
   transform: scale(1.05);
   box-shadow: 0 0 12px rgba(0, 191, 255, 0.6);
 }

 .gift-tabs {
   display: flex;
   gap: 10px;
   margin-bottom: 16px;
   justify-content: center;
   padding: 6px 10px;
   background: rgba(255, 255, 255, 0.06);
   border-radius: 12px;
   backdrop-filter: blur(8px);
 }

 .gift-tabs button {
   /* padding: 8px 16px; */
   border: none;
   border-radius: 8px;
   background: transparent;
   color: #fff;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.25s ease;
 }

 .gift-tabs button:hover {
   background: rgba(255, 255, 255, 0.1);
 }

 .gift-tabs button.active {
   background: linear-gradient(135deg, #ff0050, #ff3a80);
   color: #fff;
   box-shadow: 0 3px 8px rgba(255, 0, 80, 0.4);
 }


 #giftListBox,
 #selectedGiftBox {
   display: grid;
   grid-template-columns: repeat(auto-fill, 48px);
   gap: 8px;
   margin-bottom: 12px;
 }

 .gift-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, 48px);
   gap: 10px;
   justify-content: center;
 }

 .gift-item {
   position: relative;
   cursor: pointer;
 }

 .gift-item input {
   display: none;
 }

 .gift-item img {
   width: 48px;
   height: 48px;
   border-radius: 10px;
   border: 2px solid transparent;
   transition: all 0.25s ease;
   object-fit: cover;
   background-color: #4747474f;
 }

 .gift-item:hover img {
   transform: scale(1.08);
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
 }

 .gift-item input:checked+img {
   border: 2px solid #ff0050;
   box-shadow: 0 0 10px rgba(255, 0, 80, 0.6);
   /* transform: scale(1.12); */
 }


 .pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   margin-top: 12px;
   font-family: 'SVN-Poppins', sans-serif;
 }

 .pagination button {
   border: none;
   background: linear-gradient(135deg, #ff0050, #ff4d79);
   color: #fff;
   padding: 6px 14px;
   border-radius: 8px;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
   box-shadow: 0 4px 10px rgba(255, 0, 80, 0.3);
   transition: all 0.25s ease-in-out;
 }

 .pagination button:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 14px rgba(255, 0, 80, 0.4);
 }

 .pagination button:active {
   transform: scale(0.95);
 }

 #pageInfo {
   color: #fff;
   font-size: 15px;
   font-weight: 500;
   background: #333;
   padding: 4px 10px;
   border-radius: 6px;
   box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.1);
 }


 .chat-gift-icon {
   width: 20px;
   /* nhỏ gọn */
   height: 20px;
   vertical-align: middle;
   margin-left: 4px;
   /* cách chữ 1 chút */
   border-radius: 4px;
   object-fit: cover;
 }

 #giftWrapper {
   position: absolute;
   bottom: 20px;
   left: 20px;
   right: 20px;
   max-height: 0;
   opacity: 0;
   overflow: hidden;
   /* mặc định ẩn */
   background: rgb(0 0 0 / 75%);
   border: 1px solid var(--panel-border);
   border-radius: 12px;
   box-shadow: var(--shadow-1);
   transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
   transform: translateY(30px);
   z-index: 10;
   padding: 12px;
 }

 /* Khi show */
 #giftWrapper.show {
   max-height: 700px;
   height: 600px;
   /* khung cố định */
   opacity: 1;
   transform: translateY(0);
   overflow: hidden;
   /* chỉ cuộn bên trong gift */
 }

 .record-settings {
   display: flex;
   flex-direction: column;
   gap: 14px;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 20px;
   padding: 18px;
   width: fit-content;
   min-width: 360px;
   color: #fff;
   width: 100%;
   font-family: 'SVN-Poppins', sans-serif;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   /*   border: 1px solid rgba(255, 255, 255, 0.15); */
   /*    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); */
 }

 .setting-item {
   display: flex;
   align-items: center;
   gap: 10px;
   justify-content: space-between;
 }

 .setting-item label {
   font-size: 14px;
   font-weight: 500;
   color: #fff;
 }

 /* input number */
 #recordDuration {
   width: 70px;
   padding: 6px 8px;
   border-radius: 10px;
   border: none;
   background: rgba(255, 255, 255, 0.15);
   color: #fff;
   font-size: 14px;
   text-align: center;
   outline: none;
 }

 #recordDuration:focus {
   background: rgba(255, 255, 255, 0.25);
 }

 /* switch toggle */
 .switch {
   position: relative;
   display: inline-block;
   width: 44px;
   height: 22px;
 }

 .switch input {
   display: none;
 }

 .slider {
   position: absolute;
   cursor: pointer;
   inset: 0;
   background-color: rgba(255, 255, 255, 0.2);
   border-radius: 22px;
   transition: 0.3s;
 }

 .slider::before {
   position: absolute;
   content: "";
   height: 16px;
   width: 16px;
   left: 3px;
   bottom: 3px;
   background-color: white;
   border-radius: 50%;
   transition: 0.3s;
 }

 .effects.empty {
   display: flex;
   align-items: center;
   justify-content: center;
   color: gray;
   margin-top: 300px;
   /*    font-style: italic; */
   /*   height: 120px; */
   /* hoặc auto tuỳ layout */
 }

 .switch input:checked+.slider {
   background: linear-gradient(135deg, #00bfff, #007bff);
 }

 .switch input:checked+.slider::before {
   transform: translateX(22px);
 }

 .switch-label {
   font-size: 14px;
   font-weight: 500;
 }

 .control-box {
   display: flex;
   flex-direction: column;
   gap: 14px;
   padding: 16px 18px;
   width: 100%;
   max-width: 420px;
   margin: 0 auto;

   background: rgba(20, 20, 20, 0.9);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);

   border-radius: 10px;
   /*    border: 1px solid rgba(80, 80, 80, 0.6); */

   box-shadow: none;
   /* không shadow */
   outline: none;
   /* không glow */
   transition: background 0.3s ease, border 0.3s ease;
 }



 .device-badge {
   text-align: center;
   /*   background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)); */
   border-radius: 14px;
   padding: 8px 14px;
   font-size: 15px;
   font-weight: 600;
   color: #fff;
   letter-spacing: 0.3px;
   /*   box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.25); */
 }

 .switch-box {
   display: flex;
   align-items: center;
   gap: 10px;
   background: rgba(0, 0, 0, 0.5);
   padding: 10px 14px;
   border-radius: 12px;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   width: fit-content;
 }

 .gift-guide {
   /*   background: linear-gradient(135deg, rgba(0, 0, 0, 0.65), rgba(30, 30, 30, 0.75)); */
   /*  border: 1px solid rgba(255, 255, 255, 0.1); */
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   padding: 14px 16px;
   border-radius: 14px;
   color: #fff;
   font-size: 14px;
   line-height: 1.6;
   /*   margin-bottom: 5px; */
   font-family: 'SVN-Poppins', sans-serif;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
   animation: fadeIn 0.4s ease;
 }

 .gift-guide ul {
   margin: 8px 0 0 16px;
   padding: 0;
 }

 .gift-guide li {
   margin-bottom: 4px;
 }

 .guide-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-weight: 600;
   margin-bottom: 8px;
 }

 .close-guide {
   background: rgba(255, 255, 255, 0.1);
   border: none;
   border-radius: 6px;
   color: #fff;
   font-size: 13px;
   cursor: pointer;
   padding: 2px 6px;
   transition: 0.2s;
 }

 .close-guide:hover {
   background: rgba(255, 255, 255, 0.25);
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(-6px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .tour-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.55);
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
   z-index: 9998;
   opacity: 0;
   animation: tourFade .2s forwards;
 }

 @keyframes tourFade {
   to {
     opacity: 1;
   }
 }

 /* Khung highlight vùng được hướng dẫn */
 .tour-highlight {
   position: fixed;
   z-index: 9999;
   border-radius: 14px;
   outline: 2px solid #00bfff;
   box-shadow: 0 0 0 8px rgba(0, 191, 255, 0.18), 0 24px 60px rgba(0, 0, 0, 0.5);
   pointer-events: none;
   transition: all .22s ease;
 }

 /* Tooltip glassmorphism */
 .tour-tip {
   position: fixed;
   z-index: 10000;
   max-width: min(360px, calc(100vw - 32px));
   background: rgba(20, 20, 25, 0.85);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 14px;
   padding: 14px 16px;
   color: #fff;
   font: 500 14px/1.55 "Segoe UI", system-ui, sans-serif;
   box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
 }

 /* Mũi tên tooltip */
 .tour-tip .tip-arrow {
   position: absolute;
   width: 12px;
   height: 12px;
   background: inherit;
   border-left: inherit;
   border-top: inherit;
   transform: rotate(45deg);
 }

 /* Header + actions */
 .tour-tip .tip-title {
   font-weight: 700;
   margin: 0 0 6px;
   font-size: 15px;
 }

 .tour-tip .tip-text {
   margin: 0 0 10px;
   opacity: .95;
 }

 .tour-tip .tip-actions {
   display: flex;
   gap: 8px;
   justify-content: flex-end;
 }

 .tour-btn {
   border: none;
   border-radius: 10px;
   padding: 8px 12px;
   background: rgba(255, 255, 255, 0.12);
   color: #fff;
   font-weight: 600;
   cursor: pointer;
   transition: .2s;
 }

 .tour-btn:hover {
   background: rgba(255, 255, 255, 0.2);
 }

 .tour-btn.primary {
   background: linear-gradient(135deg, #00bfff, #007bff);
 }

 .tour-btn.ghost {
   background: rgba(255, 255, 255, 0.08);
 }

 .gift-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
   color: white;
   font-weight: 500;
 }

 .close-btn {
   background: transparent;
   border: none;
   color: #fff;
   font-size: 16px;
   cursor: pointer;
   line-height: 1;
   padding: 2px 6px;
   border-radius: 6px;
   transition: background 0.2s;
 }

 .close-btn:hover {
   background: rgba(255, 255, 255, 0.2);
 }

 .guide-title {
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .close-guide {
   background: rgba(255, 255, 255, 0.15);
   border: none;
   color: #fff;
   font-size: 16px;
   line-height: 1;
   cursor: pointer;
   border-radius: 50%;
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.25s, transform 0.2s;
 }

 .close-guide:hover {
   background: rgba(255, 255, 255, 0.35);
   transform: rotate(90deg);
 }

 .add-sound-btn {
   text-align: center;
   margin: 20px 0;
 }

 .add-sound-btn button {
   padding: 10px 20px;
   font-size: 16px;
   background: #ff0050;
   border: none;
   color: white;
   border-radius: 8px;
   cursor: pointer;
   transition: 0.3s;
 }

 .add-sound-btn button:hover {
   background: #e60048;
 }

 /* Bottom panel */
 .bottom-panel {
   position: fixed;
   left: 0;
   right: 0;
   bottom: -100%;
   background: #fff;
   border-radius: 16px 16px 0 0;
   box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
   padding: 20px;
   transition: bottom 0.35s ease;
   max-height: 75%;
   overflow-y: auto;
   z-index: 999;
 }

 .bottom-panel.show {
   bottom: 0;
 }

 .panel-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .panel-header h3 {
   margin: 0;
   color: #ff0050;
 }

 .close-btn {
   background: transparent;
   border: none;
   font-size: 20px;
   cursor: pointer;
 }

 .upload-label {
   display: inline-block;
   background: #eee;
   padding: 10px 15px;
   border-radius: 8px;
   cursor: pointer;
   margin: 10px 0;
 }

 .upload-label span {
   color: #333;
   font-weight: bold;
 }

 #waveform {
   width: 100%;
   height: 150px;
   margin: 15px 0;
   border-radius: 8px;
   background: #fafafa;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
 }

 .controls button {
   margin: 5px;
   padding: 8px 16px;
   border: none;
   border-radius: 6px;
   background: #ff0050;
   color: #fff;
   cursor: pointer;
   font-weight: bold;
 }

 .controls button:hover {
   background: #e60046;
 }

 .global-player-controls {
   margin-top: 10px;
   padding: 8px;
   display: flex;
   align-items: center;
   gap: 10px;
   background: #222;
   border-radius: 8px;
 }

 .global-player-controls button {
   padding: 6px 12px;
   background: #ff0050;
   color: white;
   border: none;
   border-radius: 6px;
   cursor: pointer;
 }

 .global-player-controls input[type=range] {
   flex: 1;
 }

 .dark-player {
   margin-top: 15px;
   padding: 12px 16px;
   display: flex;
   margin-bottom: 10px;
   align-items: center;
   justify-content: space-between;
   background: #111;
   border: 1px solid #333;
   border-radius: 10px;
   color: #eee;
   font-family: 'SVN-Poppins', sans-serif;
 }

 .stop-btn {
   padding: 8px 14px;
   background: #ff0050;
   color: #fff;
   border: none;
   border-radius: 6px;
   cursor: pointer;
   transition: 0.2s;
 }

 .stop-btn:hover {
   background: #ff3366;
 }

 .volume-wrap {
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .volume-wrap input[type=range] {
   width: 140px;
   accent-color: #ff0050;
   cursor: pointer;
 }

 .ug-container {
   max-width: 380px;
   margin: auto;
   padding: 16px;
   font-family: 'SVN-Poppins', sans-serif;
   color: #eee;
   background: #111;
   border-radius: 16px;
 }

 .ug-topbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
 }

 .stop-btn {
   background: #ff3b30;
   color: #fff;
   border: none;
   padding: 6px 12px;
   border-radius: 8px;
   cursor: pointer;
 }

 .volume-wrap input {
   width: 120px;
 }

 /* 🎵 DROPZONE */
 .ug-dropzone {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;

   padding: 16px;
   border: 2px dashed rgba(255, 255, 255, 0.25);
   border-radius: 12px;
   background: #1a1a1a;

   cursor: pointer;
   margin-bottom: 12px;

   transition: all 0.3s ease;
   font-size: 0.9rem;
 }

 .ug-dropzone:hover {
   border-color: #09f;
   background: #222;
 }

 .ug-dropzone-icon {
   font-size: 1.6rem;
   margin-bottom: 4px;
   color: #09f;
 }

 .ug-label {
   display: block;
   font-size: 14px;
   margin-bottom: 6px;
   color: #ccc;
 }

 .ug-input,
 .ug-select {
   width: 100%;
   padding: 10px 12px;
   border-radius: 8px;
   border: 1px solid #333;
   background: #1a1a1a;
   color: #fff;
   font-size: 14px;
   outline: none;
   transition: border 0.2s ease;
 }

 /*  .ug-input:focus,
 .ug-select:focus {
   border-color: #ff3a80;
 }
 */
 .ug-form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   margin-top: 12px;
 }

 .ug-form-group {
   display: flex;
   flex-direction: column;
   flex: 1;
 }

 #purchasedPopup {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 999999;
   pointer-events: auto;
 }

 .ug-input,
 .ug-select {
   width: 100%;
   padding: 12px 14px;
   margin-bottom: 10px;
   border-radius: 10px;
   border: none;
   background: linear-gradient(145deg, #1a1a1a, #222);
   color: #eee;
   font-size: 0.9rem;
   transition: all 0.2s ease;
   /* box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.6),
     inset -2px -2px 4px rgba(255, 255, 255, 0.05); */
 }

 .ug-input::placeholder {
   color: #777;
 }

 .ug-input:focus,
 .ug-select:focus {
   outline: none;
   background: #2a2a2a;
   box-shadow: 0 0 0 2px #ff3a80, 0 0 6px rgba(255, 58, 128, 0.5);
 }

 .ug-form-row {
   display: flex;
   gap: 12px;
   margin-top: 5px;
 }



 /* 🎚 WAVEFORM */
 .ug-waveform {
   width: 100%;
   height: 80px;
   background: #000;
   border-radius: 6px;
   margin-bottom: 12px;
   overflow: hidden;
   position: relative;
 }


 /* 🎮 CONTROLS */
 .ug-controls {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
 }


 /* 🔘 BUTTON */
 .ug-btn {
   flex: 1;
   min-width: 80px;
   padding: 8px 10px;
   border: none;
   border-radius: 6px;
   background: #333;
   color: #eee;
   font-size: 0.85rem;
   cursor: pointer;
   font-family: 'SVN-Poppins', sans-serif;
   transition: background 0.2s;
 }

 .ug-btn:hover {
   background: #09f;
   color: #fff;
 }


 /* 🎧 PREVIEW BOX */
 .ug-preview {
   display: flex;
   align-items: center;
   /* 👈 giữa theo chiều dọc */
   justify-content: center;
   /* 👈 giữa theo chiều ngang */

   padding: 10px;
   border-radius: 6px;
   background: #1a1a1a;
   font-size: 0.85rem;
   text-align: center;
   min-height: 60px;
   /* 👈 thêm chiều cao tối thiểu để dễ thấy giữa */
 }


 /* 🔘 TOGGLE BUTTON */
 .ug-toggle-btn {
   display: block;
   margin: 10px auto;
   padding: 6px 14px;
   border: none;
   border-radius: 6px;
   font-size: 0.85rem;
   font-weight: 600;
   background: #09f;
   color: #fff;
   cursor: pointer;
   transition: background 0.2s;
 }

 .ug-toggle-btn:hover {
   background: #06c;
 }

 .ug-toggle-btn.on {
   background: #f33;
 }


 /* 📦 WRAPPER */
 .ug-wrapper.hide {
   max-height: 0;
   opacity: 0;
   overflow: hidden;
   padding: 0 12px;
 }

 .ug-wrapper {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;

   max-width: 100%;
   height: 70%;
   /* 👈 chiều cao panel (60% màn hình) */
   max-height: 70%;
   /* không vượt quá 80% */
   background: #111;
   border-radius: 16px 16px 0 0;
   padding: 16px;
   /*    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.6); */

   transform: translateY(100%);
   /* ẩn dưới màn hình */
   opacity: 0;
   font-family: 'SVN-Poppins', sans-serif;
   transition: transform 0.4s ease, opacity 0.3s ease;
   overflow-y: auto;
   /* nếu nhiều nội dung thì cuộn được */
 }

 .ug-wrapper.active {
   transform: translateY(0);
   /* trượt lên */
   opacity: 1;
 }

 .ug-container {
   margin-bottom: 20px;
 }

 .ug-topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 12px 16px;
   background: rgba(20, 20, 20, 0.85);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 14px;
   backdrop-filter: blur(10px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }

 /* Nút chung */
 .ug-topbar .btn,
 .ug-topbar .stop-btn {
   padding: 8px 14px;
   border-radius: 8px;
   border: none;
   background: linear-gradient(135deg, #ff3a80, #ff0050);
   color: #fff;
   font-weight: 600;
   font-family: 'SVN-Poppins', sans-serif;
   cursor: pointer;
   transition: all 0.25s ease;
 }

 .ug-topbar .btn:hover,
 .ug-topbar .stop-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 0 12px rgba(255, 58, 128, 0.7);
 }

 /* Stop button khác biệt (đỏ) */
 .ug-topbar .stop-btn {
   background: linear-gradient(135deg, #ff4444, #cc0000);
 }

 /* Thanh volume */
 .volume-wrap {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .volume-wrap input[type="range"] {
   width: 100%;
   max-width: 180px;
   height: 6px;

   background: #333;
   border-radius: 6px;
   outline: none;
   cursor: pointer;
   transition: background 0.3s ease;
 }

 .volume-wrap input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: #ff3a80;
   box-shadow: 0 0 8px rgba(255, 58, 128, 0.6);
   transition: all 0.25s ease;
 }

 .volume-wrap input[type="range"]::-webkit-slider-thumb:hover {
   transform: scale(1.2);
   box-shadow: 0 0 14px rgba(255, 58, 128, 0.9);
 }

 .volume-wrap input[type="range"]::-moz-range-thumb {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: #ff3a80;
   box-shadow: 0 0 8px rgba(255, 58, 128, 0.6);
   border: none;
   cursor: pointer;
 }

 .effect.dragging {
   opacity: 0.95;
   transform: scale(1.1) rotate(1deg);
   background: linear-gradient(135deg, #ff4b2b, #ff416c, #ffcc70);
   background-size: 300% 300%;
   color: #fff;
   border-radius: 14px;
   border: 2px solid rgba(255, 255, 255, 0.25);
   animation: gradientMove 3s ease infinite, pulse 1.2s ease-in-out infinite;
   transition: transform 0.2s ease;
   z-index: 999;
 }

 /* Gradient chạy */
 @keyframes gradientMove {
   0% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }

   100% {
     background-position: 0% 50%;
   }
 }

 /* Nhịp tim nhẹ */
 @keyframes pulse {

   0%,
   100% {
     transform: scale(1.1) rotate(1deg);
   }

   50% {
     transform: scale(1.15) rotate(-1deg);
   }
 }

 .popup {
   position: fixed;
   left: 0;
   right: 0;
   bottom: -100%;
   /* ban đầu ẩn */
   background: #222;
   color: #fff;
   padding: 20px;
   border-radius: 16px 16px 0 0;
   box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.6);
   transition: bottom 0.3s ease-in-out;
   z-index: 9999;
 }

 .popup.show {
   bottom: 0;
   /* trượt lên */
 }

 .popup-content {
   text-align: center;
 }

 .popup-actions {
   display: flex;
   justify-content: space-around;
   margin-top: 15px;
 }

 .popup-actions button {
   padding: 10px 20px;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   font-weight: bold;
 }

 #popup-cancel {
   background: #555;
   color: white;
 }

 #popup-confirm {
   background: #e74c3c;
   color: white;
 }

 .ug-category-buttons {
   display: flex;
   gap: 8px;
 }

 .cat-btn {
   flex: 1;
   padding: 10px 14px;
   border-radius: 6px;
   border: 1px solid #444;
   background: #222;
   color: #eee;
   font-size: 0.9rem;
   cursor: pointer;
   transition: all 0.2s ease;
 }

 .cat-btn.active {
   background: #ff0050;
   border-color: #ff0050;
   color: #fff;
 }

 #notification-container {
   position: fixed;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9999;
   pointer-events: none;
 }

 .notification {
   min-width: 280px;
   max-width: 420px;
   padding: 18px 22px;
   border-radius: 14px;
   color: #fff;
   font-family: 'SVN-Poppins', sans-serif;
   font-size: 16px;
   font-weight: 500;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
   display: flex;
   align-items: center;
   gap: 12px;
   animation: zoomIn 0.35s ease-out, zoomOut 0.4s ease-in 3s forwards;
   transform-origin: center;
   pointer-events: auto;
 }

 .notification span.icon {
   font-size: 22px;
   flex-shrink: 0;
 }

 .notification.error {
   background: linear-gradient(135deg, #e74c3c, #c0392b);
 }

 .notification.success {
   background: linear-gradient(135deg, #2ecc71, #27ae60);
 }

 .notification.info {
   background: linear-gradient(135deg, #3498db, #2980b9);
 }

 .notification.warning {
   background: linear-gradient(135deg, #f39c12, #d35400);
 }

 @keyframes zoomIn {
   from {
     opacity: 0;
     transform: scale(0.6);
   }

   to {
     opacity: 1;
     transform: scale(1);
   }
 }

 @keyframes zoomOut {
   to {
     opacity: 0;
     transform: scale(0.8);
   }
 }

 /* Popup cài đặt chat */
 .popup.chat-settings,
 #chat-settings.popup {
   /* giữ tương thích class popup sẵn có */
   /* overlay: CSS .popup của bạn đang dùng rồi; nếu cần, bạn có thể thêm: */
   /* position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; */
 }

 #chat-settings.show {
   /* hiện popup */
   display: block;
 }

 .chat-settings.popup-content {
   /* nếu .popup-content đã có style, bổ sung width cho form settings */
   width: 420px;
   max-width: 92vw;
   background: #1b1b1b;
   border-radius: 12px;
   padding: 12px;
   border: 1px solid rgba(255, 255, 255, 0.08);
 }

 /* Header */
 .cs-header {
   display: flex;
   align-items: center;
   margin-bottom: 8px;
 }

 .cs-title {
   font-size: 15px;
   font-weight: 700;
   color: #ffb400;
 }

 .cs-header .btn-icon {
   margin-left: auto;
   height: 28px;
   width: 28px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, 0.15);
   background: transparent;
   color: inherit;
   cursor: pointer;
   transition: background .2s ease, transform .05s ease;
 }

 .cs-header .btn-icon:hover {
   background: rgba(255, 255, 255, 0.08);
 }

 .cs-header .btn-icon:active {
   transform: scale(.98);
 }

 /* Body */
 .cs-body {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 6px 4px 10px;
 }

 .setting-item {
   display: flex;
   align-items: center;
   gap: 12px;
   background: #222222;
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 10px;
   padding: 10px 12px;
 }

 .setting-text {
   display: flex;
   flex-direction: column;
   gap: 2px;
 }

 .st-title {
   font-size: 13px;
   font-weight: 600;
 }

 .st-desc {
   font-size: 11px;
   color: #aaa;
 }

 /* Footer */
 .cs-footer {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
 }

 .cs-footer .btn {
   height: 30px;
   padding: 0 12px;
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, 0.15);
   background: #2a2a2a;
   color: #fff;
   cursor: pointer;
 }

 .cs-footer .btn:hover {
   background: #333;
 }

 /* Switch */
 .switch {
   position: relative;
   width: 48px;
   height: 26px;
   flex: 0 0 auto;
 }

 .switch input {
   opacity: 0;
   width: 0;
   height: 0;
   position: absolute;
 }

 .slider {
   position: absolute;
   inset: 0;
   background: #555;
   border-radius: 999px;
   transition: background .2s ease;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
 }

 .slider::before {
   content: "";
   position: absolute;
   height: 20px;
   width: 20px;
   left: 3px;
   top: 50%;
   transform: translateY(-50%);
   background: #fff;
   border-radius: 50%;
   transition: transform .2s ease;
 }

 .switch input:checked+.slider {
   background: #ff3a80;
 }

 .switch input:checked+.slider::before {
   transform: translate(22px, -50%);
 }

 /* Theme glass hover tinh chỉnh (tùy theme bạn) */
 .theme-glass .chat-settings.popup-content {
   background: rgba(20, 20, 20, .8);
   backdrop-filter: blur(10px);
 }

 .top-gift-wrapper {
   display: flex;
   align-items: center;
   gap: 16px;
 }