/* ==== Tổng thể & cỡ chữ ==== */
html {
  font-size: 20px; /* Desktop mặc định */
}
@media (max-width: 767.98px) and (orientation: portrait) {
  html {
    font-size: 17px; /* Mobile dọc: chữ vừa */
  }

}
@media (max-width: 767.98px) and (orientation: landscape) {
  html {
    font-size: 12px; /* Mobile ngang: chữ nhỏ hơn để vừa bố cục */
  }
}
body {
  background-color: #f8f9fa;
  line-height: 1.5;
}

/* ===== Theme overrides & modern UI ===== */
:root {
  --bg: #F8FAFC;
  --fg: #0F172A;
  --brand: #2563EB;
  --muted: #6B7280;
  --card: #FFFFFF;
  --radius: 14px;
}

/* ==== Màu chủ đạo cho ô câu nói ==== */
:root {
  --option-bg: #e9f3ff;
  --option-border: #5aa5ff;
  --option-text: #083b72;
  --option-hover-bg: #d8ecff;
  --option-active-bg: #cde6ff;
  --option-shadow: rgba(32, 119, 255, 0.25);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, -apple-system, 'Roboto', 'Segoe UI', Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Navbar */
.site-header {
  background: transparent;
  padding: 6px 0; /* reduced for an even slimmer navbar */
}
.site-header .navbar-brand { font-weight:800; font-size:1.02rem; color:var(--fg); }
.site-header img { border-radius:10px; }

/* Hero card */
.hero-card {
  background: var(--card);
  border-radius: var(--radius);
}

/* Small adjustments for header on mobile */
@media (max-width: 767.98px) {
  .site-header .navbar-brand img { width:28px; height:28px; margin-right:8px; }
  .hero h1 { font-size: 1.75rem; }
}

/* Feature buttons */
.feature-btn {
  background: transparent;
  border-radius: 12px;
  padding: 12px;
  align-items:flex-start;
  display:flex;
  gap:12px;
  border:1px solid rgba(15,23,42,0.04);
  min-width: 220px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.feature-btn:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(15,23,42,0.06); text-decoration:none; }

/* Primary action */
.btn-primary {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: .55rem .9rem !important;
  font-weight:700;
}
.btn-primary:hover { filter:brightness(.98); }

/* Secondary muted button */
.btn-outline-secondary {
  background: transparent !important;
  border-radius: 12px !important;
  border:1px solid rgba(15,23,42,0.06) !important;
  color:var(--fg) !important;
}

/* Card elevation */
.card {
  border-radius: var(--radius);
  border: none;
  background: var(--card);
  box-shadow: 0 8px 24px rgba(2,6,23,0.04);
}

/* Footer */
footer { color: var(--muted); font-size: .95rem; }

/* ==== Layout tổng ==== */
.main-layout {
  min-height: calc(100vh - 120px);
}
@media (max-width: 767.98px) and (orientation: landscape) {
  .main-layout {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .left-panel,
  .middle-panel,
  .right-panel {
    flex: 1 1 0;
    max-width: 100%;
  }
  .card-header strong {
    font-size: 0.3rem;
  }
}

/* ==== Video wrapper (merged tweaks from styles2.css) ==== */
.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  overflow: hidden;
  border-radius: 0.75rem;
}
#video,
#output_canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==== Ô câu nói ==== */
.options {
  padding-top: 4px;
  padding-bottom: 4px;
}
.option {
  display: block;
  font-weight: 600;
  color: var(--option-text);
  background: var(--option-bg);
  border: 2px solid var(--option-border);
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 1.125rem;
  transition: background-color 0.15s ease,
              box-shadow 0.15s ease,
              border-color 0.15s ease,
              transform 0.08s ease;
  margin-bottom: 12px;
}
.option:hover {
  background-color: var(--option-hover-bg);
  border-color: var(--option-border);
  box-shadow: 0 4px 10px var(--option-shadow);
  transform: translateY(-1px);
}
.option.holder,
.option:focus {
  background-color: var(--option-active-bg);
  border-color: var(--option-border);
  box-shadow: 0 0 0 0.28rem var(--option-shadow);
  outline: none;
}
@media (max-width: 767.98px) {
  .option {
    padding: 18px 20px;
    font-size: 1.25rem; /* chữ to hơn để dễ đọc */
    border-radius: 18px;
    margin-bottom: 14px;
  }
}

/* Ensure suggestion elements that also have .option match the option visuals */
.suggestion.option {
  display: block;
  font-weight: 600;
  color: var(--option-text);
  background: var(--option-bg);
  border: 2px solid var(--option-border);
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 1.125rem;
  transition: background-color 0.15s ease,
              box-shadow 0.15s ease,
              border-color 0.15s ease,
              transform 0.08s ease;
  margin-bottom: 12px;
}

/* Keep hover and holder consistency (suggestion.holder already styled but ensure priority) */
.suggestion.option:hover {
  background-color: var(--option-hover-bg);
  border-color: var(--option-border);
  box-shadow: 0 4px 10px var(--option-shadow);
  transform: translateY(-1px);
}
.suggestion.option.holder,
.suggestion.option.selected {
  background-color: var(--option-active-bg) !important;
  border-color: var(--option-border) !important;
  box-shadow: 0 0 0 0.28rem var(--option-shadow) !important;
  outline: none;
}

/* ==== Tiêu đề & phần thông tin ==== */
.card-header strong {
  font-size: 1rem;
}
.info-section p {
  font-size: 1.05rem; /* align with other card text */
}
#blink_time,
#recognition_status,
#selection_status,
#mode_feature {
  font-weight: 700;
  font-size: 1rem; /* reduce from larger size to match overall UI scale */
}

