/*
 * 多語系版面修正（2026-11-07，Toyo 要求：所有語言網頁不要有切圖、跑版、按鈕無法使用）。
 *
 * 只有翻譯版（www-vn／www-id／www-en／www-ja）會載入這支（include/meta.php）；中文版完全不受影響。
 * 原因：翻譯文字比中文長（英文、越南語、印尼語常常是 2～4 倍；日語單字長、不容易換行），中文版寫死的寬度、固定高度、nowrap 在翻譯版會爆開。
 * 選擇器一律用 html:not([lang^="zh"])（所有翻譯版）或 html[lang="xx"]（個別語言），這樣權重比原本的規則高，不必用 !important。
 * 這些數字都是用 tools/i18n/ui-audit.mjs 與 32 位檢查員在 320～1920 寬度實測出來的；改的時候請重跑 ui-audit 與 backend-node/test/ui/www-i18n.test.ts。
 */

/* ============================================================================================ 頂端導覽（桌機 >1024px） */
/* 文字不換行（原本英文、越南語、印尼語的項目會折成兩行、下拉箭頭掉到第二行），並依螢幕寬度縮小字級與內距，放得進 logo 與語言鈕之間 */
html:not([lang^="zh"]) .menu_list>ul>li>a { white-space: nowrap; }
html:not([lang^="zh"]) .menu_list>ul>li.menu_has_sub>a::after { margin-left: 5px; }

/* 越南語、印尼語（標籤最長） */
@media (min-width: 1025px) and (max-width: 1800px) {
  html[lang="vi"] .menu_list>ul>li>a,
  html[lang="id"] .menu_list>ul>li>a { font-size: 18px; padding: 5px 10px; }
  html[lang="vi"] .menu_list>ul,
  html[lang="id"] .menu_list>ul { gap: 0; }
}
@media (min-width: 1025px) and (max-width: 1450px) {
  html[lang="vi"] .menu_list>ul>li>a,
  html[lang="id"] .menu_list>ul>li>a { font-size: 16px; padding: 5px 8px; }
}
@media (min-width: 1025px) and (max-width: 1180px) {
  html[lang="vi"] .menu_list>ul>li>a,
  html[lang="id"] .menu_list>ul>li>a { font-size: 14px; padding: 5px 4px; }
}
@media (min-width: 1025px) and (max-width: 1100px) {
  html[lang="vi"] .menu_list>ul>li>a,
  html[lang="id"] .menu_list>ul>li>a { font-size: 14px; padding: 5px 3px; }
  html[lang="vi"] .menu_list,
  html[lang="id"] .menu_list { gap: 10px; }
}
/* 英文、日語 */
@media (min-width: 1025px) and (max-width: 1450px) {
  html[lang="en"] .menu_list>ul>li>a,
  html[lang="ja"] .menu_list>ul>li>a { font-size: 18px; padding: 5px 10px; }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  html[lang="en"] .menu_list>ul>li>a,
  html[lang="ja"] .menu_list>ul>li>a { font-size: 16px; padding: 5px 8px; }
}
@media (min-width: 1025px) and (max-width: 1100px) {
  html[lang="en"] .menu_list>ul>li>a,
  html[lang="ja"] .menu_list>ul>li>a { font-size: 15px; padding: 5px 5px; }
}

/* ============================================================================================ 首頁橫幅（>1024px 是 100vh 固定高度＋overflow:hidden） */
/* 翻譯文字太長時，原本會把「查看服務」主按鈕整顆切掉：改成高度可以長高，文字區塊跟著排在橫幅裡面 */
@media (min-width: 1025px) {
  html:not([lang^="zh"]) .i_box1 { height: auto; min-height: 100vh; padding-bottom: 60px; }
  html:not([lang^="zh"]) .i_box1 .info { position: relative; top: auto; left: auto; margin: 25vh 0 0 5%; }
}
/* 越南語、印尼語的段落特別長：字級縮小一點，讓大部分常見螢幕在第一屏就看得到按鈕 */
@media (min-width: 1025px) {
  html[lang="vi"] .i_box1 .info h3, html[lang="id"] .i_box1 .info h3 { font-size: 40px; letter-spacing: 1px; }
  html[lang="vi"] .i_box1 .info p, html[lang="id"] .i_box1 .info p { font-size: 16px; line-height: 28px; letter-spacing: .5px; margin-bottom: 24px; }
  html[lang="vi"] .i_box1 .info .top_title h5, html[lang="id"] .i_box1 .info .top_title h5 { font-size: 18px; }
}
@media (min-width: 1025px) and (max-width: 1350px) {
  html[lang="vi"] .i_box1 .info h3, html[lang="id"] .i_box1 .info h3 { font-size: 34px; }
  html[lang="vi"] .i_box1 .info p, html[lang="id"] .i_box1 .info p { font-size: 15px; line-height: 26px; }
}

