/* === Legacy css.css merged into modern-style.css === */
/* CSS Document */
.t{
	font-size: 14px;
	line-height: normal;
	font-family: "arial";
	color: #610417;
	padding:5px
}
.pt{
	font-size: 12px;
	line-height: normal;
	font-family: "arial";
	color: #9B0028;
	padding:5px
}
.pt1{
	font-size: 16px;
	line-height: normal;
	font-family: "arial";
	color: #9B0028;
	padding:5px
}
.t1{
	font-size: 12px;
	line-height: 20px;
	font-family: "arial";
	color: #ffffff;
}
.t2{
	font-size: 12px;
	line-height: normal;
	font-family: "arial";
	color: #3B010D;
	padding:5px
}
.tt{
	font-size: 24px;
	line-height: normal;
	font-family: "arial";
	color: #ffffff;
	padding:5px
}
.tp1{
	font-size: 12px;
	line-height: 20px;
	font-family: "arial";
	color: #FFFFFF;
	padding:5px
}
.ns {
	FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: underline
}
.ns:link {
	FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: underline
}
.ns:visited {
	FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: none
}
.ns:active {
	FONT-SIZE: 12px; COLOR: #2f2f2f; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: underline
}
.ns:hover {
	FONT-SIZE: 12px; COLOR: #2f2f2f; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: underline
}
.tp {
	FONT-SIZE: 12px; COLOR: #FFFFFF; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: underline
}
.tp:link {
	FONT-SIZE: 12px; COLOR: #FFFFFF; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: none
}
.tp:visited {
	FONT-SIZE: 12px; COLOR: #FFFFFF; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: none
}
.tp:active {
	FONT-SIZE: 12px; COLOR: #FFFFFF; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: none
}
.tp:hover {
	FONT-SIZE: 12px; COLOR: #CCCCCC; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: none
}
.ns2 {
	FONT-SIZE: 14px; COLOR: #000000; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: underline
}
.ns2:link {
	FONT-SIZE: 14px; COLOR: #000000; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: underline
}
.ns2:visited {
	FONT-SIZE: 14px; COLOR: #000000; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: none
}
.ns2:active {
	FONT-SIZE: 14px; COLOR: #2f2f2f; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: underline
}
.ns2:hover {
	FONT-SIZE: 14px; COLOR: #2f2f2f; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: underline
}

.lm {
	FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: underline
}
.lm:link {
	FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: underline
}
.lm:visited {
	FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: none
}
.lm:active {
	FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: underline
}
.lm:hover {
	FONT-SIZE: 12px; COLOR: #CC0000; LINE-HEIGHT: normal; font-family: Arial, sans-serif; TEXT-DECORATION: underline
}

/* Replace legacy red text accents throughout every English HTML page.
   Keep the burgundy page backgrounds unchanged.  !important is intentional:
   many city index files contain an older inline .STYLE1 red declaration. */
.t,
.pt,
.pt1,
.t2,
.STYLE1,
.STYLE3 {
  color: #20c766 !important;
}
.lm:hover {
  color: #20c766 !important;
}

/* About page: keep the legacy See Also heading from inheriting distorted
   table-cell geometry. */
.see-also-heading .pt1 p {
  margin: 1em 0;
  white-space: nowrap;
}

/* === Responsive and compatibility overrides === */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  color: #333 !important;
  background: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  line-height: 1.6;
  overflow-x: hidden;
}
.codex-modern-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(31, 3, 0, .96);
  border-bottom: 1px solid #6f4b43;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.codex-modern-nav .brand,