/* ===== Trạng thái bật/tắt - ON xanh, OFF đỏ ===== */
#recognition_status,
#selection_status {
  color: #dc3545; /* đỏ mặc định (OFF) */
}

#recognition_status_box.on #recognition_status,
#selection_status_box.on #selection_status {
  color: #198754 !important; /* xanh khi ON */
}

#recognition_status_box:not(.on) #recognition_status,
#selection_status_box:not(.on) #selection_status {
  color: #dc3545; /* đỏ khi OFF */
}

/* ==== Danh sách cuộn ==== */
.middle-panel .list-container {
  scroll-behavior: smooth;
  padding-right: 4px;
}
@media (min-width: 768px),
       (max-width: 767.98px) and (orientation: landscape) {
  .middle-panel .list-container {
    max-height: calc(100vh - 220px);
    overflow: auto;
  }
}

/* ==== Sticky panel trái ==== */
@media (min-width: 768px),
       (max-width: 767.98px) and (orientation: landscape) {
  .left-panel .panel-mobile-fixed {
    position: sticky;
    top: 12px;
    height: calc(100vh - 140px); /* ✅ trải dài toàn bộ chiều cao */
    overflow-y: auto;            /* ✅ cuộn riêng nếu nội dung dài */
  }
  .info-section p {
    font-size: 0.6rem;
  }
}

