/* ============ Fonts (optional) ============ */
@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700&display=swap');

/* ============ TOKENS ============ */
:root{
  /* Colors */
  --color-product1:#413232;
  --color-product2:#000000;
  --color-product3:#d3bd8c;
  --color-product4:#e7ddad;
  --color-product5:#ffffff;

  --text-primary:#2c3e50;
  --text-muted:#6c757d;

  /* Layout */
  --nav-h:80px;      /* chiều cao navbar thực tế */
  --hero-gap:24px;   /* muốn banner cách navbar thêm bao nhiêu */
  --footer-h:60px;

  /* Shadows & Z */
  --shadow-sm:0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:0 4px 12px rgba(0,0,0,.15);
  --z-navbar:10000;
  --z-dropdown:11000;
  --z-floating:12000;
}

/* ============ BASE ============ */
html{position:relative;min-height:100%;}
*,*::before,*::after{box-sizing:border-box;}
body{
  display:flex;flex-direction:column;min-height:100vh;margin:0;
  color:var(--text-primary);
  /* bù navbar + đẩy banner xuống thêm */
  padding-top:calc(var(--nav-h) + var(--hero-gap));
  overflow-x:hidden;
  font-family: 'Roboto', sans-serif;
}
.container,.container-fluid{max-width:100%;}
.main-content{width:100%;max-width:100%;padding:0;margin:0;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}

/* ============ UTILITIES (màu nền nhanh) ============ */
.bg-color-product1{background-color:var(--color-product1);}
.bg-color-product2{background-color:var(--color-product2);}
.bg-color-product3{background-color:var(--color-product3);}
.bg-color-product4{background-color:var(--color-product4);}
.bg-color-product5{background-color:var(--color-product5);}
.text-muted{color:var(--text-muted);}

/* ============ NAVBAR (fixed) ============ */
.navbar{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);
  z-index:var(--z-navbar);
  background:#fff;
  box-shadow:0 3px 9px 3px rgba(0,0,0,0.05);
  overflow:visible;
}
.navbar-brand img{width:30px;}
.nav-item{margin-left:5px;border-bottom:0.5px solid rgba(0,0,0,0.05);position:relative;}
.nav-link:hover{font-weight:bold;}
.navbar-collapse,.navbar-nav{overflow:visible}

/* Icon kích thước */
.nav-link i.fas.fa-user,
.nav-link i.fas.fa-shopping-cart{font-size:1.5em;line-height:1;}