/* ============================================================================================ 頁尾 */
/* 訂閱鈕：原本固定 100px、外層 overflow:hidden，「Berlangganan」「Đăng ký nhận tin」最後的字被切掉 */
html:not([lang^="zh"]) .footer_info .newsletter button { flex: 0 0 auto; width: auto; min-width: 100px; padding: 15px 14px; white-space: nowrap; font-family: inherit; }
html:not([lang^="zh"]) .footer_info .newsletter input:not(.newsletter_hp) { flex: 1 1 auto; width: auto; min-width: 0; }

/* 「我要申訴」膠囊：固定高 35px，英文折成兩行、字貼邊 */
html:not([lang^="zh"]) .footer_info .icon { flex-wrap: wrap; }
html:not([lang^="zh"]) .footer_info .icon a.text,
html:not([lang^="zh"]) .menu_fix .info_box .icon a.text { height: auto; min-height: 35px; padding-top: 6px; padding-bottom: 6px; white-space: nowrap; flex-shrink: 0; }
html:not([lang^="zh"]) .footer_info .icon a.text p,
html:not([lang^="zh"]) .menu_fix .info_box .icon a.text p { white-space: nowrap; }
html:not([lang^="zh"]) .menu_fix .info_box .icon { flex-wrap: wrap; }

/* 頁尾兩張大按鈕：標題文字不要壓到右下角的裝飾圖示（翻譯文字比中文長，會換行並疊到圖示上） */
html:not([lang^="zh"]) .footer_btn .btn_box a .btn_title,
html:not([lang^="zh"]) .menu_fix .info_box .btn_box a .btn_title { position: relative; z-index: 1; max-width: calc(100% - 85px); }

/* 訪客人次那行最後只剩一個字（「orang」「người」）的孤字 */
html:not([lang^="zh"]) .footer_list .visit p,
html:not([lang^="zh"]) .footer_info .visit p { text-wrap: balance; }

/* ============================================================================================ 全螢幕選單「04 服務項目」兩欄 */
/* 長項目（Case Management Unit (A-Unit)）會貼到右欄的項目符號 */
html:not([lang^="zh"]) .menu_box_list>li.two ul { column-gap: 28px; }
html:not([lang^="zh"]) .menu_box_list>li.two ul li { width: calc(50% - 14px); }

/* ============================================================================================ 卡片上的標籤（單位名稱、「重要」） */
html:not([lang^="zh"]) .i_news_ul li a .info > div { flex-wrap: wrap; row-gap: 6px; }
html:not([lang^="zh"]) .i_news_ul li a .info h5 { padding: 5px 12px; font-size: 14px; line-height: 1.4; border-radius: 16px; }
html:not([lang^="zh"]) .news_list li .info > div,
html:not([lang^="zh"]) .i_book_ul li a .info > div { justify-content: flex-start; gap: 8px; }
html:not([lang^="zh"]) .news_list li .info > div h6,
html:not([lang^="zh"]) .i_book_ul li a .info > div h5 { flex: 0 0 100%; margin-top: 2px; }
html:not([lang^="zh"]) .news_list li .info > div span,
html:not([lang^="zh"]) .i_book_ul li a .info > div span { max-width: 100%; overflow-wrap: anywhere; padding: 6px 12px; line-height: 1.35; }

/* ============================================================================================ 內頁：標題旁的日期與單位標籤、底部兩顆按鈕 */
html:not([lang^="zh"]) .news_d_page .title_box .date,
html:not([lang^="zh"]) .class_d_b1 .title_box .date { flex-wrap: wrap; gap: 8px 16px; }
html:not([lang^="zh"]) .news_d_page .title_box .date h6,
html:not([lang^="zh"]) .class_d_b1 .title_box .date h6 { white-space: nowrap; }
@media (max-width: 768px) {
  html:not([lang^="zh"]) .news_d_page .info_box .btn { flex-wrap: wrap; }
  html:not([lang^="zh"]) .news_d_page .info_box .btn a { flex: 1 1 140px; min-width: 0; justify-content: center; padding: 14px 16px; gap: 8px; }
}
html:not([lang^="zh"]) .class_top_info .btn { width: auto; min-width: 180px; flex-shrink: 0; }
html:not([lang^="zh"]) .class_top_info .btn a.all_btn01 { white-space: nowrap; }

