:root{
  --blue:#0e4d92; /* xanh nước biển */
  --blue-dark:#0b3f76;
  --yellow:#ffd200;
  --white:#ffffff;
  --muted:#e5e7eb;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--white);
  background: var(--blue);
  line-height:1.6;
}
a{color:var(--yellow);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1080px;margin:0 auto;padding:1rem 1.25rem}
.site-header{background:var(--blue-dark);position:sticky;top:0;z-index:10;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.nav .brand{font-weight:700;color:var(--yellow);letter-spacing:.5px}
.nav-links a{margin-left:1rem;color:var(--white)}
.nav-links a:hover{color:var(--yellow)}

.home-hero{text-align:center;padding:3rem 0 2rem}
.logo-hero{max-width:220px;width:60%;height:auto;margin:0 auto 1rem;display:block}
.welcome{font-size:clamp(1.4rem,2.5vw,2.2rem);margin:.5rem 0 1rem}
.contact p{margin:.25rem 0}
.cta{margin-top:1.25rem;display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}

.btn{
  background:var(--yellow);color:#111;padding:.7rem 1rem;border-radius:.75rem;
  display:inline-block;font-weight:600;border:0;cursor:pointer
}
.btn:hover{filter:brightness(.95)}
.btn-outline{
  background:transparent;border:2px solid var(--yellow);color:var(--yellow)
}

.site-footer{padding:1.25rem;text-align:center;color:#f1f5f9;opacity:.9}

h1{margin:0 0 1rem;font-size:clamp(1.3rem,2.4vw,2rem)}
h2{margin:1.25rem 0 .5rem}
h3{margin:.75rem 0 .25rem}

.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.menu-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:1rem;padding:1rem}
.menu-item{display:flex;justify-content:space-between;margin:.25rem 0}
.menu-item .price{color:var(--yellow);margin-left:.5rem;white-space:nowrap}

.booking-form label{display:flex;flex-direction:column;gap:.35rem;font-weight:600}
.booking-form input, .booking-form select{
  padding:.6rem .7rem;border-radius:.6rem;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);color:var(--white)
}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.9rem;margin-top:1rem}
.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:1rem;padding:1rem}

@media (max-width:640px){
  .grid-2{grid-template-columns:1fr}
}

.hero-photo{
  width:100%;
  max-width:860px;
  height:auto;
  display:block;
  margin:1rem auto 0;
  border-radius:1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.15);
}

/* Slideshow */
.slideshow{
  position:relative;
  max-width:1080px;
  margin: 0.75rem auto 0;
  overflow:hidden;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.slideshow .slides{
  display:flex;
  transition:transform .6s ease;
}
.slideshow img{
  width:100%;
  height:350px; /* tối đa 350px */
  object-fit:cover;
  flex: 0 0 100%;
  display:block;
}
.slideshow .nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.35);
  border:0;
  color:#fff;
  padding:.3rem .6rem;
  border-radius:.5rem;
  cursor:pointer;
}
.slideshow .nav:hover{background:rgba(0,0,0,.5)}
.slideshow .prev{left:.5rem}
.slideshow .next{right:.5rem}
.slideshow .dots{
  position:absolute;
  bottom:.5rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:.35rem;
}
.slideshow .dots button{
  width:.55rem;height:.55rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.85);background:transparent;cursor:pointer
}
.slideshow .dots button.active{background:rgba(255,255,255,.9)}
@media (max-width:640px){
  .slideshow img{height:280px}
}
.site-header {
  background: #004466;   /* màu bạn có */
  padding: 10px 20px;
}

.nav {
  display: flex;
  justify-content: center;   /* căn giữa ngang */
  align-items: center;       /* căn giữa dọc */
  gap: 20px;                 /* khoảng cách giữa brand và nav-links */
}

.nav-links {
  display: flex;
  gap: 15px;  /* khoảng cách giữa các link */
}
/* Social links in footer */
.site-footer .social{
  display:flex;justify-content:center;gap:.85rem;margin-bottom:.4rem;flex-wrap:wrap
}
.icon{
  width:26px;height:26px;display:inline-block;vertical-align:middle
}
.icon svg{width:100%;height:100%}
.site-footer .social a{display:inline-flex;align-items:center;gap:.35rem;color:var(--white);opacity:.95}
.site-footer .social a:hover{color:var(--yellow)}
/* ==== THỰC ĐƠN DION – TABS ==== */
.dion-menu-tabs {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 16px 40px;
}

.dion-menu-header {
  text-align: center;
  margin-bottom: 24px;
}

.dion-menu-header h2 {
  font-size: 26px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dion-menu-header p {
  font-size: 14px;
  color: #555;
}

/* Tabs */
.dion-menu-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 12px;
  margin-bottom: 24px;
}

.dion-menu-tabs-nav button {
  border: none;
  background: #f5f5f5;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  transition: background 0.2s, color 0.2s;
}

.dion-menu-tabs-nav button:hover {
  background: #e0e0e0;
}

.dion-menu-tabs-nav button.active {
  background: #007b7f; /* bạn có thể chỉnh theo màu thương hiệu */
  color: #fff;
}

/* Panels */
.dion-tab-panel {
  display: none;
}

.dion-tab-panel.active {
  display: block;
}

/* Nhóm menu */
.dion-menu-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px dashed #ddd;
}

.dion-menu-group:last-child {
  border-bottom: none;
}

.dion-menu-group-text h3 {
  font-size: 18px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.dion-menu-group-text ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}

.dion-menu-group-text li {
  font-size: 14px;
  margin-bottom: 3px;
}

/* Hình minh hoạ */
.dion-menu-group-image img {
  max-width: 260px;
  width: 100%;
  border-radius: 12px;
  display: block;
}

/* Desktop layout */
@media (min-width: 768px) {
  .dion-menu-group {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .dion-menu-group-text {
    flex: 1.4;
    padding-right: 24px;
  }

  .dion-menu-group-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
}