/* ==== Panel phải: hướng dẫn ==== */
.right-panel .card-body ul {
  padding-left: 1.2rem;
}
.right-panel .card-body li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
.right-panel .card-body p {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
@media (max-width: 767.98px) and (orientation: landscape) {
  .right-panel .card {
    max-height: calc(100vh - 140px);
    overflow: auto;
  }
}

/* ==== Mobile: cố định panel trái khi dọc ==== */
@media (max-width: 767.98px) and (orientation: portrait) {
  :root {
    --mobile-panel-height: 280px; /* giảm từ 320px xuống 280px */
  }
  /* Panel trái: webcam + info - thu nhỏ hơn */
  .left-panel .panel-mobile-fixed {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    padding: 4px 6px; /* giảm từ 6px 8px */
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    height: var(--mobile-panel-height);
    overflow-y: auto;
    font-size: 0.75rem; /* giảm từ 0.8rem */
  }

  /* Video wrapper nhỏ hơn trên mobile */
  .left-panel .video-wrapper {
    aspect-ratio: 4 / 3;
    max-height: 150px; /* giảm từ 180px */
  }

  /* Card header nhỏ hơn */
  .left-panel .card-header {
    padding: 4px 6px !important; /* giảm padding */
  }

  /* Các thẻ trong info-section nhỏ lại */
  .info-section p,
  .info-section span {
    font-size: 0.95rem; /* giảm từ 0.85rem */
  }
  .card-header strong {
    font-size: 0.85rem; /* giảm từ 0.75rem */
  }

  /* Card trong info-section gọn hơn */
  .info-section .card {
    margin-bottom: 4px; /* giảm từ 6px */
  }
  .info-section .card-body {
    padding: 4px 6px !important; /* giảm từ 6px 8px */
  }

  /* Nút trong info-section nhỏ hơn */
  .info-section .btn {
    font-size: 0.9rem;
    padding: 4px 8px;
  }

  /* Middle panel: xóa padding top, mở rộng nội dung */
  .middle-panel {
    padding-top: 0px; /* bỏ +8px */
  }

  .middle-panel .list-container {
    max-height: calc(100vh - var(--mobile-panel-height) - 40px); /* giảm từ 60px xuống 40px */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Option: chữ to hơn để dễ đọc */
  .option {
    padding: 20px 22px;
    font-size: 1.5rem;
    border-radius: 20px;
    margin-bottom: 16px;
  }

  /* Trạng thái status gọn hơn */
  #recognition_status,
  #selection_status {
    font-size: 0.75rem;
    padding: 2px 6px;
  }

  /* Nút Bắt Đầu nhỏ hơn */
  #startBtn {
    font-size: 0.9rem !important;
    padding: 4px 8px !important;
  }
}

