/*
 * The mobile layer of the public pages (root decision 0023). Linked only when UI_MOBILE is on
 * (apps/web/src/lib/ui-flags.ts), and every rule sits under the phone breakpoint below, so desktop rendering is the
 * live site's even with the flag on. Rule 1 (decision 0005) still holds with the flag off: the file is not linked.
 * Findings and per-template status: docs/2026-10-27-mobile-layer.md.
 */
@media (max-width: 767px) {
  /* ---- Page frame: nothing wider than the screen ---- */
  html,
  body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  img,
  video,
  iframe,
  embed,
  object {
    max-width: 100% !important;
    height: auto;
  }
  iframe {
    height: revert-layer;
  }
  .container,
  .container-fluid {
    display: block;
    width: 100% !important;
    max-width: 100%;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ---- Grid: Bootstrap stacks col-md below 992px, but live's flex rows and push/pull offsets undo that ---- */
  .row {
    margin-left: -6px;
    margin-right: -6px;
    flex-wrap: wrap;
  }
  .row > [class*='col-sm-'],
  .row > [class*='col-md-'],
  .row > [class*='col-lg-'] {
    float: none;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    left: auto;
    right: auto;
    margin-left: 0;
    padding-left: 6px;
    padding-right: 6px;
  }
  [class*='col-md-push-'],
  [class*='col-md-pull-'],
  [class*='col-lg-push-'],
  [class*='col-lg-pull-'],
  [class*='col-md-offset-'] {
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
  }

  /* ---- Breadcrumb: one wrapping line instead of squeezed columns ---- */
  .breadcrumb {
    display: block !important;
    font-size: 13px;
    line-height: 1.6;
    padding: 6px 0;
  }
  .breadcrumb > li {
    display: inline;
    white-space: normal;
  }

  /* ---- Type: readable sizes, long words and URLs break ---- */
  body {
    font-size: 15px;
    line-height: 1.55;
    overflow-wrap: break-word;
    word-break: normal;
  }
  h1 {
    font-size: 26px;
    line-height: 1.25;
  }
  h2 {
    font-size: 22px;
    line-height: 1.3;
  }
  h3 {
    font-size: 18px;
    line-height: 1.35;
  }

  /* ---- Tables: scroll sideways inside their own box, never the page ---- */
  table {
    max-width: 100%;
  }
  .table-responsive,
  .mobile-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Forms: full width, 16px so iOS does not zoom on focus, finger-size controls ---- */
  input[type='text'],
  input[type='search'],
  input[type='email'],
  input[type='password'],
  input[type='tel'],
  input[type='number'],
  select,
  textarea,
  .form-control {
    font-size: 16px !important;
    max-width: 100%;
  }
  .btn {
    min-height: 36px;
  }
  .form-inline .form-group,
  .form-inline .form-control {
    display: block;
    width: 100%;
  }

  /* ---- Pagination: wraps and is tappable ---- */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .pagination > li > a,
  .pagination > li > span {
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
  }

  /* ---- Modals fit the screen ---- */
  .modal-dialog {
    width: auto !important;
    max-width: calc(100vw - 20px);
    margin: 10px auto;
  }

  /* ---- Tailwind help and policy pages (/trang/*, /trung-tam-tro-giup): the 280px sidebar squeezed the text
     column to 15px; stack the text first and the sidebar under it ---- */
  main > .flex.mx-auto:has(> aside) {
    flex-direction: column;
  }
  main > .flex.mx-auto:has(> aside) > main {
    order: 1;
    width: 100%;
  }
  main > .flex.mx-auto > aside {
    order: 2;
    width: 100% !important;
    position: static !important;
    height: auto !important;
    max-height: none;
    border-right: 0 !important;
    border-top: 1px solid #e2e8f0;
  }
  .px-10 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .px-6 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  nav.flex.items-center {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .text-4xl,
  .text-5xl {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }

  /* ---- Header (Bootstrap pages): logo left at a readable size, menu button right, compact top bar ---- */
  .top-bar {
    padding: 6px 0;
    font-size: 12px;
  }
  .top-bar .row > [class*='col-md-'] {
    text-align: center;
  }
  .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .navbar-header::before,
  .navbar-header::after {
    display: none;
  }
  .navbar .navbar-brand {
    width: auto !important;
    height: auto;
    padding: 8px 0;
    margin-left: 0 !important;
  }
  .navbar .navbar-brand img {
    height: 44px !important;
    width: auto !important;
    max-width: none !important;
  }
  .navbar-toggle {
    order: 2;
    margin: 0 !important;
    padding: 10px 12px;
  }
  .navbar-toggle .icon-bar {
    width: 24px;
  }

  /* ---- Header (Tailwind pages): the contact bar on one or two short lines instead of three tall ones ---- */
  .bg-top-info {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .bg-top-info .flex.flex-col {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 14px !important;
    font-size: 12px;
  }

  /* ---- Floated search boxes beside headings and tabs: own full-width line ---- */
  .list-inline > li.pull-right,
  .pull-right.mnseach,
  .pull-right:has(> form input),
  .pull-right:has(> input) {
    float: none !important;
    display: flex !important;
    width: 100% !important;
    margin: 8px 0 !important;
    padding: 0 !important;
  }
  .list-inline > li.pull-right > input,
  .pull-right.mnseach form,
  .pull-right:has(> form input) form {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
  }
  .list-inline > li.pull-right .form-control,
  .pull-right.mnseach .form-control {
    flex: 1 1 auto;
    width: 100% !important;
    float: none;
  }
  #search_list > li {
    display: inline-block;
  }
  .pull-right.mnseach form > button,
  .pull-right.mnseach form > .btn,
  .list-inline > li.pull-right > button,
  .list-inline > li.pull-right > .input-group-btn {
    float: none !important;
    margin: 0 0 0 -1px !important;
    flex: 0 0 auto;
  }

  /* ---- Blog category lists (JNews markup): side margins, full-width images under the title ---- */
  .jeg_inner_content {
    padding-left: 14px;
    padding-right: 14px;
  }
  .jeg_post .jeg_thumb {
    float: none !important;
    width: 100% !important;
    margin: 8px 0 12px !important;
  }
  .jeg_post .jeg_thumb .thumbnail-container {
    width: 100% !important;
  }
  .jeg_post .jeg_thumb img {
    width: 100% !important;
  }
  .jeg_post_title {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  /* ---- Tailwind article hub (/bai-viet/*): one column, the featured story stacked ---- */
  .hub-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .art-featured {
    flex-direction: column;
    width: 100%;
  }
  .art-featured > * {
    width: 100% !important;
    max-width: 100%;
  }

  /* ---- Tailwind heroes with an avatar and a name (/tac-gia/*): the name gets its own line ---- */
  .flex.items-center:has(> .flex-1.min-w-0) {
    flex-wrap: wrap;
  }
  .flex.items-center > .flex-1.min-w-0 {
    flex-basis: 55%;
    min-width: 55% !important;
  }

  /* ---- Wide tables (plans and prices, judgment lists): scroll inside their box ---- */
  table.table,
  .table-bordered {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.table th,
  table.table td {
    min-width: 96px;
  }

  /* ---- Contract list hover card: stays on screen ---- */
  .more-infor-hdmau {
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    width: auto !important;
    max-width: calc(100vw - 24px);
  }

  /* ---- Horizontal forms (fee and tax calculators): the -15px group margins ran past the screen edge ---- */
  .form-horizontal .form-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ---- Lawyer directory filters (province, bar association lists): a scrolling box, so results are reachable ---- */
  .ps_collapse {
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #e5e5e5;
  }

  /* ---- Home hero and closing call to action: "Bắt đầu miễn phí" and "Xem bảng giá" wrapped onto two lines with
     no gap and different widths (214 and 168 px, touching; read 2026-10-27). Stacked, equal width, 12 px apart. ---- */
  .btn-hero { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 280px; height: 50px; padding: 0 16px !important; margin: 0 auto !important; box-sizing: border-box; }
  .btn-hero + .btn-hero { margin-top: 12px !important; }

  /* ---- Spacing scan, 2026-10-27 (tools/parity/spacing-scan.mjs; findings in tmp/mobile/scan2/). Controls that
     touched each other or ran past the screen at 375 px. ---- */
  /* Search filters (/tim-kiem/*, /tim-kiem-ban-an): the filter columns stacked with 0 px between fields, and the
     selects kept their desktop width (135 px in a 361 px column). Full width, 8 px apart. */
  .tk_row [class*="col-md-"], .tk_row .col-custom { margin-bottom: 8px; }
  .tk_row .form-control, .tk_row .ps_form_control { width: 100% !important; max-width: 100%; box-sizing: border-box; }
  /* Article tabs (/bai-viet): a scrolling row of tabs with 0 px between them. */
  .tab-row { gap: 8px; padding-bottom: 4px; }
  /* Collection sort selects (/tuyen-tap-van-ban-phap-luat): 4 px apart. */
  .form_at_sb select + select { margin-left: 8px; }
  .form_at_sb select { margin-bottom: 6px; }
  /* Article reading modes (/bai-viet/{slug}): 2 px apart. */
  .mode-btn + .mode-btn { margin-left: 6px; }
  /* "Tìm kiếm văn bản khác" on the document page: the field and its button overlapped by 1 px. */
  .mnseach form { gap: 8px; }
  /* Author newsletter box (/bai-viet/tac-gia/*): the email field and button sat in a 402 px row inside 311 px, so the
     field started 14 px off screen. Stacked, full width. */
  .important-thing { flex-direction: column; }
  .important-thing__form { flex-wrap: wrap; width: 100%; gap: 8px; }
  .important-thing__form .form-group { flex: 1 1 100%; margin: 0; }
  .important-thing__form .btn { width: 100%; }
  /* Author page sort select (/tac-gia/*): a no-shrink select pushed 79 px past the edge; the row may wrap. */
  section.card > div.flex.items-center.mb-4 { flex-wrap: wrap; }
}