.elementor-2 .elementor-element.elementor-element-51eef04{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-2 .elementor-element.elementor-element-fd6292a img{width:100%;max-width:100%;}.elementor-2 .elementor-element.elementor-element-9763cf1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-2 .elementor-element.elementor-element-a231f44{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-41ff662 */@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');
.vph-featured-dishes-section {
font-family:'Inter tight', sans-serif; /* Sử dụng font Nunito, fallback về Arial */
padding: 40px 15px; /* Khoảng cách trên dưới và trái phải cho section */
background-color: #f9f9f9; /* Màu nền nhẹ nhàng cho section */
}
.vph-section-title-container { /* Container cho tiêu đề section nếu bạn muốn thêm */
text-align: center;
margin-bottom: 30px;
}
.vph-section-title-container h2 {
font-size: 2.2em;
color: #333;
font-weight: 700;
margin: 0;
position: relative;
display: inline-block;
padding-bottom: 10px;
}
/* Đường gạch chân dưới tiêu đề - tùy chọn */
.vph-section-title-container h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 3px;
background-color: #9F1D21; /* Màu đỏ chủ đạo */
}
.vph-dishes-grid {
display: grid;
/* Tạo các cột tự động điều chỉnh kích thước, tối thiểu 270px */
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 25px; /* Khoảng cách giữa các món ăn */
max-width: 1200px; /* Giới hạn chiều rộng tối đa của lưới */
margin: 0 auto; /* Căn giữa lưới */
}
.vph-dish-card {
background-color: #ffffff;
border-radius: 12px; /* Bo góc mềm mại hơn */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Shadow nhẹ nhàng hơn */
overflow: hidden; /* Để bo góc ảnh theo card */
display: flex;
flex-direction: column; /* Xếp nội dung theo chiều dọc */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vph-dish-card:hover {
transform: translateY(-6px); /* Hiệu ứng nhấc lên khi hover */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.vph-dish-image-container {
width: 100%;
height: 220px; /* Chiều cao cố định cho ảnh */
overflow: hidden;
}
.vph-dish-card img {
width: 100%;
height: 100%;
object-fit: cover; /* Đảm bảo ảnh lấp đầy mà không bị méo */
display: block;
transition: transform 0.4s ease;
}
.vph-dish-card:hover img {
transform: scale(1.05); /* Zoom nhẹ ảnh khi hover card */
}
.vph-dish-content {
padding: 18px;
flex-grow: 1; /* Đảm bảo phần content chiếm không gian còn lại */
display: flex;
flex-direction: column;
}
.vph-dish-title {
font-size: 1.25em; /* Kích thước title */
font-weight: 700; /* In đậm title */
color: #9F1D21; /* Màu đỏ chủ đạo cho title */
margin-top: 0;
margin-bottom: 8px;
line-height: 1.3;
min-height: 2.6em; /* Đảm bảo ít nhất 2 dòng cho title */
}
.vph-dish-price {
font-size: 1em;
color: #555;
font-weight: 600;
margin-bottom: 12px;
}
.vph-dish-footer {
margin-top: auto; /* Đẩy footer xuống dưới cùng */
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 12px; /* Khoảng cách phía trên footer */
border-top: 1px solid #f0f0f0; /* Đường kẻ ngăn cách nhẹ */
}
.vph-dish-orders {
font-size: 0.85em;
color: #777;
}
.vph-order-button {
background-color: #9F1D21; /* Màu nền button */
color: #ffffff;
padding: 8px 15px; /* Kích thước button */
border: none;
border-radius: 6px; /* Bo góc button */
text-decoration: none;
font-size: 0.9em;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
white-space: nowrap; /* Tránh xuống dòng chữ trong button */
}
.vph-order-button:hover {
background-color: #7c171a; /* Màu tối hơn khi hover */
transform: scale(1.03); /* Phóng to nhẹ khi hover */
}
/* Responsive: Có thể thêm các media query để tùy chỉnh sâu hơn nếu cần */
@media (max-width: 600px) {
.vph-dishes-grid {
grid-template-columns: 1fr; /* 1 cột trên màn hình nhỏ */
gap: 20px;
}
.vph-dish-title {
font-size: 1.15em;
}
}
Món Ngon Đặc Sắc
TÔM TÍCH HẤP MÌ TƯƠI
0 VNĐ
Use code with caution.
Html
Cách sử dụng:
Sao chép code: Copy toàn bộ đoạn code trên (bao gồm cả phần 