/* ==== Make keyboard keys and suggestions use option-style highlight ==== */
.key.holder,
.key.selected,
.suggestion.holder,
.suggestion.selected {
  background-color: var(--option-active-bg) !important;
  border-color: var(--option-border) !important;
  color: var(--option-text) !important;
  box-shadow: 0 0 0 0.28rem var(--option-shadow) !important;
  outline: none;
}
.suggestion {
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid transparent;
  margin-bottom: 8px;
  background: #fff;
  color: #083b72;
}
.suggestion:hover { background:#d8ecff; border-color:#5aa5ff; }
.suggestion.holder,
.suggestion.selected {
  background: #cde6ff !important;
  border-color:#5aa5ff !important;
  box-shadow: 0 0 0 .28rem rgba(32,119,255,0.18) !important;
  color: #083b72 !important;
}

/* Navbar layout: flush logo left / user area right within the page container */
nav.navbar {
	/* allow full width bar but content centered by inner container */
	width: 100%;
	background: transparent;
}
nav .container-hero {
	/* make the inner container a flex row that spaces items to the edges */
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1100px; /* keep hero/content width */
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

/* Ensure left logo block and right user block layout */
nav .logo-wrap,
nav .navbar-brand,
nav .brand-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Generic header user area used across pages */
#headerUserArea,
#headerUserAreaChoose,
#headerUserAreaEdit,
#headerUsernameType,
#headerAuthBtnType,
.header-user,
.header-user-area {
	display: flex;
	align-items: center;
	gap: 10px;
	/* keep it at the right edge of the inner container by flex spacing */
}

/* Tighter visual for auth button */
nav .btn {
	border-radius: 10px;
	padding: .45rem .7rem;
}

/* Small responsive tweak: reduce horizontal padding on very small screens */
@media (max-width: 420px) {
	nav .container-hero { padding-left: 12px; padding-right: 12px; }
}

/* Auth page specific (mobile-first, modern rounded controls) */
:root{
  --auth-bg: #F8FAFC;
  --auth-fg: #0F172A;
  --auth-brand: #2563EB;
  --auth-muted: #6B7280;
  --auth-card: #FFFFFF;
  --auth-radius: 14px;
}

/* Rounded inputs and prominent buttons used across auth forms */
.auth-forms .form-control {
  border-radius: 12px;
  padding: .75rem .9rem;
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow: none;
  background: #fff;
}
.auth-forms .form-label { color: var(--auth-muted); font-weight:600; font-size:.9rem; }
.btn-primary-auth {
  background: var(--auth-brand) !important;
  border-color: var(--auth-brand) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: .68rem 1rem !important;
  font-weight:700;
  box-shadow: 0 10px 30px rgba(37,99,235,0.10);
}
.btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(15,23,42,0.06) !important;
  color: var(--auth-fg) !important;
  border-radius: 12px !important;
  padding: .6rem .9rem !important;
}

/* Small responsive adjustments */
@media (max-width: 575.98px) {
  .auth-card { border-radius: 12px; }
  .auth-aside { display:none; } /* keep single-column on tiny screens */
  .auth-forms { padding:20px; }
}

/* ==== Edit page improvements (Apple/Tailwind-like) ==== */
.edit-page { padding-top: 22px; padding-bottom: 34px; }
.edit-card { border-radius: 14px; overflow: visible; background: var(--card); }
.edit-card h2 { font-size: 1.5rem; margin:0; color:var(--fg); font-weight:800; }
.edit-card p { color:var(--muted); margin:0; }

.edit-input {
  border-radius: 12px 0 0 12px;
  border: 1px solid rgba(15,23,42,0.06);
  font-size: 1rem;
  padding: .8rem .9rem;
}
.btn-add {
  border-radius: 0 12px 12px 0;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: .65rem 1rem;
  font-weight:700;
  box-shadow: 0 8px 22px rgba(37,99,235,0.12);
}
.btn-add:hover { filter: brightness(.98); }

/* Phrase list: each item as soft card */
.phrase-list { display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.phrase-list .list-group-item {
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border: 1px solid rgba(15,23,42,0.04);
  box-shadow: 0 6px 18px rgba(2,6,23,0.04);
}
.phrase-list .phrase-text { font-weight:600; color:var(--fg); margin-right:12px; }
.phrase-list .btn-group .btn { border-radius:10px; padding: .38rem .6rem; }

/* Small helper when list empty */
.phrase-list:empty::before {
  content: "Chưa có câu nào. Thêm câu mới ở bên trên.";
  display:block;
  color:var(--muted);
  padding:18px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(15,23,42,0.01), transparent);
  text-align:center;
}

/* Responsive: stack controls on small screens */
@media (max-width: 576px) {
  .edit-card .d-flex.flex-md-row { flex-direction:column; gap:12px; }
  .edit-input { border-radius: 12px; margin-bottom:8px; }
  .btn-add { border-radius: 12px; width: 100%; }
  .phrase-list .list-group-item { flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ==== Button style for keyboard keys (from styles2.css) ==== */
.btn-option {
  background: linear-gradient(180deg,#e9f3ff,#d8ecff);
  border: 2px solid #5aa5ff;
  color: #083b72;
  font-weight:700;
  border-radius:12px;
  padding: .55rem .3rem;
  font-size:1.05rem;
  box-shadow: 0 4px 10px rgba(32,119,255,0.08);
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.btn-option:active { transform: translateY(1px); }
.btn-option:hover, .btn-option:focus {
  background: linear-gradient(180deg,#d8ecff,#cfe7ff);
  box-shadow: 0 8px 20px rgba(32,119,255,0.12);
  outline:none;
}

/* Keyboard selection / highlight (merged) */
.key.holder, .key:focus {
  background: linear-gradient(180deg,#cde6ff,#b7ddff) !important;
  box-shadow: 0 0 0 .28rem rgba(32,119,255,0.18) !important;
  border-color: #5aa5ff !important;
}
.key.selected {
  background: linear-gradient(180deg, #cde6ff, #b7ddff);
  border-color: #5aa5ff;
  box-shadow: 0 0 0 0.3rem rgba(32, 119, 255, 0.25);
  transform: scale(1.05);
  z-index: 1;
}

/* Larger touch targets on mobile (merged) */
@media (max-width:767.98px) {
  .btn-option { padding: .9rem .5rem; font-size:1.2rem; border-radius:14px; }
  .keyboard-container .row > [class*="col-"] { display:flex; align-items:center; }
}

/* Spacing between keys (from styles2.css) */
.keyboard-container .row > .col,
.keyboard-container .row > .col-1,
.keyboard-container .row > .col-2,
.keyboard-container .row > .col-6 {
  padding-left:4px;
  padding-right:4px;
  margin-bottom:8px;
}

/* Add: shared content container spacing (mobile-first, larger on desktop) */
.container-hero {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media (min-width: 768px) {
  .container-hero {
    padding-top: 36px; /* slightly smaller than before but still roomy on desktop */
    padding-bottom: 36px;
  }
}

/* Homepage: slightly reduce gap between navbar and hero */
.home-compact .container-hero {
  padding-top: 10px;  /* smaller gap on Home */
  padding-bottom: 20px;
}
@media (min-width: 768px) {
  .home-compact .container-hero {
    padding-top: 24px; /* slightly reduced on desktop */
    padding-bottom: 32px;
  }
}

/* Increase type scale in the info/status section for better readability */
.info-section p {
  font-size: 1.05rem; /* align with other card text */
}
#blink_time,
#recognition_status,
#selection_status,
#mode_feature {
  font-weight: 700;
  font-size: 1rem; /* reduce from larger size to match overall UI scale */
}

/* Small responsive tweak: ensure tiny screens remain legible */
@media (max-width: 420px) {
  .info-section p { font-size: 1.02rem; }
  #blink_time,
  #recognition_status,
  #selection_status,
  #mode_feature { font-size: 0.98rem; }
}

/* ===== Tab di chuyển ===== */
.tab-move-bar {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: #ffffff; /* background trắng */
  border: none;
  border-radius: 12px; /* thêm border-radius nhẹ */
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* shadow nhẹ */
  position: sticky;
  top: 0;
  z-index: 10;
  justify-content: center; /* căn giữa các nút */
}

.tab-btn {
  flex: 0 0 auto; /* không giãn, chỉ vừa nội dung */
  min-width: 80px; /* chiều rộng tối thiểu */
  padding: 10px 14px;
  background: linear-gradient(180deg, #e9f3ff, #d8ecff);
  border: 2px solid #5aa5ff !important;
  color: #083b72 !important;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
  text-align: center;
}

.tab-btn:hover {
  background: linear-gradient(180deg, #d8ecff, #cfe7ff);
  box-shadow: 0 4px 12px rgba(91, 165, 255, 0.14);
  transform: translateY(-1px);
}

.tab-btn.selected,
.tab-btn.holder {
  background: linear-gradient(180deg, #cde6ff, #b7ddff) !important;
  border-color: #5aa5ff !important;
  box-shadow: 0 0 0 .24rem rgba(32, 119, 255, 0.22) !important;
  transform: scale(1.03);
}

/* Toggle button visual */
#tabMoveToggle.on {
  background: #e6f7ff !important;
  border-color: #5aa5ff !important;
  color: #083b72 !important;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .tab-move-bar {
    padding: 8px 10px;
    margin-bottom: 14px;
    gap: 10px;
  }

  .tab-btn {
    min-width: 85px;
    padding: 12px 12px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
  }
}