.codex-modern-nav a {
  color: #fff !important;
  font-weight: 600;
  text-decoration: none !important;
}
.codex-modern-nav .brand { font-size: 20px; font-weight: 700; white-space: nowrap; }
.codex-modern-nav .links { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.codex-modern-nav a:hover, .codex-modern-nav a:focus { color: #9be09b !important; }
body > table {
  width: min(100%, 1237px) !important;
  max-width: 1237px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}
table { max-width: 100% !important; }
img { max-width: 100%; height: auto; }
input, textarea, select, button { max-width: 100%; font: inherit; }
a { overflow-wrap: anywhere; }
/* Unstyled legacy links otherwise use the browser's default blue.  Explicit
   text classes (including the green accent classes above) keep their colour. */
a:link:not([class]),
a:visited:not([class]) {
  color: #000;
}

/* Light English-page colour scheme: replace the legacy burgundy surfaces
   with white and their white text with black.  Green accent text remains
   governed by the accent rules above. */
body,
body > table:not(.desktop-site),
[bgcolor="#1F0300" i],
[bgcolor="1F0300" i],
[bgcolor="#000000" i],
[bgcolor="000000" i],
[bgcolor="#000" i],
[bgcolor="black" i] {
  background-color: #fff !important;
}
.codex-modern-nav {
  background: rgba(255, 255, 255, .98) !important;
  border-bottom-color: #d7d7d7;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.codex-modern-nav .brand,
.codex-modern-nav a,
.t1,
.tt,
.tp1,
.tp,
.tp:link,
.tp:visited,
.tp:active,
.STYLE2 {
  color: #000 !important;
}
.codex-modern-nav a:hover,
.codex-modern-nav a:focus,
.tp:hover {
  color: #087f3d !important;
}
.footer-number-pair {
  display: inline-grid;
  grid-template-columns: max-content max-content;
  gap: 2px 8px;
  margin: 6px auto;
  text-align: left;
  vertical-align: middle;
}
.footer-number-pair .footer-number-label { text-align: right; }
.footer-number-pair .footer-number-value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 960px) {
  .codex-modern-nav {
    width: 100%;
    max-width: 100%;
    min-height: 50px;
    padding: 8px 12px;
    gap: 8px 12px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .codex-modern-nav .brand {
    width: 100%;
    font-size: 17px;
  }
  .codex-modern-nav .links {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    gap: 8px 12px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .codex-modern-nav .links a { font-size: 13px; }
  .codex-modern-nav .desktop-only { display: none; }
  body > table,
  body > center > table,
  table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
  .en-root-page > table,
  .en-root-page > table > tbody,
  .en-root-page > table > tbody > tr {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }
  .en-root-page > table > tbody > tr > td[colspan="3"] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }
  .en-root-page > table > tbody > tr:nth-child(3) > td,
  .en-root-page > table > tbody > tr:nth-child(3) > td > table,
  .en-root-page > table > tbody > tr:nth-child(3) > td > table > tbody,
  .en-root-page > table > tbody > tr:nth-child(3) > td > table > tbody > tr {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Only remove the desktop side rail and gutters in the main layout row.
     These widths also occur in content/footer tables, so global selectors
     make real mobile content disappear. */
  .en-root-page > table > tbody > tr:nth-child(3) > td > table > tbody > tr > td[width="138"],
  .en-root-page > table > tbody > tr:nth-child(3) > td > table > tbody > tr > td[width="33"],
  .en-root-page > table > tbody > tr:nth-child(3) > td > table > tbody > tr > td[width="29"],
  .en-root-page > table > tbody > tr:nth-child(3) > td > table > tbody > tr > td[width="242"][valign="top"],
  .en-root-page > table > tbody > tr:nth-child(3) > td > table > tbody > tr > td:last-child:not([valign]) {
    display: none !important;
  }

  .en-root-page td[width="750"][valign="top"],
  .en-root-page td[width="765"][valign="top"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px !important;
  }

  /* City and model pages use the same legacy shell but many of them predate
     the en-root-page body class.  Apply the shell collapse by structure too,
     otherwise the 138/242/33px desktop rails consume the entire phone width
     and leave lower sections such as See Also at zero width. */
  body > table:not(.desktop-site) > tbody,
  body > table:not(.desktop-site) > tbody > tr,
  body > table:not(.desktop-site) > tbody > tr:nth-child(3) > td,
  body > table:not(.desktop-site) > tbody > tr:nth-child(3) > td > table,
  body > table:not(.desktop-site) > tbody > tr:nth-child(3) > td > table > tbody,
  body > table:not(.desktop-site) > tbody > tr:nth-child(3) > td > table > tbody > tr {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }
  body > table:not(.desktop-site) > tbody > tr:nth-child(3) > td > table > tbody > tr > td[width="138"],
  body > table:not(.desktop-site) > tbody > tr:nth-child(3) > td > table > tbody > tr > td[width="33"],
  body > table:not(.desktop-site) > tbody > tr:nth-child(3) > td > table > tbody > tr > td[width="29"],
  body > table:not(.desktop-site) > tbody > tr:nth-child(3) > td > table > tbody > tr > td[width="242"][valign="top"],
  body > table:not(.desktop-site) > tbody > tr:nth-child(3) > td > table > tbody > tr > td:last-child:not([valign]) {
    display: none !important;
  }
  body > table:not(.desktop-site) td[width="750"][valign="top"],
  body > table:not(.desktop-site) td[width="765"][valign="top"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 10px !important;
    overflow: hidden;
  }

  /* Remove the remaining fixed-width geometry from every legacy city/model
     page.  Width attributes in these nested tables were authored for a
     1237px desktop canvas and otherwise make phone layouts wider than the
     viewport even when the overflow is visually clipped. */
  body > table:not(.desktop-site),
  body > table:not(.desktop-site) table,
  body > table:not(.desktop-site) tbody,
  body > table:not(.desktop-site) tr {
    max-width: 100% !important;
  }
  body > table:not(.desktop-site) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }
  body > table:not(.desktop-site) table {
    width: 100% !important;
    table-layout: auto !important;
  }
  body > table:not(.desktop-site) td,
  body > table:not(.desktop-site) th {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body > table:not(.desktop-site) img,
  body > table:not(.desktop-site) input,
  body > table:not(.desktop-site) textarea,
  body > table:not(.desktop-site) select {
    max-width: 100% !important;
  }
  body > table:not(.desktop-site) p,
  body > table:not(.desktop-site) a,
  body > table:not(.desktop-site) span,
  body > table:not(.desktop-site) strong {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Girl detail pages: their 98% profile table contains an extra blank first
     column plus colspan=3 content.  In automatic table layout that malformed
     desktop markup resolves to about 750px and pushes all useful content off
     the right edge. */
  table[width="98%"]:has(table[width="70%"] img[src^="girls/pic"]),
  table[width="98%"]:has(table[width="70%"] img[src^="girls/pic"]) > tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
  table[width="98%"]:has(table[width="70%"] img[src^="girls/pic"]) {
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  table[width="98%"]:has(table[width="70%"] img[src^="girls/pic"]) > tbody > tr:has(> td:nth-child(2)[colspan="3"]:last-child) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  table[width="98%"]:has(table[width="70%"] img[src^="girls/pic"]) > tbody > tr:has(> td:nth-child(2)[colspan="3"]:last-child) > td:first-child {
    display: none !important;
  }
  table[width="98%"]:has(table[width="70%"] img[src^="girls/pic"]) > tbody > tr:has(> td:nth-child(2)[colspan="3"]:last-child) > td:nth-child(2) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 4px 0 !important;
  }
  table[width="98%"]:has(table[width="70%"] img[src^="girls/pic"]) > tbody > tr:has(> td[rowspan]) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100% !important;
    height: auto !important;
    align-items: center;
  }
  table[width="98%"]:has(table[width="70%"] img[src^="girls/pic"]) > tbody > tr:has(> td[rowspan]) > td[rowspan] {
    display: none !important;
  }
  table[width="98%"]:has(table[width="70%"] img[src^="girls/pic"]) > tbody > tr:has(> td[rowspan]) > td:not([rowspan]) {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 4px !important;
    text-align: center;
  }
  table[width="98%"]:has(table[width="70%"] img[src^="girls/pic"]) table[width="70%"],
  table[width="98%"]:has(table[width="70%"] img[src^="girls/pic"]) table[width="70%"] > tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  table[width="98%"]:has(table[width="70%"] img[src^="girls/pic"]) table[width="70%"] > tbody > tr {
    display: grid !important;
    grid-template-columns: minmax(105px, 42%) minmax(0, 1fr);
    width: 100% !important;
    gap: 0 10px;
    align-items: start;
  }
  table[width="98%"]:has(table[width="70%"] img[src^="girls/pic"]) table[width="70%"] > tbody > tr > td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }
  table[width="98%"]:has(table[width="70%"] img[src^="girls/pic"]) table[width="70%"] > tbody > tr > td:first-child {
    grid-column: 1 / -1;
    margin: 0 auto 12px;
    text-align: center;
  }
  col, colgroup, tr, th, td {
    max-width: 100% !important;
  }
  th, td {
    min-width: 0 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  img, iframe, object, embed, video {
    max-width: 100% !important;
    height: auto !important;
  }
  pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
  }
  p { overflow-wrap: anywhere; }

  /* Keep native table rows so image/data-table heights remain in normal flow.
     Only the desktop two-column enquiry row needs to stack on phones. */
  .en-root-page td[width="750"][valign="top"] > table > tbody > tr:has(> td:nth-child(2):last-child):not(:has(> td[colspan])),
  .en-root-page td[width="765"][valign="top"] > table > tbody > tr:has(> td:nth-child(2):last-child):not(:has(> td[colspan])) {
    display: block;
    width: 100%;
    height: auto !important;
  }
  .en-root-page td[width="750"][valign="top"] > table > tbody > tr:has(> td:nth-child(2):last-child):not(:has(> td[colspan])) > td,
  .en-root-page td[width="765"][valign="top"] > table > tbody > tr:has(> td:nth-child(2):last-child):not(:has(> td[colspan])) > td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 5px;
  }

  /* Keep nested data and gallery tables intact, while allowing them to fit. */
  .en-root-page td[width="750"][valign="top"] table,
  .en-root-page td[width="765"][valign="top"] table {
    table-layout: fixed !important;
  }

  /* Dense desktop link directories become two readable item pairs per row. */
  .en-root-page table:has(> tbody > tr > td > span > a[href*="beijing/index.html"]),
  .en-root-page table:has(> tbody > tr > td > span > a[href*="adult_escort.html"]) {
    display: block;
  }
  .en-root-page table:has(> tbody > tr > td > span > a[href*="beijing/index.html"]) > tbody,
  .en-root-page table:has(> tbody > tr > td > span > a[href*="adult_escort.html"]) > tbody {
    display: block;
  }
  .en-root-page table:has(> tbody > tr > td > span > a[href*="beijing/index.html"]) > tbody > tr,
  .en-root-page table:has(> tbody > tr > td > span > a[href*="adult_escort.html"]) > tbody > tr {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 22px minmax(0, 1fr);
    width: 100%;
  }
  .en-root-page table:has(> tbody > tr > td > span > a[href*="beijing/index.html"]) > tbody > tr > td,
  .en-root-page table:has(> tbody > tr > td > span > a[href*="adult_escort.html"]) > tbody > tr > td {
    display: block;
    width: auto !important;
    padding: 4px 2px;
  }
  .en-root-page table:has(> tbody > tr > td > span > a[href*="beijing/index.html"]) > tbody > tr > td[colspan],
  .en-root-page table:has(> tbody > tr > td > span > a[href*="adult_escort.html"]) > tbody > tr > td[colspan] {
    grid-column: 1 / -1;
  }
  .en-root-page td[width="750"][valign="top"] img[align="right"],
  .en-root-page td[width="765"][valign="top"] img[align="right"] {
    float: none;
    display: block;
    margin: 10px auto;
  }
  .en-root-page form input:not([type="hidden"]):not([type="submit"]),
  .en-root-page form textarea,
  .en-root-page form select {
    width: 100%;
    max-width: 100%;
  }
  .en-root-page form input[type="submit"] {
    min-height: 42px;
    padding: 8px 20px;
  }

  /* The enquiry area is a legacy two-column table.  On narrow screens the
     percentage columns squeeze the labels down to one or two characters per
     line.  Key this override to the form itself so it also covers city/model
     pages which do not carry the en-root-page body class. */
  tr:has(> td > form[name="form1"]) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  tr:has(> td > form[name="form1"]) > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 8px 12px !important;
  }
  tr:has(> td > form[name="form1"]) > td:has(> form[name="form1"]),
  tr:has(> td > form[name="form1"]) > td:has(> form[name="form1"]) > form[name="form1"] {
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;
  }
  form[name="form1"],
  form[name="form1"] > table,
  form[name="form1"] > table > tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  form[name="form1"] > table > tbody > tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 10px;
  }
  form[name="form1"] > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 2px 0 !important;
    text-align: left !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  form[name="form1"] > table > tbody > tr > td div[align="right"] {
    text-align: left !important;
  }
  form[name="form1"] input:not([type="hidden"]):not([type="submit"]):not([type="button"]),
  form[name="form1"] textarea,
  form[name="form1"] select {
    display: inline-block;
    width: min(100%, 360px) !important;
    max-width: 100% !important;
  }
  form[name="form1"] textarea {
    min-height: 132px;
    resize: vertical;
  }
  form[name="form1"] input[type="submit"],
  form[name="form1"] input[type="button"] {
    width: auto !important;
    min-height: 42px;
    margin: 4px;
    padding: 8px 20px;
  }

  /* Stable, explicit layout for the About page's See Also block. */
  .see-also-row {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  .see-also-row > td:first-child {
    display: none !important;
  }
  .see-also-row > td:last-child {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 4px 0 !important;
  }
  .see-also-links,
  .see-also-links > tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .see-also-links > tbody > tr:first-child {
    display: none !important;
  }
  .see-also-links > tbody > tr:not(:first-child) {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 4px 8px;
    align-items: center;
  }
  .see-also-links > tbody > tr:not(:first-child) > td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 4px 0 !important;
    text-align: left !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* "See Also" is authored as a blank spacer cell followed by an invalid
     colspan and a six-column desktop link table.  Turn the three icon/link
     pairs into three full-width rows on phones so the labels cannot collapse
     into narrow vertical text. */
  tr:has(> td > table > tbody > tr > td:nth-child(6)):has(> td > table > tbody > tr > td a[href*="faqs.html"]):has(> td > table > tbody > tr > td a[href*="service.html"]) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  tr:has(> td > table > tbody > tr > td:nth-child(6)):has(> td > table > tbody > tr > td a[href*="faqs.html"]):has(> td > table > tbody > tr > td a[href*="service.html"]) > td:first-child {
    display: none !important;
  }
  tr:has(> td > table > tbody > tr > td:nth-child(6)):has(> td > table > tbody > tr > td a[href*="faqs.html"]):has(> td > table > tbody > tr > td a[href*="service.html"]) > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 4px 0 !important;
  }
  table:has(> tbody > tr > td:nth-child(6)):has(> tbody > tr > td a[href*="faqs.html"]):has(> tbody > tr > td a[href*="service.html"]),
  table:has(> tbody > tr > td:nth-child(6)):has(> tbody > tr > td a[href*="faqs.html"]):has(> tbody > tr > td a[href*="service.html"]) > tbody {
    display: block !important;
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;
  }
  table:has(> tbody > tr > td:nth-child(6)):has(> tbody > tr > td a[href*="faqs.html"]):has(> tbody > tr > td a[href*="service.html"]) > tbody > tr:first-child {
    display: none !important;
  }
  table:has(> tbody > tr > td:nth-child(6)):has(> tbody > tr > td a[href*="faqs.html"]):has(> tbody > tr > td a[href*="service.html"]) > tbody > tr:not(:first-child) {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    width: 100% !important;
    height: auto !important;
    gap: 4px 8px;
    align-items: center;
  }
  table:has(> tbody > tr > td:nth-child(6)):has(> tbody > tr > td a[href*="faqs.html"]):has(> tbody > tr > td a[href*="service.html"]) > tbody > tr:not(:first-child) > td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 4px 0 !important;
    text-align: left !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  table:has(> tbody > tr > td:nth-child(6)):has(> tbody > tr > td a[href*="faqs.html"]):has(> tbody > tr > td a[href*="service.html"]) > tbody > tr:not(:first-child) > td img {
    display: block;
    width: 17px !important;
    height: 25px !important;
  }

  /* The generic legacy fix above also detects the preceding heading row.
     Restore its native table geometry so "See Also" keeps its full width. */
  .en-root-page tr.see-also-heading {
    display: table-row !important;
    width: auto !important;
  }
  .en-root-page tr.see-also-heading > td:first-child {
    display: table-cell !important;
    width: 3% !important;
  }
  .en-root-page tr.see-also-heading > td:last-child {
    display: table-cell !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Galleries city directory: flatten the old five icon/name pairs per row
     into one consistent two-column link grid.  Section headings span both
     columns and long city names wrap inside their own cell. */
  table:has(> tbody > tr > td:nth-child(10)):has(> tbody > tr > td a[href="beijing/index.html"]):has(> tbody > tr > td a[href="changsha/index.html"]) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
  table:has(> tbody > tr > td:nth-child(10)):has(> tbody > tr > td a[href="beijing/index.html"]):has(> tbody > tr > td a[href="changsha/index.html"]) > tbody {
    display: flex !important;
    flex-wrap: wrap;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px 10px;
  }
  table:has(> tbody > tr > td:nth-child(10)):has(> tbody > tr > td a[href="beijing/index.html"]):has(> tbody > tr > td a[href="changsha/index.html"]) > tbody > tr {
    display: contents !important;
  }
  table:has(> tbody > tr > td:nth-child(10)):has(> tbody > tr > td a[href="beijing/index.html"]):has(> tbody > tr > td a[href="changsha/index.html"]) > tbody > tr > td {
    display: flex !important;
    flex: 0 0 calc(50% - 5px);
    width: calc(50% - 5px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px;
    height: auto !important;
    padding: 7px 8px !important;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    overflow: hidden;
  }
  table:has(> tbody > tr > td:nth-child(10)):has(> tbody > tr > td a[href="beijing/index.html"]):has(> tbody > tr > td a[href="changsha/index.html"]) > tbody > tr > td:has(> img[src*="index_22_1.jpg"]) {
    display: none !important;
  }
  table:has(> tbody > tr > td:nth-child(10)):has(> tbody > tr > td a[href="beijing/index.html"]):has(> tbody > tr > td a[href="changsha/index.html"]) > tbody > tr > td[colspan] {
    display: block !important;
    flex: 0 0 100%;
    width: 100% !important;
    min-height: 0;
    padding: 12px 4px 6px !important;
    text-align: left !important;
  }
  table:has(> tbody > tr > td:nth-child(10)):has(> tbody > tr > td a[href="beijing/index.html"]):has(> tbody > tr > td a[href="changsha/index.html"]) a {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    text-align: center;
  }

  /* The legacy footer is a three-column row with fixed spacer cells. */
  .en-root-page > table > tbody > tr:nth-last-of-type(2) > td:first-child,
  .en-root-page > table > tbody > tr:nth-last-of-type(2) > td:last-child,
  .en-root-page > table > tbody > tr:last-child > td:first-child,
  .en-root-page > table > tbody > tr:last-child > td:last-child {
    display: none !important;
  }
  .en-root-page > table > tbody > tr:nth-last-of-type(2) > td:nth-child(2),
  .en-root-page > table > tbody > tr:last-child > td:nth-child(2) {
    display: block !important;
    width: 100% !important;
    padding: 8px 12px;
  }

  /* All legacy English pages finish with a links row and a copyright row.
     Give those rows their own background and remove the fixed spacer cells;
     otherwise the body's white background and old 50/80px cell heights create
     a tall blank footer on iOS. */
  body > table:not(.desktop-site) > tbody > tr:nth-last-child(-n + 2) {
    background: #fff !important;
    height: auto !important;
  }
  body > table:not(.desktop-site) > tbody > tr:nth-last-child(-n + 2) > td:first-child,
  body > table:not(.desktop-site) > tbody > tr:nth-last-child(-n + 2) > td:last-child {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
  }
  body > table:not(.desktop-site) > tbody > tr:nth-last-child(-n + 2) > td:nth-child(2) {
    display: table-cell !important;
    width: 100% !important;
    height: auto !important;
    padding: 10px 14px !important;
    color: #000 !important;
    text-align: center;
  }
}
@media (max-width: 430px) {
  .codex-modern-nav .links { gap: 8px 14px; }
  .codex-modern-nav .links a { font-size: 12px; }
}

/* EN home page: keep the three legacy service columns associated and stack
   them as complete cards on narrow phones.  The old row-based table otherwise
   collapses the first description to a few pixels, rendering one character
   per line and making the document thousands of pixels taller. */
@media (max-width: 1000px) {
  .en-home-page .home-service-showcase,
  .en-home-page .home-service-showcase > tbody {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(9, auto);
    gap: 0;
  }
  .en-home-page .home-service-showcase > tbody > tr {
    display: contents !important;
  }
  .en-home-page .home-service-showcase > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 8px !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .en-home-page .home-service-showcase > tbody > tr:nth-child(1) > td:nth-child(1) { grid-row: 1; }
  .en-home-page .home-service-showcase > tbody > tr:nth-child(2) > td:nth-child(1) { grid-row: 2; }
  .en-home-page .home-service-showcase > tbody > tr:nth-child(3) > td:nth-child(1) { grid-row: 3; padding-bottom: 18px !important; }
  .en-home-page .home-service-showcase > tbody > tr:nth-child(1) > td:nth-child(2) { grid-row: 4; }
  .en-home-page .home-service-showcase > tbody > tr:nth-child(2) > td:nth-child(2) { grid-row: 5; }
  .en-home-page .home-service-showcase > tbody > tr:nth-child(3) > td:nth-child(2) { grid-row: 6; padding-bottom: 18px !important; }
  .en-home-page .home-service-showcase > tbody > tr:nth-child(1) > td:nth-child(3) { grid-row: 7; }
  .en-home-page .home-service-showcase > tbody > tr:nth-child(2) > td:nth-child(3) { grid-row: 8; }
  .en-home-page .home-service-showcase > tbody > tr:nth-child(3) > td:nth-child(3) { grid-row: 9; padding-bottom: 10px !important; }
  .en-home-page .home-service-showcase table,
  .en-home-page .home-service-showcase table > tbody,
  .en-home-page .home-service-showcase table > tbody > tr,
  .en-home-page .home-service-showcase table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }
  .en-home-page .home-service-showcase img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto;
  }
  .en-home-page .home-contact-row {
    display: grid !important;
    width: calc(100vw - 35px) !important;
    max-width: calc(100vw - 35px) !important;
    grid-template-columns: minmax(0, 1fr);
  }
  .en-home-page .home-contact-row > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 8px 12px !important;
  }
  .en-home-page .home-contact-row > td > table,
  .en-home-page .home-contact-row > td > table > tbody,
  .en-home-page .home-contact-row > td > table > tbody > tr {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }
  .en-home-page .home-contact-row > td:nth-child(2) > table > tbody > tr {
    display: block !important;
  }
  .en-home-page .home-contact-row > td:nth-child(2) > table > tbody > tr > td:first-child:not([colspan]) {
    display: none !important;
  }
  .en-home-page .home-contact-row > td:nth-child(2) > table > tbody > tr > td:nth-child(2),
  .en-home-page .home-contact-row > td:nth-child(2) > table > tbody > tr > td[colspan] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }
}