/* ============================================================================================ 服務頁標題列（花絮月份選單、「最新公告」箭頭） */
/* 月份下拉＋上一月／下一月箭頭在手機會被擠出畫面：允許換行 */
@media (max-width: 768px) {
  html:not([lang^="zh"]) .album_title { flex-wrap: wrap; gap: 8px 10px; }
  html:not([lang^="zh"]) .album_title h3 { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  html:not([lang^="zh"]) .album_title h3 select { max-width: 100%; min-width: 0; font-size: 14px !important; padding: 5px 10px !important; text-overflow: ellipsis; }
  html:not([lang^="zh"]) .album_title .owl_nav_box { margin-left: auto; }
}
@media (max-width: 480px) {
  html:not([lang^="zh"]) .album_title { padding: 10px 14px 10px 36px; }
  html:not([lang^="zh"]) .album_title h3 { font-size: 18px; }
}

/* ============================================================================================ 首頁、關於、服務總覽 */
@media (max-width: 450px) {
  html:not([lang^="zh"]) .i_service_list li a { padding-left: 14px; padding-right: 14px; }
  html:not([lang^="zh"]) .i_service_list li .info h3 { font-size: 18px; overflow-wrap: anywhere; }
  html:not([lang^="zh"]) .i_service_list li .info p { overflow-wrap: anywhere; }
  html:not([lang^="zh"]) .all_titlebox_01 h3 { font-size: 24px; }
  html:not([lang^="zh"]) .i_box3 .top_title { flex-wrap: wrap; gap: 15px 20px; }
  html:not([lang^="zh"]) .about_value_b3_list li h3 { font-size: 16px; padding: 5px 6px; }
}
html:not([lang^="zh"]) .about_value_b3_list li h3 { overflow-wrap: anywhere; }
html:not([lang^="zh"]) .all_tab.about ul li a { height: 100%; align-items: center; }
html:not([lang^="zh"]) .about_value_b1_ul li p { line-height: 1.7; }

/* ============================================================================================ 會員頁 */
/* 訂單表格第 4 欄的「查看明細」按鈕（寫死 90px，英文、越南語、印尼語、日語都放不下） */
@media (min-width: 769px) {
  html:not([lang^="zh"]) .member_order_title li:nth-child(4),
  html:not([lang^="zh"]) .member_order_info li:nth-child(4) { width: 130px; }
  html:not([lang^="zh"]) .member_order_title li:nth-child(2),
  html:not([lang^="zh"]) .member_order_info li:nth-child(2) { width: calc(100% - 370px); }
  html:not([lang^="zh"]) .member_order_info li a.btn { display: inline-block; white-space: nowrap; padding: 10px 14px; }
}
/* 「返回」鈕寫死 100px，英文、越南語、印尼語放不下 */
html:not([lang^="zh"]) .member_class_d_box .back_btn { width: fit-content; min-width: 100px; margin: 0 auto; }
html:not([lang^="zh"]) .member_class_d_box .back_btn a { white-space: nowrap; }

/* ============================================================================================ 登入、加入會員、訂閱 */
@media (max-width: 480px) {
  html:not([lang^="zh"]) .login_code { display: flex; gap: 8px; align-items: center; }
  html:not([lang^="zh"]) .login_code .input_box01 { flex: 1 1 auto; width: auto; min-width: 0; }
  html:not([lang^="zh"]) .login_code .login_code_div { flex: 0 0 100px; width: 100px; }
}
html:not([lang^="zh"]) .login_box p a,
html:not([lang^="zh"]) .join_btn p a,
html:not([lang^="zh"]) .member_agree a { white-space: nowrap; }
html:not([lang^="zh"]) .sub_box .sub_email { overflow-wrap: anywhere; word-break: break-all; }

/* ============================================================================================ 表單 */
html:not([lang^="zh"]) .input_box01,
html:not([lang^="zh"]) .select_box01,
html:not([lang^="zh"]) textarea { font-family: inherit; }
html:not([lang^="zh"]) .gender_box { flex-wrap: wrap; }
html:not([lang^="zh"]) .gender_box label { white-space: nowrap; }

/* ============================================================================================ 日語字型 */
/* 日語漢字要用日文字形（Noto Sans JP；include/meta.php 只在日語版載入），不要用繁中字形的 Noto Sans TC */
html[lang="ja"] body,
html[lang="ja"] input,
html[lang="ja"] button,
html[lang="ja"] select,
html[lang="ja"] textarea { font-family: 'Montserrat', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif; }

/* ============================================================================================ 服務頁其他 */
/* 收費表表頭原本寫死 nowrap，翻譯後的表頭很長，表格比容器寬、連桌機都要橫向捲動 */
html:not([lang^="zh"]) .hc_table th { white-space: normal; }
/* A 個管「下載 4 包錢 DM」按鈕寫死 nowrap，窄手機超出白卡 */
html:not([lang^="zh"]) .aunit_download_btn { white-space: normal; text-align: center; }
/* 居家護理聯絡資訊：標題欄 130px 放不下長單字，內容用 break-all 把單字從中間切斷（Gao/ling、gmail.c/om） */
html:not([lang^="zh"]) .hn_contact dl { grid-template-columns: 180px 1fr; }
html:not([lang^="zh"]) .hn_contact dd { word-break: normal; overflow-wrap: anywhere; }
@media (max-width: 768px) {
  html:not([lang^="zh"]) .hn_contact dl { grid-template-columns: 1fr; }
  html:not([lang^="zh"]) .hn_contact dd { font-size: 15px; }
}
/* 圓環圖中心的數字（「80 people」「563 người」）比中文長，貼到圓環上 */
html:not([lang^="zh"]) .dcc_res_donut svg text[font-weight="700"],
html:not([lang^="zh"]) .aunit_pie_body svg text[font-weight="700"],
html:not([lang^="zh"]) .aunit_pie svg text[font-weight="700"] { font-size: 17px; }
/* 日照中心頁的卡片數字與年月導覽（手機） */
@media (max-width: 480px) {
  html:not([lang^="zh"]) .dcc_res_card_value { font-size: 19px; }
  html:not([lang^="zh"]) .dcc_daycare_nav_form { flex-wrap: wrap; max-width: 100%; }
  html:not([lang^="zh"]) .dcc_daycare_nav_select { min-width: 0; max-width: 100%; }
}
/* 交通接送頁：車輛卡片標題列（徽章較長時換行） */
html:not([lang^="zh"]) .tp_bv_head { flex-wrap: wrap; }

/* 英文首頁橫幅：1366×768 這類筆電螢幕主按鈕剛好在第一屏下緣，段落字級小一點就看得到 */
@media (min-width: 1025px) and (max-width: 1450px) {
  html[lang="en"] .i_box1 .info p { font-size: 18px; line-height: 32px; margin-bottom: 24px; }
  html[lang="en"] .i_box1 .info h3 { font-size: 46px; }
}

/* ============================================================================================ 第三輪（探針與稽核後補） */
@media (max-width: 600px) {
  html:not([lang^="zh"]) .aunit_info_table th { white-space: normal; width: 110px; }
}
html:not([lang^="zh"]) .aunit_qr_grid figure { display: flex; flex-direction: column; align-items: center; }
/* 家照計畫「服務據點」表格：min-width 600 在手機要橫向捲動，翻譯後第一欄更寬、地址與電話整欄看不到 */
@media (max-width: 768px) {
  html:not([lang^="zh"]) .fc_table { min-width: 0; }
  html:not([lang^="zh"]) .fc_table th,
  html:not([lang^="zh"]) .fc_table td { padding: 8px 6px; word-break: break-word; }
}
html[lang="ja"] .hn_table td.hn_strong { white-space: nowrap; }
html:not([lang^="zh"]) .dcc_table td:first-child { white-space: nowrap; }
@media (max-width: 480px) {
  html:not([lang^="zh"]) .all_tab li a { padding: 8px 14px; font-size: 15px; }
}
/* 「未選取」的性別選項文字顏色太淡（對比不足），翻譯版與中文版相同，順手加深 */
html:not([lang^="zh"]) .join_gender label { color: #7d8a88; }