body{background-color:#ffffff;}#header{background-image:url('/uploads/banner.png');width:1080;height:176;}.zoom-right {
  display: inline-block;
  overflow: hidden;
  border-radius: 16px;
}
.zoom-right img {
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
  transform-origin: left center; /* mốc bên trái → phóng sang phải */
}
/* Hover */
.zoom-right:hover img {
  transform: scale(1.03);
}

.zoom-to-left {
  display: inline-block;
  overflow: hidden;
  border-radius: 16px;
}

.zoom-to-left img {
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
  transform-origin: right center; /* neo bên phải */
}

/* Hover */
.zoom-to-left:hover img {
  transform: scale(1.03);
}

/* Hover: sáng viền */
.glow-effect {
  display: inline-block;
border: 0.5px solid #fff;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}
/* Ảnh */
.glow-effect img {
  width: 208px;
  height: auto;
  display: block;
}
/* Hover: sáng viền */
.glow-effect:hover {
  box-shadow: 
    0 0 10px rgba(0, 150, 255, 0.6),
    0 0 20px rgba(0, 150, 255, 0.5),
    0 0 30px rgba(0, 150, 255, 0.4);
}

/* Hover: sáng viền menu */
.glow-effectt {
  display: inline-block;
border: 0.5px solid #fff;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}
/* Ảnh menu*/
.glow-effectt img {
  width: 240px;
  height: auto;
  display: block;
}
/* Hover: sáng viền menu */
.glow-effectt:hover {
  box-shadow: 
    0 0 10px rgba(255, 0, 0, 0.6),
    0 0 20px rgba(255, 0, 0, 0.5),
    0 0 30px rgba(255, 0, 0, 0.4);
}

/* Hover: sáng viền menu2 */
.glow-effectd {
  display: inline-block;
border: 0.5px solid #fff;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}
/* Ảnh menu*/
.glow-effectd img {
  width: 240px;
  height: auto;
  display: block;
}
/* Hover: sáng viền menu */
.glow-effectd:hover {
  box-shadow: 
    0 0 10px rgba(255, 0, 0, 0.6),
    0 0 20px rgba(255, 0, 0, 0.5),
    0 0 30px rgba(255, 0, 0, 0.4);
}

/* Hover: sáng viền ảnh đơn vị phối hợp------------------------------------------- */

/* Hover: sáng viền do */
.glow-effectdo {
  display: inline-block;
border: 0.5px solid #fff;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}
/* Ảnh menu*/
.glow-effectdo img {
  width: 350px;
  height: auto;
  display: block;
}
/* Hover: sáng viền do */
.glow-effectdo:hover {
  box-shadow: 
    0 0 10px rgba(255, 0, 0, 0.6),
    0 0 20px rgba(255, 0, 0, 0.5),
    0 0 30px rgba(255, 0, 0, 0.4);
}

/* Hover: sáng viền xanh */
.glow-effectxanh {
  display: inline-block;
border: 0.5px solid #fff;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}
/* Ảnh menu*/
.glow-effectxanh img {
  width: 340px;
  height: auto;
  display: block;
}
/* Hover: sáng viền xanh */
.glow-effectxanh:hover {
  box-shadow: 
    0 0 10px rgba(0, 150, 255, 0.6),
    0 0 20px rgba(0, 150, 255, 0.5),
    0 0 30px rgba(0, 150, 255, 0.4);
}

/* Hover: sáng viền vang */
.glow-effectvang {
  display: inline-block;
border: 0.5px solid #fff;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}
/* Ảnh menu*/
.glow-effectvang img {
  width: 340px;
  height: auto;
  display: block;
}
/* Hover: sáng viền vang */
.glow-effectvang:hover {
  box-shadow: 
    0 0 10px rgba(255, 215, 0, 0.6),
    0 0 20px rgba(255, 215, 0, 0.5),
    0 0 30px rgba(255, 215, 0, 0.4);
}

/* Kết thúc Hover: sáng viền ảnh đơn vị phối hợp */

/* ===== Zoom + Glow vàng ===== */
.zoom-gold {
  display: inline-block;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

/* Ảnh */
.zoom-gold img {
  width: 350px;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

/* Viền glow */
.zoom-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 rgba(255, 215, 0, 0);
  transition: 0.3s ease;
}

/* Hover */
.zoom-gold:hover img {
  transform: scale(1.05);
}

.zoom-gold:hover::before {
  box-shadow:
    0 0 10px rgba(255, 215, 0, 0.8),
    0 0 20px rgba(255, 215, 0, 0.6),
    0 0 30px rgba(255, 215, 0, 0.4);
}
/* ===== BO HIEU UNG CHUNG ===== */
.hieu-ung {
  display: inline-block;
  border-radius: 16px; /* bo goc */
  overflow: hidden; /* an phan du khi zoom */
  position: relative;
  transition: all 0.3s ease;
}

.hieu-ung img {
  width: 100%;
  height: auto;
  display: block;
  transition: all 0.4s ease;
}

/* ===== bat dau hieu ung ===== */

/* ===== 1. PHONG TO (ZOOM) ===== */
.phong-to:hover img {
  transform: scale(1.05);
}

/* ===== 2. THU NHO ===== */
.thu-nho:hover img {
  transform: scale(0.95);
}

/* ===== 3. TRUOT SANG PHAI ===== */
.sang-phai:hover img {
  transform: translateX(15px);
}

/* ===== 4. TRUOT SANG TRAI ===== */
.sang-trai:hover img {
  transform: translateX(-15px);
}

/* ===== 5. NOI LEN ===== */
.noi-len:hover img {
  transform: translateY(-10px);
}

/* ===== 6. HIEU UNG 3D ===== */
.hieu-ung-3d:hover img {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* ===== 7. MO -> RO ===== */
.mo-ro img {
  opacity: 0.7;
}
.mo-ro:hover img {
  opacity: 1;
}

/* ===== 8. RO -> MO ===== */
.ro-mo:hover img {
  opacity: 0.5;
}

/* ===== 9. DEN TRANG -> MAU ===== */
.den-trang img {
  filter: grayscale(100%);
}
.den-trang:hover img {
  filter: grayscale(0%);
}

/* ===== 10. GLOW XANH ===== */
.glow-xanh:hover {
  box-shadow:
    0 0 15px rgba(0,150,255,0.7),
    0 0 30px rgba(0,150,255,0.5);
}

/* ===== 11. GLOW VANG ===== */
.glow-vang:hover {
  box-shadow:
    0 0 15px rgba(255,215,0,0.8),
    0 0 30px rgba(255,215,0,0.6);
}

/* ===== 12. VIEN ===== */
.vien {
  border: 2px solid #ddd;
}
.vien:hover {
  border-color: #007bff;
}

/* ===== 13. COMBO DEP (KHUYEN DUNG) ===== */
.combo-dep:hover img {
  transform: scale(1.04) translateY(-6px);
  box-shadow: 0 25px 50px rgba(0,0,0,0.35);
}

.combo-dep:hover {
  box-shadow: 0 0 20px rgba(0,150,255,0.6);
}
/* ===== ketthuc hieuung ===== */