/* File: assets/css/tippy-amazon.css */
.tippy-box {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 0;               /* padding để chuyển cho từng phần */
  max-width: 320px;
  text-align: left;
}

.tippy-box .tippy-content {
  position: relative;
  padding: 16px;
  font-size: 14px;
  color: #333;
}

.tippy-box .tippy-content .title {
  font-weight: bold;
  margin-bottom: 8px;
}

.tippy-box .tippy-content .body {
  margin-bottom: 12px;
  line-height: 1.4;
  color: #555;
}

.tippy-box .tippy-content .read-more {
  font-size: 13px;
  color: #007185;
  text-decoration: none;
}

.tippy-box .tippy-content .read-more:hover {
  text-decoration: underline;
}

/* Nút đóng */
.tippy-box .tippy-content .tippy-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: #666;
}

.tippy-box .tippy-arrow {
  width: 8px;
  height: 8px;
  color:#fff;
  overflow: hidden; /* ẩn phần thừa */
}

/* Vẽ mũi tên vuông xoay 45° */
.tippy-box .tippy-arrow::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: #fff;        /* cùng màu nền popup */
  transform: rotate(45deg);      /* xoay 45° thành tam giác */
  /* viền trên và trái để khớp với border popup */
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
}

.tippy-box[data-placement^='top']    .tippy-arrow { bottom: -4px; }
.tippy-box[data-placement^='bottom'] .tippy-arrow { top:  -4px; }
.tippy-box[data-placement^='left']   .tippy-arrow { right: -4px; }
.tippy-box[data-placement^='right']  .tippy-arrow { left:  -4px; }



#main-content {
  /* chuyển margin phải khi drawer mở */
  transition: margin-right .3s ease-in-out; /* Tailwind tương đương transition-margin */
}
.drawer-open #main-content {
  margin-right: 9rem; /* = w-36 */
}

.fixed-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 50;
  overflow-y: auto;
}
#drawer-placeholder {
  height: 0;         /* không chiếm chiều cao */
  transition: width .3s ease-in-out;
}