/* Asian city/model pages share a deeply nested legacy table shell.  Automatic
   table layout lets the three-card gallery's intrinsic width enlarge its
   ancestors, which shifts the useful column to the right and creates a very
   tall apparent blank area on phones.  Keep every nested table inside the
   main column constrained to the available width. */
@media (max-width: 960px) {
  .asian-page > table:not(.desktop-site),
  .asian-page > table:not(.desktop-site) > tbody,
  .asian-page > table:not(.desktop-site) > tbody > tr,
  .asian-page > table:not(.desktop-site) > tbody > tr:nth-child(3) > td,
  .asian-page > table:not(.desktop-site) > tbody > tr:nth-child(3) > td > table,
  .asian-page > table:not(.desktop-site) > tbody > tr:nth-child(3) > td > table > tbody,
  .asian-page > table:not(.desktop-site) > tbody > tr:nth-child(3) > td > table > tbody > tr {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .asian-page > table:not(.desktop-site) > tbody > tr:nth-child(3) > td > table > tbody > tr > td[width="138"],
  .asian-page > table:not(.desktop-site) > tbody > tr:nth-child(3) > td > table > tbody > tr > td[width="33"],
  .asian-page > table:not(.desktop-site) > tbody > tr:nth-child(3) > td > table > tbody > tr > td[width="29"],
  .asian-page > table:not(.desktop-site) > tbody > tr:nth-child(3) > td > table > tbody > tr > td[width="242"][valign="top"],
  .asian-page > table:not(.desktop-site) > tbody > tr:nth-child(3) > td > table > tbody > tr > td:last-child:not([valign]) {
    display: none !important;
  }
  .asian-page td[width="750"][valign="top"],
  .asian-page td[width="765"][valign="top"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    overflow: hidden;
  }
  .asian-page td[width="750"][valign="top"] table,
  .asian-page td[width="765"][valign="top"] table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }
  .asian-page td[width="750"][valign="top"] td,
  .asian-page td[width="765"][valign="top"] td {
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .asian-page td[width="750"][valign="top"] img[src^="girls/pic"],
  .asian-page td[width="765"][valign="top"] img[src^="girls/pic"] {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto;
  }
  .asian-page td[width="750"][valign="top"] > table > tbody > tr[height],
  .asian-page td[width="765"][valign="top"] > table > tbody > tr[height] {
    height: auto !important;
  }
  .asian-page td[width="750"][valign="top"] > table > tbody > tr > td:empty,
  .asian-page td[width="765"][valign="top"] > table > tbody > tr > td:empty {
    height: 0 !important;
  }
  .asian-page tr:has(> td > form[name="form1"]),
  .asian-page tr:has(> td > form[name="form1"]) > td {
    width: calc(100vw - 35px) !important;
    max-width: calc(100vw - 35px) !important;
  }
  .asian-page > table:not(.desktop-site) > tbody > tr:nth-last-child(-n + 2) > td:first-child,
  .asian-page > table:not(.desktop-site) > tbody > tr:nth-last-child(-n + 2) > td:last-child {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
  }
  .asian-page > table:not(.desktop-site) > tbody > tr:nth-last-child(-n + 2) > td:nth-child(2),
  .asian-page > table:not(.desktop-site) > tbody > tr:nth-last-child(-n + 2) > td:nth-child(2) table {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 10px 14px !important;
    text-align: center;
  }
}

/* Service directory: replace the legacy icon/text table geometry with an
   even, wrapping grid.  Rows become transparent to the grid and only cells
   containing real service links are shown. */
.service-list-grid {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
}
.service-list-grid > tbody {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.service-list-grid > tbody > tr {
  display: contents !important;
}
.service-list-grid > tbody > tr > td {
  display: none !important;
}
.service-list-grid > tbody > tr > td:has(a[href^="service/"]) {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 48px;
  height: auto !important;
  padding: 8px 10px !important;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  background: #fff;
}
.service-list-grid a[href^="service/"] {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  color: #000 !important;
  line-height: 1.35 !important;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.service-list-grid a[href^="service/"]::before {
  content: "›";
  color: #20c766;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.service-list-grid a[href^="service/"]:hover,
.service-list-grid a[href^="service/"]:focus {
  color: #087f3d !important;
}
@media (max-width: 900px) {
  .service-list-grid > tbody {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .service-list-grid > tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .service-list-grid > tbody > tr > td:has(a[href^="service/"]) {
    min-height: 54px;
    padding: 8px !important;
  }
}
@media (max-width: 340px) {
  .service-list-grid > tbody {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Contact-page QR codes. */
.contact-code-cell {
  padding: 8px 12px 24px !important;
  text-align: center;
}
.contact-code {
  width: min(100%, 436px);
  margin: 0 auto;
}
.contact-code img {
  display: block;
  width: 100%;
  max-width: 436px !important;
  height: auto !important;
  margin: 0 auto;
  border: 0;
}
.contact-code figcaption {
  margin-top: 8px;
  color: #000;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

/* EN homepage city links: discard the old icon/text column geometry and
   distribute the actual city links evenly across the available width. */
.home-city-grid {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
}
.home-city-grid > tbody {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.home-city-grid > tbody > tr {
  display: contents !important;
}
.home-city-grid > tbody > tr > td {
  display: none !important;
}
.home-city-grid > tbody > tr > td:has(a) {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 46px;
  height: auto !important;
  padding: 8px 10px !important;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  background: #fff;
  text-align: center !important;
}
.home-city-grid a {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  color: #000 !important;
  line-height: 1.35 !important;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.home-city-grid a::before {
  content: "›";
  color: #20c766;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.home-city-grid a:hover,
.home-city-grid a:focus {
  color: #087f3d !important;
}
@media (max-width: 560px) {
  .home-city-grid > tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}
@media (max-width: 340px) {
  .home-city-grid > tbody {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .contact-code-cell {
    padding: 8px 0 20px !important;
  }
  .contact-code {
    width: 100%;
  }
}