html,body,div,span,applet,object,iframe,p,blockquote,pre,a,abbr,acronym,address,
big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,
var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,
tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,
hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*CSS All*/
:root {
  --primary-color: #23ad10;
  --black-color: #23292c;
  --white-color: #fff;
  --text-color: #777;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/*Header*/
/*Navbar*/
#nav {
  padding: 5px;
  background-color: var(--white-color);
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
}

#nav .logo {
  font-family: "Zilla Slab", sans-serif;
  font-size: 25px;
  font-weight: bolder;
  text-decoration: none;
  color: var(--black-color);
}

#nav .logo i {
  color: var(--primary-color);
}

#nav ul li a {
  color: var(--black-color);
  font-size: 16px;
  line-height: 16px;
  padding: 10px 12px;
  margin: 16px 8px;
}

#nav ul li .active {
  color: var(--white-color);
  background: var(--primary-color);
  border-radius: 5px;
}

#nav ul li a:hover {
  color: var(--white-color);
  background: var(--primary-color);
  border-radius: 5px;
}

#nav .icons i,
#nav .icons div {
  cursor: pointer;
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  border-radius: 50%;
  color: var(--black-color);
  background-color: #eee;
  margin-left: 5px;
}

#nav .icons i:hover,
#nav .icons div:hover {
  background-color: var(--primary-color);
  color: var(--white-color);
  transform: rotate(360deg);
}

#nav .tab-active {
  color: var(--primary-color);
}

#menu-bar {
  display: none;
}

.modal-search .modal-sch-main {
  border-radius: 10px;
}

.modal-search .search-btn {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.modal-search .search-btn i {
  color: var(--white-color);
}

.modal-search .search-btn:hover {
  opacity: 0.8;
}

/*Back to top*/
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: var(--primary-color);
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 50%;
}

#myBtn:hover {
  opacity: 0.8;
}

/*Main*/
/*Banner*/
.page-banner {
  padding: 150px 0 75px;
  background: url("../img/Banners/page-ban.jpg") center center no-repeat;
  background-size: cover;
}

.page-banner h1 {
  color: var(--white-color);
}

.page-banner p {
  font-size: 22px;
  color: #999999;
}

.page-banner h1,
.page-banner p {
  text-align: left;
  margin-bottom: 20px;
}

.page-banner-list {
  margin: 16px 0;
}

.page-banner-list li {
  list-style: none;
  display: inline;
}

.page-banner-list li a {
  color: var(--text-color);
  font-size: 15px;
  text-decoration: none;
}

.page-banner-list li a:hover {
  opacity: 0.8;
}

.page-banner-list i {
  color: var(--text-color);
  font-size: 12px;
  padding: 0 2px;
}

/*Menu*/
.modal-food .modal-thumbnail img {
  width: 100%;
}

.modal-food .img-food img {
  width: 15%;
}

.modal-food-info .modal-info-head {
  font-weight: bolder;
}

.modal-food-info .head-info {
  font-weight: 600;
}

.modal-food-info .f-info {
  margin: 20px 0;
}

.modal-food-info p {
  margin: 20px 0;
  color: var(--text-color);
}

.modal-food-info .item-price {
  font-size: 20px;
  color: var(--primary-color);
  font-weight: 600;
}

.modal-btn {
  background-color: var(--primary-color);
  color: var(--white-color);
  padding: 10px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn-close {
  background-color: var(--text-color);
}

.modal-btn:hover {
  opacity: 0.8;
}

#menu {
  margin-bottom: 50px;
}

#menu .menu-list h2 {
  font-size: 50px;
  text-align: center;
  padding: 80px 30px;
  margin-bottom: 30px;
}

#menu .menu-pizza {
  background: url("../img/Banners/menu-ban2.jpg") center center no-repeat;
}

#menu .menu-pasta {
  background: url("../img/Banners/menu-ban3.jpg") center center no-repeat;
}

#menu .menu-bergers {
  background: url("../img/Banners/menu-ban4.jpg") center center no-repeat;
}

#menu .menu-deserts {
  background: url("../img/Banners/menu-ban5.jpg") center center no-repeat;
}

#menu .menu-list li {
  display: flex;
  margin-bottom: 25px;
}

#menu .menu-list .img-menu {
  margin-right: 20px;
}

/* CHỈNH SỬA ĐOẠN NÀY ĐỂ CÓ KÍCH THƯỚC 3X3CM */
#menu .menu-list .img-menu img {
  border: 1px solid #d7d7d7;
  border-radius: 50%;
  width: 3cm; /* Hoặc 90px nếu muốn dùng pixel */
  height: 3cm; /* Hoặc 90px nếu muốn dùng pixel */
  object-fit: cover; /* Đảm bảo ảnh không bị méo */
}


#menu .menu-content {
  padding-top: 8px;
  width: 100%;
}

#menu .menu-content h4 {
  margin-bottom: 0;
  line-height: 20px;
}

#menu .menu-content h4 span {
  padding: 3px 0;
}

#menu .menu-content .item-title a {
  font-size: 18px;
  color: var(--black-color);
  font-weight: 600;
  line-height: 20px;
}

#menu .menu-content .item-title a:hover {
  text-decoration: none;
  color: var(--primary-color);
}

#menu .menu-content .item-price {
  font-size: 18px;
  float: right;
  color: var(--primary-color);
  padding-left: 10px;
  font-weight: 600;
}

#menu .menu-content p {
  font-size: 16px;
  color: var(--text-color);
  line-height: 1.4;
  margin: 10px 0;
}