/* ============ DROPDOWN & MEGA ============ */
.dropdown-menu{
  min-width:200px;
  position:absolute;top:100%;left:0;
  opacity:0;visibility:hidden;display:block;
  background:#fff;border:1px solid rgba(0,0,0,0.1);border-radius:8px;
  box-shadow:var(--shadow-lg);
  z-index:var(--z-dropdown);
  transform:translateY(4px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
}
.nav-item.dropdown:hover>.dropdown-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.dropdown-menu.columns-2{min-width:400px;}
.dropdown-menu.columns-3{min-width:600px;}
.dropdown-menu li a{display:block;padding:8px 16px;color:#000;text-decoration:none;font-weight:300;white-space:nowrap;}
.dropdown-menu li a:hover{background:#000;color:#fff;}
.multi-column-dropdown{list-style:none;margin:0;padding:0;}
.divider{height:1px;background-color:#ddd;margin:5px 0;width:100%;}

/* Style riêng 2 menu lớn (trang nhã, kế thừa dropdown-menu) */
.hangmuc-style{min-width:200px;border-radius:8px;box-shadow:var(--shadow-lg);padding:10px 0;font-size:16px;}
.sanpham-style{min-width:600px;border-radius:8px;box-shadow:var(--shadow-lg);padding:20px 0;font-size:16px;}

/* ============ CAROUSEL / HERO ============ */
.carousel, .carousel-inner{position:relative;z-index:1;}
/* Mặc định: không ép chiều cao để ảnh không bị méo/crop */
.carousel-item img{width:100%;height:auto;object-fit:cover;}

/* Biến thể full màn hình: thêm class .hero-full vào wrapper của carousel */
.hero-full .carousel-item img{width:100vw;height:100vh;}

/* Nếu muốn banner cao cố định (trang chủ), bọc carousel bằng .home-hero-medium */
.home-hero-medium .carousel-item img{height:500px;width:100%;object-fit:cover;}

/* ============ PRODUCT LIST / CARD ============ */
.product-item{margin-bottom:20px;max-width:100%;}
.product-item img{width:100%;height:auto;}
.special-img{position:relative;}
.special-img span{top:20px;right:20px;position:absolute;}
.special-img img{width:100%;height:200px;object-fit:cover;transition:transform .3s ease;}
.special-img:hover img{transform:scale(1.06);}
.price-old{text-decoration:line-through;margin-left:10px;}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 20px;font-size:18px;border-radius:5px;cursor:pointer;
  transition:background-color .3s ease, transform .2s ease;
  text-decoration:none;
}
.btn:not(.nav-btns button){
  background:#fff;color:#000;border:1px solid rgb(85,85,85);border-radius:10px;
}
.btn:hover{background:#000;color:#fff !important;}
.btn-product{font-size:14px;}
.btn-product-action{
  width:32%;min-width:110px;max-width:180px;padding:10px 0;font-size:15px;border-radius:6px;
  margin:0 1%;font-weight:500;background:var(--color-product3);color:#222;
  transition:background .2s,color .2s,box-shadow .2s;box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.btn-product-action:hover{background:var(--color-product1);color:#fff;}
.icon-btn:hover{background-color:rgb(193,193,193);}

/* Nhóm nút ở form tìm kiếm trên navbar */
.nav-btns{align-items:center;}
.nav-btns form{display:flex;align-items:center;width:220px;}
.nav-btns .form-control{flex-grow:1;}
.nav-btns .btn{display:flex;align-items:center;justify-content:center;padding:.5rem;margin-left:10px;}

/* ============ ALERT (thông báo nổi) ============ */
.alert{
  position:fixed;top:calc(var(--nav-h) + 8px);left:50%;transform:translateX(-50%);
  z-index:var(--z-floating);width:90%;max-width:600px;
}
.alert.fade-out{opacity:0;transition:opacity .5s ease;pointer-events:none;}

/* ============ FLOATING CONTACT BUTTONS ============ */
.contact-buttons{
  position:fixed;bottom:50px;right:20px;display:flex;flex-direction:column;align-items:center;
  z-index:var(--z-floating);
}
.contact-btn{
  width:50px;height:50px;margin-bottom:10px;border-radius:50%;background:#fff;
  box-shadow:var(--shadow-sm);display:flex;justify-content:center;align-items:center;
  transition:transform .2s ease, box-shadow .2s ease;cursor:pointer;
}
.contact-btn img{width:60%;height:60%;}
.phone-btn,.zalo-btn,.messenger-btn,.facebook-btn,.top-btn{background-color:rgba(255,255,255,0.4);}
.contact-btn:hover,.btn-product:hover{transform:scale(1.1);box-shadow:0 6px 8px rgba(0,0,0,0.2);}

/* ============ SIDEBAR (admin) ============ */
.card{background-color:#3B3131;padding:20px;margin:10px;border-radius:10px;box-shadow:8px 5px 5px #3B3131;}
.sidebar{
  position:fixed;z-index:1;top:0;left:0;height:100%;width:0;transition:.5s;
  background-color:#3B3131;overflow-x:hidden;padding-top:60px;
}
.sidebar a{padding:8px 8px 8px 32px;text-decoration:none;font-size:16px;color:#fff;display:block;transition:.3s;}
.sidebar .side-header{margin-left:30px;margin-bottom:8px;color:#fff;}
.sidebar a:hover{background-color:#584e46;}
.sidebar .closebtn{position:absolute;top:0;right:2px;font-size:34px;margin-left:50px;}
.openbtn{font-size:20px;cursor:pointer;padding:10px 15px;border:none;color:#fff;background-color:#584e46;}
.openbtn:hover{color:#ECDAC9;}
#main{transition:margin-left .5s;padding:20px;}
@media screen and (max-height:450px){
  .sidebar{padding-top:15px;}
  .sidebar a{font-size:18px;}
}

/* ============ PRODUCT DETAIL PAGE ============ */
.color-product{margin-right:10px;width:42px;height:40px;border-radius:50%;}
.quantity{display:flex;align-items:center;}
.quantity button{width:30px;height:30px;border:1px solid #ccc;border-radius:5px;background:#fff;cursor:pointer;}
.quantity input{width:40px;text-align:center;}
.btn-group-product button{width:49.5%;font-weight:500;}
.detail-product{padding-left:30px;}
.detail-product div{margin-bottom:15px;}
.describe-detail-product{border:1px solid rgb(186,183,183);}
.content-describe-detail-product{padding:50px;}
.title-describe-detail-product{border-bottom:1px solid rgb(186,183,183);}
.main-detail-product{margin-top:100px;}

/* ============ TITLES (dùng chung) ============ */
.title h2,
.title h2 span{
  font-size:2rem;font-weight:700;color:#2c3e50;text-transform:uppercase;
  letter-spacing:1.5px;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align:center;margin-bottom:20px;text-shadow:1px 1px 2px rgba(0,0,0,0.1);
}
.title h2{position:relative;display:inline-block;}

/* ============ FOOTER (sticky) ============ */
.footer{
  position:relative;margin-top:auto;width:100%;
  background-color:#000;color:#fff;padding:40px 0; /* dùng padding thay cho height cố định */
}
footer h5{font-weight:bold;margin-bottom:20px;}
footer .social-icons a{display:inline-block;}
footer p{margin-bottom:5px;}

/* ============ CART BADGE ============ */
.user-cart span{
  background-color:red;padding:0 3px;border-radius:10px;font-size:18px;margin-left:-1.2rem;
}

/* ============ CHATBOT (gọn) ============ */
.chatbot-container{position:fixed;bottom:20px;left:20px;z-index:calc(var(--z-floating) - 1);}
.chatbot-toggle{
  width:80px;height:80px;background:#fff;border-radius:15px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,0.2);transition:all .3s;border:2px solid #28a745;position:relative;overflow:hidden;padding:8px;
}
.chatbot-toggle:hover{transform:scale(1.1);box-shadow:0 6px 25px rgba(0,0,0,0.4);}
.chatbot-toggle::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left .5s;
}
.chatbot-toggle:hover::before{left:100%;}
.chatbot-toggle .notification-badge{
  position:absolute;top:-5px;right:-5px;background:#ff4757;color:#fff;border-radius:50%;
  width:20px;height:20px;font-size:12px;display:flex;align-items:center;justify-content:center;animation:pulse 2s infinite;
}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}

.chatbot-window{
  position:absolute;bottom:80px;left:0;width:350px;height:500px;background:#fff;border-radius:15px;
  box-shadow:0 10px 40px rgba(0,0,0,0.2);display:none;flex-direction:column;overflow:hidden;animation:slideIn .3s ease;
}
@keyframes slideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.chatbot-header{
  background:linear-gradient(135deg,#28a745 0%,#20c997 100%);
  padding:15px;display:flex;justify-content:space-between;align-items:center;border-radius:15px 15px 0 0;
}
.header-content{display:flex;align-items:center;gap:15px;}
.header-logo{display:flex;align-items:center;gap:8px;}
.header-logo .logo-shapes{display:flex;align-items:center;gap:6px;}
.header-logo .logo-red-shape{width:16px;height:16px;background:#dc3545;border-radius:2px;position:relative;}
.header-logo .logo-red-shape::after{content:'';position:absolute;bottom:0;right:0;width:0;height:0;border-left:4px solid transparent;border-bottom:4px solid #dc3545;}
.header-logo .logo-green-shape{width:16px;height:16px;border:2px solid #28a745;border-radius:2px;border-bottom:none;border-right:none;position:relative;}
.header-logo .logo-title{font-size:10px;color:#fff;}
.header-logo .logo-subtitle{font-size:8px;color:#fff;}
.header-info h3{color:#fff;margin:0 0 5px 0;font-size:14px;}
.chatbot-header h3{margin:0;font-size:16px;font-weight:600;}
.chatbot-header .status{display:flex;align-items:center;font-size:12px;}
.status .dot{width:8px;height:8px;background:#4CAF50;border-radius:50%;margin-right:5px;animation:blink 1.5s infinite;}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:.3}}

.chatbot-close{
  background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:0;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .3s;
}
.chatbot-close:hover{background:rgba(255,255,255,0.2);}

.chatbot-messages{flex:1;padding:15px;overflow-y:auto;background:#f8f9fa;}
.message{margin-bottom:15px;display:flex;align-items:flex-start;}
.message.user{justify-content:flex-end;}
.message-content{max-width:80%;padding:10px 15px;border-radius:18px;font-size:14px;line-height:1.4;word-wrap:break-word;}
.message.bot .message-content{background:#fff;color:#333;box-shadow:0 2px 8px rgba(0,0,0,0.1);border-bottom-left-radius:5px;}
.message.user .message-content{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border-bottom-right-radius:5px;}
.message-time{font-size:11px;color:#999;margin-top:5px;text-align:center;}

.chatbot-input{padding:15px;background:#fff;border-top:1px solid #eee;display:flex;align-items:center;gap:10px;}
.chatbot-input input{
  flex:1;border:1px solid #ddd;border-radius:20px;padding:10px 15px;font-size:14px;outline:none;transition:border-color .3s;
}
.chatbot-input input:focus{border-color:#667eea;}
.chatbot-input button{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:50%;
  width:35px;height:35px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .3s;
}
.chatbot-input button:hover{transform:scale(1.1);}

.quick-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.quick-action{
  background:#fff;border:1px solid #ddd;border-radius:15px;padding:8px 12px;font-size:12px;cursor:pointer;
  transition:all .3s;color:#333;text-decoration:none;display:inline-block;
}
.quick-action:hover{background:#667eea;color:#fff;border-color:#667eea;transform:translateY(-2px);}

.contact-info{
  background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:#fff;padding:15px;border-radius:10px;margin:10px 0;text-align:center;
}
.contact-info h4{margin:0 0 10px 0;font-size:14px;}
.contact-info p{margin:5px 0;font-size:13px;}
.contact-info a{color:#fff;text-decoration:none;font-weight:600;}
.contact-info a:hover{text-decoration:underline;}

/* ============ RESPONSIVE ============ */
@media (max-width:1200px){
  .container{padding:0 15px;}
}
@media (max-width:992px){
  .container{padding:0 10px;}
  .navbar-nav{text-align:center;}
  .navbar-nav .nav-link{padding:10px 15px;}
  .hidden-slider{display:none;}
  .detail-product{margin-top:40px;}
  /* Dropdown vẫn hover được trên màn hình lớn; trên mobile nên dùng click/toggle bằng JS */
}
@media (max-width:768px){
  .container{padding:0 8px;}
  .btn{padding:8px 16px;font-size:14px;}
  .row{margin:0;}
}
@media (max-width:576px){
  .container{padding:0 5px;}
  .btn{padding:6px 12px;font-size:12px;}
  .col-md-6,.col-lg-6{flex:0 0 100%;max-width:100%;margin-bottom:15px;}
}
@media (max-width:768px){
  .chatbot-window{width:300px;height:450px;bottom:70px;left:10px;}
  .chatbot-toggle{width:50px;height:50px;}
}
@media (max-width:480px){
  .chatbot-window{width:280px;height:400px;left:5px;}
  .chatbot-container{bottom:15px;left:15px;}
}

/* ============ FOOTER CUSTOM ============ */
#footer {
  background: linear-gradient(135deg, #016d3e 0%, #012914 100%); /* xanh đậm chuyển sắc */
  color: #ffffff;
  padding: 40px 0 25px;
  font-size: 15px;
  line-height: 1.7;
  position: relative;
  overflow: hidden;
}

#footer::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.05), transparent 70%);
  animation: footer-glow 10s linear infinite;
}

@keyframes footer-glow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#footer h5 {
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 20px;
  text-transform: uppercase;
  position: relative;
}
#footer h5::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #27ae60;
  margin-top: 8px;
  border-radius: 2px;
}

#footer h6 {
  color: #f1f1f1;
  font-weight: 600;
  font-size: 14px;
  margin-top: 12px;
  margin-bottom: 10px;
}

#footer p,
#footer a {
  color: #f1f1f1;
  margin-bottom: 8px;
  font-size: 14px;
}

#footer a {
  text-decoration: none;
  position: relative;
  transition: color 0.3s;
}
#footer a::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 1px;
  bottom: -2px;
  left: 0;
  background: #27ae60;
  transition: width 0.3s;
}
#footer a:hover {
  color: #27ae60;
}
#footer a:hover::after {
  width: 100%;
}

/* Social Icons */
#footer .social-icons a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  font-size: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #ffffff;
  transition: all 0.3s;
}
#footer .social-icons a:hover {
  background: #27ae60;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Google Map iframe */
#footer iframe {
  border-radius: 8px;
  margin-top: 10px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.3);
}

/* Footer bottom */
#footer .row.mt-4 {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 40px;
  padding-top: 20px;
}
#footer .text-center p {
  font-size: 13px;
  color: #cccccc;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  #footer { text-align: center; }
  #footer .col-md-3 { margin-bottom: 30px; }
  #footer h5::after { margin-left: auto; margin-right: auto; }
}