/* Bottom-sheet (modal) minimal styles */
 .preview-container { position: relative; }
      
 /* scope bottom-sheet theo container, KHÔNG dùng fixed */
 .preview-container .bottom-sheet {
   position: absolute; /* thay vì fixed */
   inset: 0;           /* top/right/bottom/left = 0 */
   display: flex;
   align-items: flex-end;
   opacity: 0;
   pointer-events: none; 
   transition: 0.1s linear;
 }
 .preview-container .bottom-sheet.show {
   opacity: 1;
   cursor: pointer;
   background-color: rgba(0,0,0,.5);
   z-index: 10;
 }
 .preview-container .bottom-sheet .sheet-overlay {
   position: absolute; /* thay vì fixed */
   inset: 0;
   z-index: -1;
   opacity: 0.5;
   background: #000;
 }
 .preview-container .bottom-sheet .content {
   width: 100%;
   background: #fff;
   max-height: 100%;  /* thay 100vh */
   height: 50%;       /* thay 50vh để ăn theo container */
   max-width: 100%;   /* tránh vượt container */
   padding: 12px 0 0;
   border-radius: 12px 12px 0 0;
   box-shadow: 0 10px 20px rgba(0,0,0,.03);
   transition: 0.3s ease;
   transform: translateY(100%);
 }
 .preview-container .bottom-sheet.show .content {
   transform: translateY(0%);
 }
 
 /* KHÔNG chặn scroll toàn body nữa */
 /* body:has(.bottom-sheet.show) { ... } => bỏ/override */
 .preview-container.sheet-open { overflow: hidden; }
 
 
 .bottom-sheet {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   opacity: 0;
   pointer-events: none;
   align-items: center;
   flex-direction: column;
   justify-content: flex-end;
   transition: 0.1s linear;
 }
 .bottom-sheet.show {
   opacity: 1;
   pointer-events: auto;
 }
 .bottom-sheet .sheet-overlay {
   position: fixed;
   inset: 0;
   z-index: -1;
   opacity: 0.5;
   background: #000;
 }
 .bottom-sheet .content {
   width: 100%;
   position: relative;
   background: #fff;
   max-height: 100vh;
   height: 50vh;
   max-width: 1024px;
   padding: 24px;
   transform: translateY(100%);
   border-radius: 12px 12px 0 0;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
   transition: 0.3s ease;
 }
 .bottom-sheet.show .content {
   transform: translateY(0%);
 }
 .bottom-sheet.dragging .content {
   transition: none;
 }
 .bottom-sheet.fullscreen .content {
   border-radius: 0;
   overflow-y: hidden;
 }
 .bottom-sheet .header {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .header .drag-icon {
   cursor: grab;
   user-select: none;
   padding: 15px;
   margin-top: -15px;
 }
 .header .drag-icon span {
   height: 4px;
   width: 40px;
   display: block;
   background: #c7d0e1;
   border-radius: 50px;
 }
 .bottom-sheet .body {
   height: 100%;
   overflow-y: auto;
   padding: 16px;
   scrollbar-width: none;
 }
 .bottom-sheet .body::-webkit-scrollbar {
   width: 0;
 }
 .bottom-sheet .body h2 {
   font-size: 1.8rem;
 }
 .bottom-sheet .body p {
   margin-top: 20px;
   font-size: 1.05rem;
 }