/*
 * Chữ ngược – section textarea & style_sections
 */

/* Section */
.style_sections .section:nth-child(even) {
    border-bottom: 1px solid #f5f5f5;
}

/* Vùng nhập – label trái, textarea phải (cùng hàng), textarea rộng & cao */
.section.textarea .section_inner {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    text-align: left;
}

.textarea .name {
    flex-shrink: 0;
    width: 140px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    display: flex;
    color: #333;
}

.textarea textarea {
    flex: 1;
    min-width: 0;
    min-height: 120px;
    font: inherit;
    font-size: 18px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    line-height: 1.5;
    padding: 14px 16px;
    resize: vertical;
}

.textarea textarea:focus {
    border-color: #007bff;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

.section {
    padding: 10px 0 !important;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.section .section_inner {
    max-width: 100%;
    text-align: center;
}

.section .main_image {
    clear: right;
    float: right;
    max-width: 100%;
    height: auto;
    margin: 0 0 10px 10px;
    box-sizing: border-box;
}

.section.title_section {
    padding-top: 0;
}

/* Chữ lộn ngược: layout ngang [Nhãn | Nội dung đã biến đổi | Nút Sao chép] */
.style_sections .section .section_inner {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
}

.style_sections .name {
    flex-shrink: 0;
    width: 140px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.style_sections .example {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.style_sections .example .value_inner {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    order: 1;
}

.style_sections .example .buttons {
    flex-shrink: 0;
    order: 2;
}

.style_sections .buttons button:hover {
    background: rgba(255, 255, 255, 0.3);
}

.style_sections .buttons button {
    font: inherit;
    padding: 8px 16px;
    font-size: 13px;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

/* Phần intro (đoạn "Nhập nội dung...") */
.page-chu-nguoc-intro {
    text-align: center;
}

@media (max-width: 480px) {
	.style_sections .name {
		font-size: 14px;
	}
	.style_sections .example {
		font-size: 14px;
	}
    .textarea .name {
        width: 116px;
        font-size: 14px;
    }
    .style_sections .name {
        width: 116px;
        font-size: 14px;
    }
    
    
}