#menu .menu-list {
  margin-bottom: 100px;
}

/*Pagination*/
.page-nav {
  margin-bottom: 20px;
}

.page-link {
  color: var(--primary-color);
}

.page-link:hover {
  color: var(--primary-color);
}

.page-item.active .page-link {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

/*Banner Reservation*/
.reservation-banner {
  padding: 130px 0;
  text-align: center;
  background: url("../img/Banners/menu-ban6.jpg") center center no-repeat;
}

.reservation-content h2 {
  color: var(--white-color);
  font-size: 50px;
  font-weight: 600;
  margin-bottom: 10px;
}

.reservation-content p {
  color: #aaa;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 25px;
  line-height: 1.4;
}

.reservation-content a {
  padding: 10px 35px;
  color: var(--white-color);
  font: 18px;
  font-weight: 600;
  text-decoration: none;
  background-color: var(--primary-color);
}

.reservation-content a:hover {
  color: var(--primary-color);
  background-color: var(--white-color);
}

/*Footer*/
footer {
  padding-top: 70px;
  background-color: #252428;
}

footer h3 {
  color: var(--white-color);
  margin-bottom: 4px;
}

footer p {
  color: var(--text-color);
  line-height: 1.6;
  margin: 10px 0;
  text-align: justify;
}

#up-footer .ft-mt {
  margin-bottom: 50px;
}

#up-footer .footer-socials {
  margin-bottom: 20px;
}

#up-footer .footer-socials a {
  font-size: 30px;
  text-decoration: none;
  color: var(--white-color);
  font-family: "Zilla Slab", sans-serif;
  font-weight: bolder;
}

#up-footer .footer-socials a i {
  color: var(--primary-color);
  padding-right: 3px;
}

#up-footer .socials-list a i {
  color: var(--white-color);
  padding-right: 4px;
  font-size: 16px;
}

#up-footer .socials-list a {
  color: var(--text-color);
  text-decoration: none;
}

#up-footer .socials-list a:hover {
  opacity: 0.7;
}

#up-footer h3 {
  font-size: 22px;
  margin-bottom: 15px;
  line-height: 28px;
}

#up-footer .contact-list i {
  width: 30px;
  display: inline-block;
}

#down-footer {
  border-top: 1px solid #3f4141;
}

#down-footer p {
  margin: 0;
  padding: 20px 0;
  text-align: center;
}

#down-footer a {
  color: var(--primary-color);
}

#down-footer a:hover {
  text-decoration: none;
  opacity: 0.8;
}
/* CSS cho phần gợi ý tìm kiếm trong modal */
#modelId .modal-body { /* Đảm bảo modal-body là relative cho position absolute bên trong */
    position: relative;
    padding-bottom: 0; /* Có thể điều chỉnh để gợi ý không bị đệm quá nhiều */
}

#search-suggestions {
    position: absolute; /* Quan trọng để gợi ý nằm trên nội dung khác */
    z-index: 1051; /* Cao hơn modal backdrop (thường 1040) và modal (thường 1050) */
    width: calc(100% - 30px); /* Đảm bảo chiều rộng khớp với input, trừ đi padding 15px mỗi bên của modal-body */
    max-height: 250px; /* Giới hạn chiều cao và cho phép cuộn */
    overflow-y: auto;
    background-color: var(--white-color); /* Sử dụng biến màu trắng của bạn */
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sử dụng box-shadow mặc định hoặc định nghĩa trong --box-shadow nếu có */
    left: 15px; /* Căn chỉnh với padding của modal-body */
    right: 15px; /* Căn chỉnh với padding của modal-body */
    top: 55px; /* Đặt dưới thanh tìm kiếm (chiều cao input 45px + khoảng cách 10px) */
}

#search-suggestions .list-group-item {
    padding: 10px 15px;
    font-size: 1.6rem; /* Kích thước chữ cho gợi ý, điều chỉnh theo ý muốn */
    border: none; /* Bỏ border mặc định của list-group-item */
    border-bottom: 1px solid #eee; /* Chỉ có border dưới */
    cursor: pointer;
    color: var(--black-color); /* Màu chữ mặc định cho gợi ý */
    transition: background-color 0.2s ease, color 0.2s ease;
}

#search-suggestions .list-group-item:last-child {
    border-bottom: none;
}

#search-suggestions .list-group-item:hover {
    background-color: var(--primary-color); /* Màu nền khi hover */
    color: var(--white-color); /* Màu chữ khi hover */
}

/* CSS cho highlight món ăn khi cuộn tới trên menu.html */
.highlight-food-item {
    background-color: #fffacd !important; /* Màu vàng nhạt để highlight */
    border: 2px solid var(--primary-color) !important;
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.7); /* Thêm đổ bóng nổi bật */
    transition: all 0.3s ease-in-out;
}


/* responsive cho mobile (nếu cần) */
@media (max-width: 768px) {
    #search-suggestions {
        left: 10px; /* Điều chỉnh lại theo padding của modal-body trên mobile */
        right: 10px; /* Điều chỉnh lại theo padding của modal-body trên mobile */
        width: calc(100% - 20px); /* 100% trừ padding 10px mỗi bên */
        top: 50px; /* Điều chỉnh vị trí trên mobile nếu input có chiều cao khác */
    }
    #search-suggestions .list-group-item {
        font-size: 1.4rem; /* Kích thước chữ nhỏ hơn trên mobile */
    }
}